当用户单击页面主体上的任意位置时，我尝试重新加载页面，如何实现此目的？

Question

在我的大型商务商店中，我试图显示一个免费产品的按钮，但只有在某些 sku 进入购物车后才允许添加该免费产品。我的按钮通过车把工作。我遇到的问题是，在将产品添加到购物车后需要重新加载页面，以便 'showFreePump var 为 true 并显示允许用户将免费产品添加到购物车的按钮。I正在寻找一种在单击预览模式后刷新页面的方法，或者是否有任何想法可以更好地解决这个问题 - 我已经为此工作了好几天，它让我发疯。

我已经尝试了几个 onclick 事件，但我不确定它们是否是正确的语法 - 它们对我不起作用。

    {{#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

也许您可以尝试在将产品添加到购物车后触发页面重新加载。因此，您可以修改 freePump 函数以包含页面重新加载。

接近它的东西：

    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
            });
    }

您还可以修改 freePump 函数以在将产品添加到购物车后调用此新函数。

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

创建页面刷新按钮，仅在添加产品时可见。

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

或者只是 location.reload();