Bài viết này cũng có sẵn trong:
Bài viết này sẽ hướng dẫn bạn cách thêm đánh giá sản phẩm vào cửa hàng trực tuyến bằng Power Up Script.

Nội dung bài viết

A. Thêm số sao và số lượng đánh giá phía dưới tên sản phẩm
B. Thêm đánh giá của khách hàng phía dưới mô tả sản phẩm


Trong scripts dưới đây, ShopBase đã chuẩn bị sẵn 9 đánh giá mẫu, bạn có thể thay các đánh giá mẫu này bằng các link khác từ Loox như trong hướng dẫn chi tiết tại phần B của bài viết này.

Để thêm Power Up Script vào trang sản phẩm, tại trang quản trị ShopBase, đi tới Online store > Preferences > Additional Scripts > Head như hướng dẫn trong bài viết này.



A. Thêm số sao và số lượng đánh giá 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 đánh giá bằng cách sửa 2 biến pointreviewsCount, vui lòng đảm bảo biến 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>';
var productNameEl = document.querySelectorAll('.product-name, .product__name');
if (productNameEl && productNameEl[0] && document.getElementsByClassName("title-review").length === 0) {
productNameEl[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>


Đánh giá sẽ hiển thị dưới tên sản phẩm như trong ảnh trên

B. Thêm đánh giá của khách hàng phía dưới mô tả sản phẩm

Thêm đánh giá của bộ sưu tập All Over Print vào phía dưới các trang sản phẩm

<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>


Đánh giá mẫu từ Loox

Cách lấy đường dẫn đánh giá từ Loox trên trang web có sẵn

Nếu sử dụng nguyên văn đoạn scripts phía trên, một số đánh giá mẫu sẽ được thêm vào trang sản phẩm. Trong 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 thay thế. Vui lòng làm theo hướng dẫn dưới dây để nhập các đánh giá khác từ Loox:

Vào trang sản phẩm trên Loox.

Nhấp chuột phải vào phần đánh giá 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



Tại phần https://loox.io/widget/N1lr1T_0GZ/reviews/5022299396?l=ft/lbs'; trong đoạn script phía trên, thay đoạn mã N1lr1T_0GZ bằng đoạn mã vừa sao chép tại bước 3, sau đó lặp lại các bước để dán toàn bộ script như đã hướng dẫn.

Bài viết liên quan

Thêm Power Up Scripts để tối ưu hóa cửa hàng của bạn
Chặn hoặc cho phép một số quốc gia truy cập cửa hàng
Chặn lưu lượng truy cập từ phần mềm gián điệp vào cửa hàng
Thêm thông báo tùy chỉnh vào trang sản phẩm
Ẩn nút Paypal Express Checkout
Thêm Facebook Live Chat vào cửa hàng của bạn
Bài viết có hữu ích không?
Hủy bỏ
Cảm ơn!