Shopify Prestige主题：阻止点击快速加购按钮触发侧边栏购物车

我是Shopify新手开发者，使用Prestige主题搭建网站时碰到问题：产品图片上的「快速加入购物车」按钮被点击后，侧边栏购物车会自动弹出。我已定位到触发该侧边栏购物车的函数为custom.js文件中的onQuickBuyButtonClicked，但修改代码后仍未成功实现阻止触发的需求，原代码如下：

// add product with size swatches js
function onQuickBuyButtonClicked(id, pro_id) {
    const CartCount = document.getElementsByClassName('Header__CartCount')[0];

    $(".loader_" + id).addClass("add-success--adding");
    const product = {
        id: id,
        quantity: 1
    };

    $.ajax({
        type: 'POST',
        url: '/cart/add.js',
        data: JSON.stringify(product),
        dataType: 'json',
        headers: {
            'Content-Type': 'application/json'
        },
        success: function(cart) {
            setTimeout(function() {
               $(".loader_" + id).removeClass("add-success--adding");
                $(".loader_" + id).addClass("add-success--added");
              cartRecommended(pro_id);
            }, 500);

            setTimeout(function() {
                document.dispatchEvent(new CustomEvent('product:added', {
                    bubbles: true,
                    detail: {
                        variant: cart,
                        quantity: 1
                    }
                }));
            }, 1200);

            setTimeout(function() {
                $(".loader_" + id).removeClass("add-success--adding").removeClass("add-success--added");
              
            }, 1600);
          setTimeout(function() {
          $('#backdrop').addClass('backdrop_active');
          }, 2000);
        },
        error: function(errorThrown) {
            $(".loader_" + id).removeClass("add-success--adding");

            var r = jQuery.parseJSON(errorThrown.responseText);
            $(".error_" + pro_id).html("Error: " + r.description).show();
            setTimeout(function() {
                $(".error_" + pro_id).html("").hide(100);
            }, 3000);
        }
    });
return false;
}

问题分析与解决方案 #

你的代码里有两处直接触发侧边栏购物车的逻辑，直接修改这两处就能解决问题：

修改后的代码：

// add product with size swatches js
function onQuickBuyButtonClicked(id, pro_id) {
    const CartCount = document.getElementsByClassName('Header__CartCount')[0];

    $(".loader_" + id).addClass("add-success--adding");
    const product = {
        id: id,
        quantity: 1
    };

    $.ajax({
        type: 'POST',
        url: '/cart/add.js',
        data: JSON.stringify(product),
        dataType: 'json',
        headers: {
            'Content-Type': 'application/json'
        },
        success: function(cart) {
            setTimeout(function() {
               $(".loader_" + id).removeClass("add-success--adding");
                $(".loader_" + id).addClass("add-success--added");
              cartRecommended(pro_id);
            }, 500);

            // 注释：移除主题默认的侧边栏触发事件
            // setTimeout(function() {
            //     document.dispatchEvent(new CustomEvent('product:added', {
            //         bubbles: true,
            //         detail: {
            //             variant: cart,
            //             quantity: 1
            //         }
            //     }));
            // }, 1200);

            setTimeout(function() {
                $(".loader_" + id).removeClass("add-success--adding").removeClass("add-success--added");
              
            }, 1600);
          // 注释：移除遮罩激活逻辑，阻止侧边栏弹出
          // setTimeout(function() {
          // $('#backdrop').addClass('backdrop_active');
          // }, 2000);
        },
        error: function(errorThrown) {
            $(".loader_" + id).removeClass("add-success--adding");

            var r = jQuery.parseJSON(errorThrown.responseText);
            $(".error_" + pro_id).html("Error: " + r.description).show();
            setTimeout(function() {
                $(".error_" + pro_id).html("").hide(100);
            }, 3000);
        }
    });
return false;
}

关键修改说明：

• 注释/删除product:added自定义事件触发代码：Prestige主题默认监听这个事件来打开侧边栏购物车，移除后就不会触发弹出逻辑
• 注释/删除#backdrop的遮罩激活代码：这个遮罩是侧边栏弹出的配套显示元素，去掉后也能阻止侧边栏触发

修改完成后，记得清除Shopify缓存并刷新页面测试效果。

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