Hướng dẫn

Vào Online Store > Themes > Customize > Checkout Page > More Customization



Paste script dưới đây vào ô dành cho Custom JavaScript code

Bạn có thể thay đổi nội dung text, đường dẫn ảnh để thay bằng nội dung khác.

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)


Demo

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