BigCommerce店铺免费商品按钮显示及页面刷新需求

问题背景 #

在BigCommerce店铺中，需要实现：仅当购物车内存在SKU为S13660055或S13660005的商品时，显示添加免费商品（SKU:S-17128）的按钮。

当前用Handlebars实现的逻辑存在缺陷：商品加入购物车后，必须手动刷新页面，showFreePump变量才会更新为true，按钮才会切换状态。尝试过多个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}}

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

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

解决方案 #

方案一：点击模态框后自动刷新页面 #

监听BigCommerce默认的添加购物车模态框关闭事件，触发页面刷新，让Handlebars变量重新渲染：

document.addEventListener('DOMContentLoaded', function() {
    // 定位默认添加购物车模态框（根据主题调整选择器）
    const addToCartModal = document.querySelector('.modal-add-to-cart');
    if (addToCartModal) {
        // 监听模态框隐藏事件
        addToCartModal.addEventListener('hidden.bs.modal', function() {
            window.location.reload();
        });
    }

    // 如果是自定义模态框，替换为对应选择器和事件
    const customModal = document.querySelector('#custom-add-modal');
    if (customModal) {
        customModal.addEventListener('close', function() {
            window.location.reload();
        });
    }
});

方案二：无需刷新的动态更新（更优） #

通过AJAX实时获取购物车数据，动态切换按钮状态，避免页面刷新带来的体验损耗：

步骤1：修改Handlebars模板，给按钮容器添加ID

{{#if product.id '===' '5864'}}
    {{assignVar 'showFreePump' 'false'}}
    {{#each cart.items}}
        {{#any (if sku '===' 'S13660055') (if sku '===' 'S13660005')}}
            {{assignVar 'showFreePump' 'true'}}
        {{/any}}
    {{/each}}
    {{/if}}
    <!-- 添加容器ID，方便JS定位 -->
    <div id="freePumpContainer" style="display: flex; padding-bottom: 1rem;">
    {{#if (getVar 'showFreePump') '===' 'true'}}
        <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>
    {{else}}
        <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>
    {{/if}}
    </div>

步骤2：添加JS逻辑实现动态更新

// 检查购物车是否包含目标SKU
function checkCartForTargetSKUs() {
    return $.get('/cart.php').then(function(cartHtml) {
        const targetSKUs = ['S13660055', 'S13660005'];
        const cartItemSKUs = $(cartHtml).find('.cart-item-sku').map(function() {
            return $(this).text().trim();
        }).get();
        
        // 判断是否存在目标SKU
        return targetSKUs.some(sku => cartItemSKUs.includes(sku));
    });
}

// 更新按钮状态
function updateFreePumpButton() {
    checkCartForTargetSKUs().then(function(hasTargetSKU) {
        const container = $('#freePumpContainer');
        if (hasTargetSKU) {
            container.html(`
                <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>
            `);
        } else {
            container.html(`
                <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>
            `);
        }
    });
}

// 页面初始化及事件监听
document.addEventListener('DOMContentLoaded', function() {
    // 监听商品加入购物车事件（多数BigCommerce主题支持该自定义事件）
    document.addEventListener('addedToCart', updateFreePumpButton);

    // 同时监听模态框关闭事件，兼容部分主题
    const addToCartModal = document.querySelector('.modal-add-to-cart');
    if (addToCartModal) {
        addToCartModal.addEventListener('hidden.bs.modal', updateFreePumpButton);
    }
});

// 完善原有的freePump函数，添加成功后更新状态
function freePump(button) {
    addPump(button);
    $.get('/cart.php?action=add&sku=S-17128')
        .done((data, status) => {
            endLoad(button);
            updateFreePumpButton();
        });
}

function addPump(button) {
    button.firstElementChild.classList.add("adding");
    button.firstElementChild.classList.remove("fa-circle-plus");
}

// 补充缺失的endLoad函数
function endLoad(button) {
    button.firstElementChild.classList.remove("adding");
    button.firstElementChild.classList.add("fa-circle-plus");
}

方案说明

• 利用addedToCart自定义事件（多数BigCommerce主题内置）实时响应商品添加动作
• 通过AJAX获取购物车页面内容，提取SKU进行判断，无需依赖Handlebars后端渲染
• 动态更新按钮HTML，实现无刷新状态切换

内容的提问来源于stack exchange，提问作者alexispsc