Thêm thông báo tùy chỉnh vào trang sản phẩm

Bài viết này sẽ hướng dẫn bạn thêm mã code để trang sản phẩm có thêm một thông báo ngay dưới phần giá sản phẩm của bạn. Bạn có thể sử dụng thông báo này để viết các nội dung hấp dẫn nhằm thúc đẩy khách hàng đang do dự mua càng sớm càng tốt để không bỏ lỡ các khuyến mãi hấp dẫn. Thông báo tùy chỉnh hiển thị ở trang sản phẩm như hình dưới đây.

Hướng dẫn

Nếu bạn đang sử dụng chủ đề Roller, hãy dùng đoạn mã phía dưới:

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

Nếu bạn đang sử dụng chủ đề Inside, hãy dùng đoạn mã dưới đây:

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

Vì lý do bảo mật và để tránh ảnh hưởng đến quá trình thanh toán, các đoạn mã thêm vào cửa hàng sẽ KHÔNG được tải trên trang thanh toán. Vui lòng sử dụng các phương thức được ShopBase tích hợp sẵn trong cửa hàng.

Bài viết liên quan