Shopify Blockshop主题：赠品无法即时加入购物车问题排查

核心问题 #

你的代码存在几个关键问题导致无法实时触发赠品添加：

1. Liquid逻辑仅在页面加载时执行
   当前的cart.total_price和赠品存在判断是服务器端Liquid渲染时执行的，只有用户刷新页面或首次加载时才会检查。用户在页面上添加商品使总价达标后，这段代码不会自动重新执行，因为Liquid不会监听前端购物车的实时变化。

2. 重复调用购物车接口
   先调用/cart/add.js添加赠品，紧接着又调用/cart/update.js更新同一个商品，这完全是冗余操作，不仅没必要，还可能引发不必要的请求冲突。

3. 未监听购物车变化事件
   Blockshop主题的Slidecart有自己的事件系统，你没有监听购物车内容更新的事件，无法在用户操作购物车后自动触发赠品检查逻辑。

4. 冗余代码存在
   代码中定义的getCookie函数完全没有被使用，属于无效代码。

修复后的代码示例 #

将逻辑移到前端JS，监听购物车变化事件，实时检查并添加赠品：

<script type="text/javascript">
// 定义赠品ID
const FREE_GIFT_ID = 44899989815589;
const MIN_TOTAL = 80 * 100; // Shopify价格单位是分，80美元对应8000分

// 检查购物车中是否存在赠品
function hasFreeGift(cart) {
    return cart.items.some(item => item.id === FREE_GIFT_ID);
}

// 添加赠品到购物车
function addFreeGift() {
    const data = {
        quantity: 1,
        id: FREE_GIFT_ID
    };

    jQuery.ajax({
        type: 'POST',
        url: '/cart/add.js',
        data: data,
        dataType: 'json',
        success: function() {
            // 触发Slidecart更新
            if (window.SLIDECART_UPDATE) {
                window.SLIDECART_UPDATE();
            }
        },
        error: function(error) {
            if (error.responseJSON?.description) {
                alert(error.responseJSON.description);
            }
        }
    });
}

// 检查是否满足赠品条件并执行添加
function checkFreeGiftCondition() {
    // 获取当前购物车数据
    jQuery.getJSON('/cart.js', function(cart) {
        if (cart.total_price >= MIN_TOTAL && !hasFreeGift(cart)) {
            addFreeGift();
        }
    });
}

// 页面加载时先检查一次
jQuery(document).ready(function() {
    checkFreeGiftCondition();
});

// 监听Slidecart更新事件，每次购物车变化后重新检查
jQuery(document).on('slidecart:updated', function() {
    checkFreeGiftCondition();
});
</script>

关键优化点 #

• 将赠品判断逻辑移到前端JS，通过/cart.js接口实时获取购物车数据，确保每次购物车变化都能检查条件
• 监听Blockshop主题的slidecart:updated事件，用户添加/删除商品后自动触发检查
• 移除冗余的/cart/update.js调用，添加赠品后直接触发购物车刷新
• 统一处理价格单位（Shopify中价格以分为单位，80美元需转为8000分）
• 清理无效的getCookie函数

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