I'm trying to reload a page when a user clicks anywhere on the page body, how can I achieve this?

Question

On my bigcommerce store, I'm trying to show a button for a free product, but that free product should only be allowed to be added once certain skus are in the cart. I have the button working through handlebars. The issue I'm running into is that the page needs to be reloaded after the product is added to the cart in order for the 'showFreePump var to be true and show the button allowing the user to add the free product to their cart.I'm looking for a way to refresh the page once the preview modal is clicked OR if there are any ideas that would better solve this problem- I've been working on this for days and its driving me bonkers.

I've tried several onclick events but im not sure if they were the right syntax- they did not work for me.

    {{#if product.id '===' '5864'}}
                    {{assignVar 'showFreePump' 'false'}}
                        {{#each cart.items}}
                            {{#any (if sku '===' 'S13660055') (if sku '===' 'S13660005')}}
                                {{assignVar 'showFreePump' 'true'}}
                            {{/any}}
                        {{/each}}
                    {{/if}}
                    {{#if (getVar 'showFreePump') '===' 'true'}}
                        <div style="display: flex; padding-bottom: 1rem;">
                            <button class="button button--green freePumpBtn" type="button" style="margin: auto;" onclick="freePump(this)">
                                <i class="fa-solid fa-circle-plus" aria-hidden="true"></i> 
                                Add FREE Drum Pump
                            </button></div>
                    {{else if (getVar 'showFreePump') '===' 'false'}}
                        <div style="display: flex; padding-bottom: 1rem;">
                            <button class="button button--green freePumpBtnhide" type="button" style="margin: auto;">
                                <i class="fa-solid fa-circle-plus" aria-hidden="true"></i> 
                                Add Race Fuel First
                            </button></div>
                    {{/if}}
<script>
function freePump(button) {
        addPump(button);
        $.get('/cart.php?action=add&sku=S-17128')
            .done((data, status) => {
                endLoad(button);
            });
    }

    function addPump(button) {
        button.firstElementChild.classList.add("adding");
        button.firstElementChild.classList.remove("fa-circle-plus");
    }
</script>
<style>
.freePumpBtn {
        font-weight: bold;
        background: #fee238;
        border-color: #094c8e;
        color: #094c8e;
        font-style: italic;
    }

    .freePumpBtn:hover, .freePumpBtn:active, .freePumpBtn:focus {
        font-weight: bold;
        background: #094c8e;
        color: white;
        border: none;
    }

    .freePumpBtnhide, .freePumpBtnhide:hover, .freePumpBtnhide:active, .freePumpBtnhide:focus {
        font-weight: bold;
        background: #aaaaaa;
        border-color: #303030;
        color: #303030;
        font-style: italic;
    }

Answer 1

Maybe you can try to trigger a page reload after adding the product to the cart. So you can modify your freePump function to include a page reload.

Something close to it:

    function freePump(button) {
        addPump(button);
        $.get('/cart.php?action=add&sku=S-17128')
            .done((data, status) => {
                endLoad(button);
   // Reload the page here, is better use a short delay to ensure the cart updates
                setTimeout(function() {
                    window.location.reload();
                }, 1000); // you can adjust the delay as your needs
            });
    }

you can also modify your freePump function to call this new function after adding the product to the cart.

function updateButtnBasedOnCart() {
    $.ajax({
        url: '/api/storefront/cart',
        method: 'GET',
        success: function(carts) {
            var showFreePump = false;
            carts.forEach(cart => {
                cart.lineItems.physicalItems.forEach(item => {
                    if (item.sku === 'S13660055' || item.sku === 'S13660005') {
                        showFreePump = true;
                    }
                });
            });
            // Update UI
            if (showFreePump) {
                $(".freePumpBtnhide").hide();
                $(".freePumpBtn").show();
            } else {
                $(".freePumpBtn").hide();
                $(".freePumpBtnhide").show();
            }
        }
    });
}

function freePump(button) {
    addPump(button);
    $.get('/cart.php?action=add&sku=S-17128')
        .done((data, status) => {
            endLoad(button);
            updateButtonBasedOnCart();
        });
}

Answer 2

Create a button for page refresh to be visible only when the products are added.

document.querySelector(".yourbuttonclassinthecssfile").addEventListener("click",function(){ window.location.reload(); });

or just location.reload();