将自定义通知添加到产品页面

本文将指导您添加代码，以产品页面上产品价格部分下面显示一个通知。您可以使用此通知来编写引人入胜的内容，以激励犹豫不决的客户尽快购买并免错过有吸引力的促销活动。自定义通知将显示在产品页面上，如下所示。

操作步骤

ShopBase后台选择 线上店铺（Online Store） > 偏好（Preferences）。

往下拉到 Additional scripts部分，然后将以下代码粘贴到 Head选项卡。

如果您使用Roller主题，请使用这段代码。

<script>
window.sbsdk.ready(function() {
    window.sbsdk.page.onContextUpdate(function(context) {
        if (context && context.type === "product") {
            if (!document.getElementById("custom-text")) {
            setTimeout(function() {
                var options = { weekday: 'long', month: 'long', day: 'numeric' };
                var today  = new Date();
                var currentTimeString = today.toLocaleDateString("en-US", options);
                var discountCode = "FD10";
                var discountPercentage = "10%";
                var target = document.getElementsByClassName('product__price').length > 0 ? document.getElementsByClassName('product__price') : document.getElementsByClassName('price');
                var text = "<p id='custom-text' style='font-size: 18px;'> Father Day Promotion, using code <b>{{discountCode}}</b> for <b style='color: #c5392e'>{{discountPercentage}} Off.</b><br>Ends on <b>{{currentTimeString}}</b></p>"
                var replaceVariable = function(txt, params) {
                  params.map(function(item) {
                    var txtNeedReplace = "{{" + Object.keys(item)[0] + "}}";
                    if (txt.indexOf(txtNeedReplace) !== -1) {
                         txt = txt.split(txtNeedReplace).join(Object.values(item)[0]);
                    }
                  });
                    return txt;
                }
                text = replaceVariable(text, [{"discountCode": discountCode}, {"discountPercentage": discountPercentage}, {"currentTimeString": currentTimeString}]);
                if (target && target.length > 0) {
                  target[0].insertAdjacentHTML('afterend', text); 
                } 
            }, 1000);
           }
        }
    });
});
</script>

如果您使用Inside主题，请使用这段代码：

<script>
window.sbsdk.ready(function() {
    window.sbsdk.page.onContextUpdate(function(context) {
        if (context && context.type === "product") {
            if (!document.getElementById("custom-text")) {
            setTimeout(function() {
              	var priceSelector = document.querySelector('div.product__price-span');
                var target = priceSelector || document.querySelector('.price');
              	if (!target) {
                  return;
                }
                var options = { weekday: 'long', month: 'long', day: 'numeric' };
                var today  = new Date();
                var currentTimeString = today.toLocaleDateString("en-US", options);
                var discountCode = "FD10";
                var discountPercentage = "10%";
                var text = "<p id='custom-text' style='font-size: 18px;'> Father Day Promotion, using code <b>{{discountCode}}</b> for <b style='color: #c5392e'>{{discountPercentage}} Off.</b><br>Ends on <b>{{currentTimeString}}</b></p>"
                var replaceVariable = function(txt, params) {
                  params.map(function(item) {
                    var txtNeedReplace = "{{" + Object.keys(item)[0] + "}}";
                    if (txt.indexOf(txtNeedReplace) !== -1) {
                         txt = txt.split(txtNeedReplace).join(Object.values(item)[0]);
                    }
                  });
                    return txt;
                }
                text = replaceVariable(text, [{"discountCode": discountCode}, {"discountPercentage": discountPercentage}, {"currentTimeString": currentTimeString}]);
                target.insertAdjacentHTML('afterend', text);
            }, 1000);
           }
        }
    });
});
</script>

您可以在 <p id='custom-text' style='font-size: 18px;'> Father Day Promotion, using code <b>{{discountCode}}</b> for <b style='color: #c5392e'>{{discountPercentage}} Off.</b><br>Ends on <b>{{currentTimeString}}</b></p> 代码行上更改产品页面上显示的内容。

点击 Save保存。

关联页面

Preferences项目概述
阻止或允许某些国际访问商店
阻止广告工具访问您网站
添加Power Up脚本以优化您的商店
将Facebook实时聊天添加到您的商店

更新于： 09/02/2023