本条还可参阅:
本文将指导您使用Power Up脚本将产品评论添加到您的在线商店。

本文的主要内容

A. 在产品名称下方添加星数和评论数
B. 在产品描述下方添加客户的评论

在下面的脚本中,ShopBase准备了9个示例评论,您可以按照本文B部分的指南将这些示例评论替换为 Loox 中的其他链接。
要将Power Up脚本添加到产品页面,在ShopBase后台上,请选择 Online store > Preferences > Additional Scripts > Head。请参阅 此文章来进行操作。



A. 在产品名称下方添加星数和评论数

要更改星数和评论数,您可以编辑 pointreviewsCount 两个变体,请注意 point 的价值必须小于或等于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>


星数和评论数将如上显示在产品名称下方

B. 在产品描述下方添加客户的评论

将全身印花(All Over Print)采集的评论添加到产品页脚

<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的示例评论

如何获取Loox的评论链接

如果您使用上述脚本,一些示例评论将添加到产品页面。如果您可以从Loox找到更多评论的其他链接并要替换它们,请进行以下步骤·:

访问Loox上的产品页面。

右击评论,然后点击 View Frame Source,如下所示。



widget/VyXXXXXpU/reviews 路径中,复制 widgetreview 之间的代码,其形式为 VyXXXXXpU



在上面脚本的 https://loox.io/widget/N1lr1T_0GZ/reviews/5022299396?l=ft/lbs'; 部分中,将 N1lr1T_0GZ 代码改为在第3步已复制的代码,然后按照上面的指南粘贴整个脚本。

相关文章

添加Power Up脚本以优化您的商店
阻止或允许某些国际访问商店
阻止广告工具访问您网站
将自定义通知添加到产品页面
隐藏Paypal Express Checkout按钮
将Facebook实时聊天添加到您的商店
这篇文章有帮助吗?
取消
谢谢!