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

Từ trang quản trị ShopBase, đi tới Cửa hàng (Online Store) > Cài đặt ưu tiên (Preferences).

Đi tới phần Scripts bổ sung (Additional scripts) và dán mã code dưới đây vào tab Đầu (Head).

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>

Bạn có thể thay đổi nội dung hiển thị trên trang sản phẩm trong dòng code <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>.

Ấn Lưu (Save).

Bài viết liên quan

Tổng quan về mục Preferences
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 Power Up Scripts để tối ưu hóa cửa hàng của bạn
Thêm Facebook Live Chat vào cửa hàng của bạn

Cập nhật vào: 09/02/2023