Widgety na Shoptetu
Připravili jsme pro vás skript pro snadnou integraci widgetů Twisto do vašeho Shoptet e-shopu.
Shoptet nabízí mnoho způsobů úprav e-shopu, takže uvedené instrukce nemusí platit přesně pro váš e-shop. Pokud hledáte inspiraci, jak integrovat widgety Twisto, podívejte se na náš zdrojový kód.
Úprava šablony Shoptetu
- Přihlaste se do administrace Shoptetu.
- Přejděte na Šablony > Editor vzhledu > HTML kód.
- Najděte sekci Patička (spodní část značky BODY).
Měli byste vidět něco podobného: 
Přidání widgetů Twisto
Podle toho, zda máte na e-shopu aktivní produkt Zaplať ve 3, vyberte jeden z následujících skriptů a vložte ho do sekce Patička (spodní část značky BODY).
Zaplať ve 3 a Zaplať za 30 dní
Widget Zaplať za 30 dní se zobrazuje vždy. Widget Zaplať ve 3 se zobrazí jen pokud je cena vyšší než 1500 Kč.
<script src="https://cdn.twistopay.com/widget/twisto-widget.js" async></script>
<script>
!function(){var t=getShoptetDataLayer(),e={Classic:{selector:".social-buttons-wrapper",styles:"margin-top: 19px;"},Samba:{selector:".p-to-cart-block",styles:"margin-bottom: 16px;"},Disco:{selector:".p-to-cart-block",styles:"margin-top: 22px;"},Step:{selector:".p-to-cart-block",styles:"margin-top: 10px; margin-bottom: 10px;"},Waltz:{selector:".add-to-cart",styles:"margin-bottom: 16px;"},Tango:{selector:".price.row"},Techno:{selector:".p-details-bottom .p-details",styles:"margin-top: 17px;"},Echo:{selector:"form.p-action",styles:"margin-top: 17px;"},Soul:{selector:".product-detail-cart",styles:"margin-top: 24px;"},Rock:{selector:"#product-detail",styles:"margin-top: 16px;"},Pop:{selector:"#product-detail",styles:"margin-top: 20px; margin-bottom: 20px;"}};if("productDetail"===t.pageType){var o=Number(t.product.priceWithVat),a=t.language,c=shoptet.design.template.name,r=document.querySelector(e[c].selector),i="<style>twisto-widget {".concat(e[c].styles," margin-bottom: 16px; order: 300;}</style>");if(o>=1500){var n,s,l,p,d=null!==(n=null!==(s=null===(l=document.querySelector("meta[name='author']"))||void 0===l?void 0:l.getAttribute("content"))&&void 0!==s?s:null===(p=document.querySelector("#logo"))||void 0===p?void 0:p.title)&&void 0!==n?n:"",g=t.product.currency;r.insertAdjacentHTML("afterend","".concat(i,'<style> twisto-widget:nth-of-type(1) {margin-bottom: 12px;} twisto-widget:nth-of-type(2) {margin-top: 12px;}</style><twisto-widget product="pay-in-30-days" language=').concat(a,'></twisto-widget><twisto-widget product="pay-in-3" language=').concat(a,' merchant-name="').concat(d,'" amount="').concat(o,'" currency="').concat(g,'"></twisto-widget>'))}else r.insertAdjacentHTML("afterend","".concat(i,'<twisto-widget product="pay-in-30-days" language=').concat(a,"></twisto-widget>"))}}();
</script>Zaplať ve 3
Skript automaticky zjistí, zda je cena vyšší než 1500 Kč, a widget v tom případě zobrazí.
<script src="https://cdn.twistopay.com/widget/twisto-widget.js" async></script>
<script>
!function(){var t=getShoptetDataLayer(),e={Classic:{selector:".social-buttons-wrapper",styles:"margin-top: 19px;"},Samba:{selector:".p-to-cart-block",styles:"margin-bottom: 16px;"},Disco:{selector:".p-to-cart-block",styles:"margin-top: 22px;"},Step:{selector:".p-to-cart-block",styles:"margin-top: 10px; margin-bottom: 10px;"},Waltz:{selector:".add-to-cart",styles:"margin-bottom: 16px;"},Tango:{selector:".price.row"},Techno:{selector:".p-details-bottom .p-details",styles:"margin-top: 17px;"},Echo:{selector:"form.p-action",styles:"margin-top: 17px;"},Soul:{selector:".product-detail-cart",styles:"margin-top: 24px;"},Rock:{selector:"#product-detail",styles:"margin-top: 16px;"},Pop:{selector:"#product-detail",styles:"margin-top: 20px; margin-bottom: 20px;"}};if("productDetail"===t.pageType){var o=Number(t.product.priceWithVat),r=t.language,a=shoptet.design.template.name,l=document.querySelector(e[a].selector),s="<style>twisto-widget {"+e[a].styles+" order: 300;}</style>";if(o>=1500){var i,c,p,n,d=null!==(i=null!==(c=null===(p=document.querySelector("meta[name='author']"))||void 0===p?void 0:p.getAttribute("content"))&&void 0!==c?c:null===(n=document.querySelector("#logo"))||void 0===n?void 0:n.title)&&void 0!==i?i:"",g=t.product.currency;l.insertAdjacentHTML("afterend",s+'<twisto-widget product="pay-in-3" language='+r+' merchant-name="'+d+'" amount="'+o+'" currency="'+g+'"></twisto-widget>')}else l.insertAdjacentHTML("afterend",s+'<twisto-widget product="pay-in-30-days" language='+r+"></twisto-widget>")}}();
</script>Zaplať za 30 dní
<script src="https://cdn.twistopay.com/widget/twisto-widget.js" async></script>
<script>
!function(){var t=getShoptetDataLayer(),e={Classic:{selector:".social-buttons-wrapper",styles:"margin-top: 19px;"},Samba:{selector:".p-to-cart-block",styles:"margin-bottom: 16px;"},Disco:{selector:".p-to-cart-block",styles:"margin-top: 22px;"},Step:{selector:".p-to-cart-block",styles:"margin-top: 10px; margin-bottom: 10px;"},Waltz:{selector:".add-to-cart",styles:"margin-bottom: 16px;"},Tango:{selector:".price.row"},Techno:{selector:".p-details-bottom .p-details",styles:"margin-top: 17px;"},Echo:{selector:"form.p-action",styles:"margin-top: 17px;"},Soul:{selector:".product-detail-cart",styles:"margin-top: 24px;"},Rock:{selector:"#product-detail",styles:"margin-top: 16px;"},Pop:{selector:"#product-detail",styles:"margin-top: 20px; margin-bottom: 20px;"}};if("productDetail"===t.pageType){var o=t.language,s=shoptet.design.template.name,a=document.querySelector(e[s].selector),r="<style>twisto-widget {".concat(e[s].styles," order: 300;}</style>");a.insertAdjacentHTML("afterend","".concat(r,'<twisto-widget product="pay-in-30-days" language=').concat(o,"></twisto-widget>"))}}();
</script>Testování
Po vložení skriptu ověřte, že vše funguje. Přejděte na detail produktu — měl by se zobrazit widget Twisto. Vyzkoušejte různá responzivní zobrazení a ujistěte se, že widget zůstává na správném místě. Hotovo — widgety Twisto máte integrované ve Shoptetu.
Řešení problémů
Pokud je widget na špatném místě, zkuste ve skriptu upravit selektor — měl by to udělat váš vývojář. Jako inspiraci použijte naše zdrojové kódy: Zaplať ve 3 a Zaplať za 30 dní, Zaplať ve 3 a Zaplať za 30 dní.