Skip to content

Instantly share code, notes, and snippets.

@pavelglac
Last active March 15, 2024 09:04
Show Gist options
  • Save pavelglac/d5520d725035b3507c0160ad0e0cd8e7 to your computer and use it in GitHub Desktop.
Save pavelglac/d5520d725035b3507c0160ad0e0cd8e7 to your computer and use it in GitHub Desktop.
<script src="https://cdn.twistopay.com/widget/twisto-widget.js" async></script>
<script>
;(() => {
const shoptetData = getShoptetDataLayer()
const designAttributes = {
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 (shoptetData.pageType === 'productDetail') {
const price = Number(shoptetData.product.priceWithVat)
const language = shoptetData.language
const currentDesign = shoptet.design.template.name
const sibblingElement = document.querySelector(
designAttributes[currentDesign].selector
)
if (price < 1500) {
return
}
const styles = `
<style>
twisto-widget {
${designAttributes[currentDesign].styles}
order: 300;
}
</style>
`
const author =
document
.querySelector("meta[name='author']")
?.getAttribute('content') ??
document.querySelector('#logo')?.title ??
''
const currency = shoptetData.product.currency
sibblingElement.insertAdjacentHTML(
'afterend',
`
${styles}
<twisto-widget
product="pay-in-3"
language=${language}
merchant-name="${author}"
amount="${price}"
currency="${currency}">
</twisto-widget>
`
)
}
})()
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment