Trong scripts dưới đây, ShopBase đã chuẩn bị sẵn cho bạn 9 reviews mang tính demo. Bạn có thể thay các review demo này bằng các link khác từ Loox theo cách 2.b dưới đây

Bạn cần paste script này vào Online store > Preferences > Additional Scripts > Head theo hướng dẫn sử dụng Power Up Script.

1. Thêm mục đánh giá vào phía dưới tên sản phẩm

Bạn có thể thay đổi 2 giá trị để thay đổi số sao và số lượng reviews bằng cách sửa 2 biến pointreviewsCount, đảm bảo point luôn bé hơn hoặc bằng 5.

<script>
var point = 4.5;
var reviewsCount = 296;
var star = '<svg class="svg-inline--fa fa-star fa-w-18" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg>';
var halfStar = '<svg class="svg-inline--fa fa-star-half-alt fa-w-17" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star-half-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 536 512" data-fa-i2svg=""><path fill="currentColor" d="M508.55 171.51L362.18 150.2 296.77 17.81C290.89 5.98 279.42 0 267.95 0c-11.4 0-22.79 5.9-28.69 17.81l-65.43 132.38-146.38 21.29c-26.25 3.8-36.77 36.09-17.74 54.59l105.89 103-25.06 145.48C86.98 495.33 103.57 512 122.15 512c4.93 0 10-1.17 14.87-3.75l130.95-68.68 130.94 68.7c4.86 2.55 9.92 3.71 14.83 3.71 18.6 0 35.22-16.61 31.66-37.4l-25.03-145.49 105.91-102.98c19.04-18.5 8.52-50.8-17.73-54.6zm-121.74 123.2l-18.12 17.62 4.28 24.88 19.52 113.45-102.13-53.59-22.38-11.74.03-317.19 51.03 103.29 11.18 22.63 25.01 3.64 114.23 16.63-82.65 80.38z"></path></svg>';

function addTitleReview(point) {
var content = '';
for (var i = 0; i < Math.floor(point); i++) {
content += star
}
if (point - i > 0) {
content += halfStar
}
if (reviewsCount) {
content += ' <span>' + reviewsCount + ' customer reviews</span>'
}
var content = '<div class="title-review">' + content + '</div>';
document.querySelectorAll('.product-name, .product__name')[0].insertAdjacentHTML('afterend', content)
}
document.addEventListener('DOMContentLoaded', function() {
window.sbsdk.page.onLoad(function() {
setTimeout(function() {
var context = window.sbsdk.page.getContext();
if (context.type === 'product') {
setTimeout(function() {
addTitleReview(point)
}, 1000)
}
}, 500);
})
})
</script>
<style type="text/css">
h1.product__name.mb12 {
margin-bottom: 4px !important
}

.title-review {
margin-bottom: 8px
}

.title-review svg {
color: #fbb400;
height: 1em
}
</style>


Ví dụ review dưới tên sản phẩm

2. Thêm vùng liệt kê review của buyers phía dưới sản phẩm

a. Thêm review của bộ sản phẩm All Over Print vào dưới tất cả trang view product

<script>
// Loox review
(function() {
// You can change your review url from loox here, demo: https://loox.io/widget/N1lr1T_0GZ/reviews/5022299396?l=ft/lbs
var reviewLink = 'https://loox.io/widget/N1lr1T_0GZ/reviews/5022299396?l=ft/lbs';
// You can replaced "*" by product ref id to show at selected product page
var productIds = ['*'];
var customReview = {
init: function() {
window.sbsdk.page.onContextUpdate(function(context) {
setTimeout(function() {
if (context.type !== 'product') {
return
}
setTimeout(function() {
var productId = context.payload.id;
if (!customReview.injected() && (productIds.indexOf('*') !== -1 || productIds.indexOf(productId) !== -1)) {
customReview.injectReview()
}
}, 1000);
}, 500);

});
if (window.addEventListener) {
window.addEventListener('message', customReview.calculateHeight, !1)
} else {
window.attachEvent('onmessage', customReview.calculateHeight)
}
},
injected: function() {
return !!document.getElementById('loox-review')
},
injectReview: function() {
var el = document.querySelector('#product');
if (el) {
var e = document.createElement('div');
e.className = 'container';
e.style = '#loox-review { width: 100%;height: 100%;border: none;}';
e.innerHTML = '<div class="row"><div class="col-12 col-md-12"><iframe id="loox-review" style="width: 100%;height: 100%;border: none;}" src="' + reviewLink + '"></iframe></div></div>';
el.parentNode.insertBefore(e, el.nextSibling)
}
},
calculateHeight(event) {
if (!event.data || typeof event.data !== 'string') {
return
}
try {
var data = JSON.parse(event.data);
if (typeof data === 'object' && data.frame !== 'looxReviewsFrame') {
return
}
var el = document.getElementById('loox-review')
if (el) {
el.style.height = data.height + 'px'
}
} catch (_) {}
},
}
document.addEventListener('DOMContentLoaded', function() {
customReview.init()
})
})();
</script>


Loox Review Demo

b. Cách lấy link loox review của trên website có sẵn của bạn

Nếu sử dụng nguyên văn đoạn scripts phía trên, một số đánh giá demo sẽ được thêm vào trang sản phẩm. Trong một số trường hợp, bạn có thể tìm được các đường dẫn khác từ loox với nhiều đánh giá hơn và muốn dùng nó thay thế. Làm theo hướng dẫn dưới dây sẽ giúp bạn đưa được các review khác từ Loox vào:

Vào trang xem sản phẩm trang đã có

Chuột phải vào phần review như ảnh dưới và chọn "View Frame Source"


Copy đoạn mã giữa widgetreview có dạng VyXXXXXpU từ chuỗi trên đường dẫn widget/VyXXXXXpU/reviews


Thay nội dung của phần 'https://loox.io/widget/N1lr1T_0GZ/reviews/5022299396?l=ft/lbs';` trong code phía trên, rồi dàn vào checkout script của shop bạn là được
Bài viết có hữu ích không?
Hủy bỏ
Cảm ơn!