Bài viết này cũng có sẵn trong:
Trong bài viết này chúng tôi sẽ giúp bạn tạo hai công cụ hữu hiệu trên trên trang thanh toán giúp tăng tỷ lệ chuyển đổi trên cửa hàng. Đó là đồng hồ đếm ngược - Countdown Timer, công cụ tạo ra sự cấp bách cho khách hàng để họ hoàn tất việc thanh toán và các thông tin để tăng độ tin cậy - Trust Indicators (như bảo hành sản phẩm, số lượng đơn đặt hàng đã giao thành công), công cụ giúp tăng độ tin cậy cho cửa hàng thương mại điện tử. Chúng sẽ được thêm vào trang thanh toán như sau:



Hướng dẫn

Từ trang quản trị ShopBase, đi tới Online Store > Themes > Customize. Chọn chỉnh sửa Checkout Page. Tìm mục Put your custom JavaScript code here to add and change some content of Checkout pages. của phần More Customization.


Dán mã code phía dưới vào trường Put your custom JavaScript code here to add and change some content of Checkout pages..

var mins = 10;
var pSettings = {
highDemandImg: 'https://img.shopbase.com/files/10038432/2019/06/19/0x500@flame_24-aa8a1.png',
highDemandText: "An item you ordered is in very high demand. No worries, we have reserved your order so it doesn't run out of stock before checkout.",
// highDemandText: "An item you ordered is in very high demand.",

whyUs: [
{
img: 'https://img.shopbase.com/files/10038432/2019/06/19/0x500@money-back-6d3f8.png',
title: "60-day Satisfaction Guarantee",
text: "If you're not satisfied with our products we will rectify the situation immediately, no questions asked. Your satisfaction is very important to us.",
},
{
img: 'https://img.shopbase.com/files/10038432/2019/06/19/0x500@mail-truck-64e12.png',
title: "Over 34,245 successfully shipped orders",
text: "We made as many happy customers as many orders we shipped. You simply have to join our big family.",
}
]
};

