

        <!-- start: plp-interstitial -->
<div id="plp-interstitial-modal" class="plp-interstitial-modal">
    <div class="inner">
        <a class="plp-interstitial-close">
            <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="Pattern-Library" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Atoms_Images" transform="translate(-495.000000, -1736.000000)" fill="#004236">
                        <g id="icons/16/arrownext-copy" transform="translate(503.000000, 1744.000000) rotate(-90.000000) translate(-503.000000, -1744.000000) translate(491.000000, 1732.000000)">
                            <path d="M13.1421356,11.1421356 L22.1421356,11.1421356 L22.1421356,13.1421356 L13.1421356,13.1421356 L13.1421356,22.1421356 L11.1421356,22.1421356 L11.1421356,13.1421356 L2.14213562,13.1421356 L2.14213562,11.1421356 L11.1421356,11.1421356 L11.1421356,2.14213562 L13.1421356,2.14213562 L13.1421356,11.1421356 Z" id="Combined-Shape-Copy" transform="translate(12.142136, 12.142136) rotate(-45.000000) translate(-12.142136, -12.142136) "></path>
                        </g>
                    </g>
                </g>
            </svg>
        </a>

        <!-- start: prod-intro -->
        <div class="prod-intro">
            <h2 class="font-recoleta h2-option1">Tea Tree Clay Mask 75ml</h2>
            <div class="ratings-holder">
                                <div class="ratings">
                    <div class="empty-stars"></div>
                                        <div class="full-stars" style="width:0%"></div>
                </div>
            </div>
            <p>Oily, Blemished Skin | Purifying&nbsp;<a href="https://www.thebodyshop.co.za/face/face-masks/tea-tree-clay-mask-75ml/376860">Full Details</a></p>
        </div>
        <!-- end: prod-intro -->

        <!-- start : interstitial-inner -->
        <div class="interstitial-inner">

            <!-- start : interstitial-left -->
            <div class="interstitial-left">
                                                                                                                    <img loading="lazy" src="/imager/products/714229/Tea_Tree_Clay_Mask_b2d5de23d924f4ef36d9aeb0da8e9d58.jpg" alt="Tea Tree Clay Mask 75ml" width="568" height="798">
                                                                        </div>
            <!-- start : interstitial-left -->

            <!-- start : interstitial-right -->
            <div class="interstitial-right">
                    <!-- start: prod-size -->
    <div class="prod-size">
        <ul>
                        <li>
                <div class="size-options style-radios ">
                    <div class="infos ">
                        <div class="size">75ml </div>
                        
                        <div class="price"><span>R 260.00</span></div>
            

                        <div class="subinfo">(#376860)</div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
    <!-- end: prod-size -->

                <!-- start: prod-addbag -->
                <div class="prod-addbag">
                    <form method="post">
                        <input type="hidden" name="CRAFT_CSRF_TOKEN" value="xyTA4y9blJf6FLDs3B09fl8B4gthvhdJ-jGCOwJ9KGOIDk1lI-b1OPMckZBbLOKirHn5opgsWA4XYNtJN-hmBM96-wNrUG0T4UN-Bk-hwXQ=">
                        <input type="hidden" name="purchasableId" value="703870">
                        <!-- start: prod-qty -->
                                                                                                                            <div class="prod-qty">
                            <button class="disabled ctrBtn down_count" >
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="width: 20px; height: 20px;">
                                    <path d="M563.2 460.8H1024v102.4H0V460.8h563.2z"></path>
                                </svg>
                            </button>
                            <input id="prodcounter" name="qty" class="counter" type="text" min="1" max="4" value="1">
                            <button class="ctrBtn up_count">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="width: 20px; height: 20px;">
                                    <path d="M563.2 460.8H1024v102.4H563.2V1024H460.8V563.2H0V460.8h460.8V0h102.4v460.8z"></path>
                                </svg>
                            </button>
                        </div>
                        <!-- end: prod-qty -->
                        <!-- start: prod-buttons -->
                        <div class="prod-buttons dl-product-add"
                             data-name="Tea Tree Clay Mask 75ml"
                             data-id="376860"
                             data-price="260.00"
                             data-category="Face &gt; Face Masks">
                            <input type="button" id="add-bag" class="c-btn btn-primary" value="Add to bag" onclick="return trackAddProduct(this);">
                                                            <a  href="/account/login"  class="modalopen wishlist">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" style="width: 26px; height: 26px;"><path class="inside" d="M494.208 910.88a5.076 5.076 0 01-2.368-.576c-111.264-57.696-212.672-131.616-301.376-219.616-48.736-48.448-83.296-91.36-108.8-135.04-33.536-57.344-50.496-112.832-50.496-164.96 0-70.208 23.2-135.424 65.28-183.552 45.056-51.616 109.312-83.168 176.32-86.592 4.192-.224 8.32-.32 12.48-.32 41.888 0 83.2 10.848 119.456 31.392 25.248 14.24 48.224 34.816 68.288 61.088l21.248 27.744 21.248-27.744c20.064-26.272 42.976-46.784 68.192-61.024 36.32-20.576 77.792-31.424 119.808-31.424 4.064 0 8.096.128 12.192.32 67.008 3.424 131.264 35.008 176.256 86.592 42.112 48.224 65.312 113.408 65.312 183.552 0 52.192-16.96 107.712-50.432 164.992-25.6 43.712-60.192 86.624-108.896 135.04-88.736 88.032-190.112 161.92-301.28 219.584l-2.4.576z"></path><path class="inside" d="M285.248 93.472c-4.64 0-9.216.128-13.856.352-74.208 3.84-145.728 39.232-195.008 95.712C29.408 243.2 4.448 315.136 4.448 390.688c0 58.816 19.424 118.976 54.144 178.432 27.904 47.776 64.32 92.032 113.056 140.48 90.432 89.696 194.56 165.632 307.904 224.384 4.576 2.4 9.632 3.552 14.656 3.552 5.12 0 10.144-1.152 14.688-3.552 113.312-58.784 217.44-134.688 307.872-224.352 48.704-48.448 85.184-92.736 113.088-140.48 34.72-59.424 54.08-119.584 54.08-178.496 0-75.584-24.896-147.36-71.904-201.152-49.28-56.544-120.832-91.936-195.008-95.712a272.972 272.972 0 00-13.536-.352c-46.432 0-92.704 12.064-132.992 34.912-28.928 16.352-54.4 39.456-76.32 68.064-21.92-28.672-47.328-51.744-76.32-68.128C377.6 105.504 331.52 93.44 285.216 93.44zm0 53.44c37.312 0 74.048 9.664 106.368 27.968 21.984 12.416 42.24 30.624 60.16 54.048l42.432 55.52 42.432-55.52c17.888-23.36 38.144-41.568 60.224-54.048 32.32-18.304 69.152-27.904 106.624-27.904 3.616 0 7.2.096 10.816.256 59.808 3.04 117.216 31.264 157.504 77.472 37.856 43.328 58.688 102.272 58.688 166.016 0 47.328-15.712 98.304-46.848 151.52-24.256 41.632-57.568 82.752-104.544 129.504-84.16 83.488-179.904 153.952-284.928 209.664-104.992-55.712-200.736-126.208-284.864-209.6-47.072-46.784-80.32-87.968-104.64-129.568C73.6 488.96 57.888 438.016 57.888 390.72c0-63.808 20.8-122.752 58.784-166.08 40.192-46.112 97.632-74.4 157.568-77.408 3.648-.224 7.36-.32 11.008-.32z"></path><path class="lines" d="M293.568 69.824c-4.832 0-9.632.128-14.464.384-77.6 4-152.352 40.992-203.872 100.064C26.112 226.368 0 301.568 0 380.576c0 61.472 20.288 124.384 56.608 186.496 29.184 49.952 67.264 96.256 118.176 146.912 94.528 93.728 203.392 173.088 321.92 234.592a33.53 33.53 0 0015.328 3.712c5.344 0 10.624-1.248 15.36-3.776 118.464-61.408 227.328-140.768 321.856-234.528 50.912-50.656 89.056-96.96 118.24-146.848 36.32-62.144 56.544-124.96 56.544-186.56 0-79.072-26.016-154.08-75.168-210.304-51.52-59.104-126.336-96.128-203.872-100.064-4.704-.224-9.44-.384-14.144-.384-48.544 0-96.896 12.608-139.04 36.48-30.24 17.088-56.864 41.248-79.776 71.168-22.912-29.984-49.472-54.08-79.776-71.2-42.08-23.84-90.304-36.448-138.656-36.448zm0 55.84c39.008 0 77.408 10.112 111.2 29.216 23.008 12.992 44.16 32.032 62.88 56.512L512 269.44l44.352-58.048c18.72-24.48 39.904-43.488 62.976-56.512 33.792-19.136 72.288-29.216 111.488-29.216 3.776 0 7.552.128 11.296.32 62.496 3.168 122.56 32.672 164.672 80.992 39.552 45.28 61.344 106.912 61.344 173.568 0 49.472-16.416 102.784-48.96 158.4-25.376 43.488-60.192 86.528-109.28 135.392C721.92 761.6 621.792 835.296 512 893.504 402.24 835.264 302.112 761.6 214.208 674.368 165.024 625.44 130.24 582.4 104.832 538.912c-32.48-55.712-48.928-109.024-48.928-158.4 0-66.688 21.728-128.32 61.44-173.6 42.016-48.224 102.08-77.792 164.736-80.928 3.808-.224 7.648-.32 11.488-.32z"></path></svg>                                </a>
                                                    </div>
                        <!-- end: prod-buttons -->

                    </form>
                </div>
                <!-- start: error container -->
                <div class="info-bar color-red hidden">
                    <div class="text"></div>
                </div>
                <!-- end: error container -->
                <!-- end: prod-addbag -->
            </div>
            <!-- start : interstitial-right -->
        </div>
        <!-- end : interstitial-inner -->
    </div>
</div>
<!-- end: plp-interstitial -->
<script>
    $(document).ready(function () {

        $(".plp-interstitial-close").click(function() {
            $("#plp-interstitial-modal").modal('dispose');
        });

        $('.prod-size').change(function () {
            $("input[name='purchasableId']").val($("input[name='prodSize']:checked").val());
        });

        //  plus mius counter for product qty
        $('.prod-qty button.ctrBtn').click(function(e) {
            e.preventDefault();
            let button_classes, value = +$('.counter').val();
            button_classes = $(e.currentTarget).prop('class');
            const minValue = $('#prodcounter').prop('min');
            const maxValue = $('#prodcounter').prop('max');

            if (button_classes.indexOf('up_count') !== -1) {
                value = (value) + 1;
            } else {
                value = (value) - 1;
            }

            if (value >= maxValue) {
                $('.up_count').addClass('disabled');
                $('.down_count').removeClass('disabled');
                $('.counter').val(maxValue);
            } else {
                $('.up_count').removeClass('disabled');
                $('.down_count').removeClass('disabled');
                $('.counter').val(value);
            }

            if (value <= minValue) {
                $('.down_count').addClass('disabled');
                $('.counter').val(minValue);
            } else {
                $('.down_count').removeClass('disabled');
            }

        });

        $('.counter').click(function() {
            $(this).focus().select();
        });


        $("#plp-interstitial-modal #add-bag").click(function (e) {
            const btn = $(this);
            const form = btn.closest("form");
            const csrfToken = form.find("input[name='CRAFT_CSRF_TOKEN']").val();

            btn.prop('disabled', true);
            clearErrorMessage();
            showLoadOverlay();

            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/actions/commerce/cart/update-cart",
                data: form.serializeArray(),
                success: function (data) {
                    if (data.success === false) {
                        hideLoadOverlay();
                        btn.prop('disabled', false);
                        const msg = extractCraftError(data);
                        setErrorMessage(msg);
                    } else {
                        updateHybrisAfterAdd(btn, csrfToken);
                    }
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    hideLoadOverlay();
                    btn.prop('disabled', false);
                    const msg = extractError(xhr);
                    setErrorMessage(msg);
                }
            });
        });

        function updateHybrisAfterAdd(btn, csrfToken) {
            let data = [];
            data.push({"name": "CRAFT_CSRF_TOKEN", value: csrfToken});
            data.push({"name": "action", value: "addLineItem"});

            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/actions/clicks-module/shop/update",
                data: data,
                success: function (data) {
                    window.location = "/shop/cart";
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    const msg = extractError(xhr);
                    setErrorMessage(msg);
                }, complete() {
                    btn.prop('disabled', false);
                    hideLoadOverlay();
                }
            });
        }

        function setErrorMessage(msg){
            $('.modal .info-bar .text').html(msg);
            $('.modal .info-bar').removeClass('hidden');
        }

        function clearErrorMessage(){
            $('.modal .info-bar .text').html();
            $('.modal .info-bar').addClass('hidden');
        }

        function extractCraftError(data) {
            if (data.hasOwnProperty("errors")) {
                const keys = Object.keys(data.errors);
                const msg = data.errors[keys[0]][0]

                return data.error + " " + msg;
            }

            if (data.hasOwnProperty("error")) {
                return data.error;
            }
        }

        function extractError(xhr) {
            if (xhr.hasOwnProperty("responseJSON") && xhr.responseJSON.hasOwnProperty("errors")) {
                return xhr.responseJSON.errors[0].message;
            }

            if (xhr.hasOwnProperty("responseJSON") && xhr.responseJSON.hasOwnProperty("error")) {
                return xhr.responseJSON.error;
            }

            if (xhr.status === 401 || xhr.status === 403) {
                return "User is not authorized to access the url";
            } else if (xhr.status === 404) {
                return "Endpoint not found. See console for more info";
            } else if (xhr.status === 503) {
                return "The service is currently unavailable";
            } else {
                return "An unknown error occurred. Please try again";
            }
        }

        function hideLoadOverlay() {
            $('.loading-overlay').addClass('hidden');
        }

        function showLoadOverlay() {
            $('.loading-overlay').removeClass('hidden');
        }

    });
</script>