Afterpay Site Messaging

1
<!-- Begin Afterpay Stencil Snippet for BigCommerce v3.1.2 -->
2
<script>
3
{{#or (if page_type '===' 'product') (if page_type '===' 'cart')}}
4
    (function(){
5
        const supported = ["AUD", "NZD", "USD"];
6
        const currency = '{{currency_selector.active_currency_code}}';
7
        if (supported.indexOf(currency) > -1) {
8
            {{#if page_type '===' 'product'}}
9
                let targetSelector = '.productView .productView-price';
10
            {{#if product.price.with_tax}}
11
                let priceSelector = '.productView-price .price--withTax';
12
                let cachedAmount = '{{product.price.with_tax.value}}';
13
            {{else}}
14
                let priceSelector = '.productView-price .price--withoutTax';
15
                let cachedAmount = '{{product.price.without_tax.value}}';
16
            {{/if}}
17
            {{else if page_type '===' 'cart'}}
18
                let targetSelector = 'ul.cart-totals li.cart-total:last-child';
19
                let priceSelector = '.cart-total-grandTotal';
20
                let cachedAmount = '{{cart.grand_total.value}}';
21
            {{/if}}
22
                const locales = {
23
                    AUD: 'en_AU',
24
                    NZD: 'en_NZ',
25
                    USD: 'en_US',
26
                };
27
                const init = function(){
28
                    Afterpay.createPlacements({
29
                        targetSelector: targetSelector,
30
                        attributes: {
31
                            locale: locales[currency],
32
                            currency: currency,
33
                            amount: cachedAmount,
34
                        }
35
                    });
36
                };
37
                const script = document.createElement('script');
38
                script.src = "https://js.afterpay.com/afterpay-1.x.js";
39
                script.dataset.min = "1.00";
40
                script.dataset.max = "2000.00";
41
                script.onload = function () {
42
                    init();
43
                    setInterval(() => {
44
                        if (cachedAmount != document.querySelector(priceSelector).innerText) {
45
                           cachedAmount = document.querySelector(priceSelector).innerText;
46
                           if (document.querySelector('afterpay-placement')) {
47
                               document.querySelector('afterpay-placement').dataset.amount = cachedAmount;
48
                           } else {
49
                               init();
50
                           }
51
                        }
52
                    }, 400);
53
                };
54
                document.head.appendChild(script);
55
        }
56
    })();
57
{{/or}}
58
</script>
59
<!-- End Afterpay Stencil Snippet for BigCommerce v3.1.2 -->

1
<!-- Begin Afterpay Blueprint Snippet for BigCommerce v2.0.2 -->
2
<afterpay-placement></afterpay-placement>
3
<script>
4
    (function(){
5
        const supported = ["AUD", "NZD", "USD"];
6
        const currency = '%%GLOBAL_CurrentCurrencyCode%%';
7
        if (supported.indexOf(currency) > -1) {
8
            let priceSelector = '.ProductDetailsGrid .VariationProductPrice';
9
            let cachedAmount = '%%GLOBAL_RawProductPrice%%';
10
            const locales = {
11
                AUD: 'en_AU',
12
                NZD: 'en_NZ',
13
                USD: 'en_US',
14
            };
15
            const placement = document.querySelector('afterpay-placement');
16
            placement.dataset.locale = locales[currency];
17
            placement.dataset.currency = currency;
18
            placement.dataset.amount = cachedAmount;
19
            const script = document.createElement('script');
20
            script.src = "https://js.afterpay.com/afterpay-1.x.js";
21
            script.dataset.min = "1.00";
22
            script.dataset.max = "2000.00";
23
            script.onload = function () {
24
                setInterval(() => {
25
                    if (cachedAmount != document.querySelector(priceSelector).innerText) {
26
                       cachedAmount = document.querySelector(priceSelector).innerText;
27
                       placement.dataset.amount = cachedAmount;
28
                    }
29
                }, 400);
30
            };
31
            document.head.appendChild(script);
32
        }
33
    })();
34
</script>
35
<!-- End Afterpay Blueprint Snippet for BigCommerce v2.0.2 -->