!function(e){var n=!1;if("function"==typeof define&&define.amd&&(define(e),n=!0),"object"==typeof exports&&(module.exports=e(),n=!0),!n){var o=window.Cookies,t=window.Cookies=e();t.noConflict=function(){return window.Cookies=o,t}}}(function(){function e(){for(var e=0,n={};e<arguments.length;e++){var o=arguments[e];for(var t in o)n[t]=o[t]}return n}return function n(o){function t(n,r,i){var c;if("undefined"!=typeof document){if(arguments.length>1){if("number"==typeof(i=e({path:"/"},t.defaults,i)).expires){var a=new Date;a.setMilliseconds(a.getMilliseconds()+864e5*i.expires),i.expires=a}i.expires=i.expires?i.expires.toUTCString():"";try{c=JSON.stringify(r),/^[\{\[]/.test(c)&&(r=c)}catch(e){}r=o.write?o.write(r,n):encodeURIComponent(String(r)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),n=(n=(n=encodeURIComponent(String(n))).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent)).replace(/[\(\)]/g,escape);var s="";for(var f in i)i[f]&&(s+="; "+f,!0!==i[f]&&(s+="="+i[f]));return document.cookie=n+"="+r+s}n||(c={});for(var p=document.cookie?document.cookie.split("; "):[],d=/(%[0-9A-Z]{2})+/g,u=0;u<p.length;u++){var l=p[u].split("="),C=l.slice(1).join("=");this.json||'"'!==C.charAt(0)||(C=C.slice(1,-1));try{var g=l[0].replace(d,decodeURIComponent);if(C=o.read?o.read(C,g):o(C,g)||C.replace(d,decodeURIComponent),this.json)try{C=JSON.parse(C)}catch(e){}if(n===g){c=C;break}n||(c[g]=C)}catch(e){}}return c}}return t.set=t,t.get=function(e){return t.call(t,e)},t.getJSON=function(){return t.apply({json:!0},[].slice.call(arguments))},t.defaults={},t.remove=function(n,o){t(n,"",e(o,{expires:-1}))},t.withConverter=n,t}(function(){})});var defaultTime=mins*60;var cookieCode='checkout_start_ts';function formatSecs(secs){var m=Math.floor(secs/60),s=secs%60;if(m<10){m='0'+m}
if(s<10){s='0'+s}
return m+':'+s}
function currentTSs(){var date=new Date();return Math.round(date.getTime()/1000)}
function getStartTimestamp(){var timestamp=currentTSs();var startTS=Cookies.get(cookieCode);if(typeof startTS==='undefined'||(timestamp-startTS>=defaultTime)){startTS=currentTSs()}
Cookies.set(cookieCode,startTS,{expires:1});return startTS}
function addCountdownBlock(){setTimeout(function(){var ele1=document.getElementsByClassName('checkout-layout');if(ele1&&ele1.length===0){return}
var ele2=document.getElementById('order_count_down');var ele3=document.getElementsByClassName('os-order-number');if(ele3&&ele3.length>0){if(ele2){ele2.parentNode.removeChild(ele2);Cookies.remove(cookieCode)}
return}
if(ele2){return}
var date=new Date();var timestamp=currentTSs();var startTS=getStartTimestamp();var remainingSecs=startTS-timestamp+defaultTime;var content='<div id="order_count_down"><div class="high_demand_text" style="width:100%;display:table"><div style="display:table-cell;vertical-align:middle"><img src="'+pSettings.highDemandImg+'"></div><div style="font-weight:bold;padding-left:5px; color: #545454;">'+pSettings.highDemandText+'</div></div><div stlye="margin-top:8px;"><div id="ct836" class="checkout_countdown" style="display:block;background:#fff5d2;padding:10px 20px;border:1px solid #fac444;font-size:14px;color:#2c2c2c;font-weight:bold;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; margin:5px 0px 20px 0px">Your order is reserved for <span id="time">'+formatSecs(remainingSecs)+'</span> minutes!</div></div></div>';document.getElementsByClassName('main__content')[0].insertAdjacentHTML('afterbegin',content)},500)}
function addAdBlock(){setTimeout(function(){var ele1=document.getElementsByClassName('checkout-layout');if(ele1&&ele1.length===0){return}
var ele2=document.getElementById('why-us');if(ele2){return}
var reasonsContent='';for(var i=0;i<pSettings.whyUs.length;i++){reasonsContent+='<div class="wyuscs" style="overflow: auto;margin-top: 16px;"><div class="wyuscs1" style="float: left;width: 20%">';reasonsContent+='<img style="max-width: 64px;" src="'+pSettings.whyUs[i].img+'"></div>';reasonsContent+='<div class="wyuscs2" style="float:right;width: 80%">';reasonsContent+='<span style="font-weight: bold">'+pSettings.whyUs[i].title+'</span>';reasonsContent+='<p>'+pSettings.whyUs[i].text+'</p></div></div>'}
var content='<div id="why-us" style="position:relative;padding:10px 0px;color: #666"><div class="wyustit" style="position:relative;z-index:1;text-align:center"><span style="background:#f2f2f2;padding:0 15px">Why choose us?</span><span style="position: absolute; height: 1px;width: 100%;top: 50%;background: #dfdfdf;left: 0;z-index: -1;"></span></div>'+reasonsContent+'</div>';document.getElementsByClassName('order-summary__sections')[0].insertAdjacentHTML('afterend',content)},500)}
function removeScriptOnLastStep(){setTimeout(function(){window.sbsdk.page.onContextUpdate(function(context){if(context.type==='post_checkout'){var ad=document.getElementById('why-us');var count=document.getElementById('order_count_down');if(ad){ad.remove()}
if(count){count.remove()}}})},600)}
window.sbsdk.page.onContextUpdate(function(context){if(context.type!=='post_checkout'){addCountdownBlock();addAdBlock()}})
removeScriptOnLastStep();window.sbsdk.$on('page_load',function(){window.sbsdk.page.onContextUpdate(function(context){if(context.type!=='post_checkout'){addCountdownBlock();addAdBlock()}})
removeScriptOnLastStep()});setInterval(function(){var timeElm=document.getElementById('time');if(timeElm){var timestamp=currentTSs();var startTS=getStartTimestamp();var remainingSecs=startTS-timestamp+defaultTime;if(remainingSecs<=0){startTS=Math.round(date.getTime()/1000);Cookies.set(cookieCode,startTS,{expires:1});remainingSecs=startTS-timestamp+defaultTime}
timeElm.innerHTML=formatSecs(remainingSecs)}},1000)


Lưu ý:

Bạn có thể thay đổi nội dung, liên kết hình ảnh nếu cần.

Ấn Save để lưu.
Bài viết có hữu ích không?
Hủy bỏ
Cảm ơn!