widget-shoptet-all-products.html

widget-shoptet-all-products.html

<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
      )
      const styles = `
            <style>
                twisto-widget {
                    ${designAttributes[currentDesign].styles}
                    margin-bottom: 16px;
                    order: 300;
                }
            </style>
          `

      if (price >= 1500) {
        const author =
          document
            .querySelector("meta[name='author']")
            ?.getAttribute('content') ??
          document.querySelector('#logo')?.title ??
          ''
        const currency = shoptetData.product.currency

        sibblingElement.insertAdjacentHTML(
          'afterend',
          `
            ${styles}
            <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-3"
                language=${language}
                merchant-name="${author}"
                amount="${price}"
                currency="${currency}">
            </twisto-widget>
            <twisto-widget
              product="pay-in-30-days"
              language=${language}
            ></twisto-widget>
          `
        )
      } else {
        sibblingElement.insertAdjacentHTML(
          'afterend',
          `
            ${styles}
            <twisto-widget
                product="pay-in-30-days"
                language=${language}
            ></twisto-widget>`
        )
      }
    }
  })()
</script>