widget-shoptet-pay-in-30-days.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 language = shoptetData.language;
            const currentDesign = shoptet.design.template.name;
            const sibblingElement = document.querySelector(
                designAttributes[currentDesign].selector
            );
            const styles = `
                    <style>
                        twisto-widget {
                            ${designAttributes[currentDesign].styles}
                            order: 300;
                        }
                    </style>
                `;

            sibblingElement.insertAdjacentHTML(
                "afterend",
                `${styles}<twisto-widget product="pay-in-30-days" language=${language}></twisto-widget>`
            );

        }
    })();
</script>