Bigcommerce - 禁用添加到购物车重定向

Question

how "Add To Cart" looks on a Category page

“templates\components\products\card.html”中的以下代码在客户点击类别页面上所选产品的“添加到购物车”按钮后将其引导至购物车。

{{#if add_to_cart_url }}
  <a href="{{add_to_cart_url}}"
    class="button button--small 
    card-figcaption-button">
       {{lang 'products.add_to_cart'}}</a>
    {{/if}}

"{{add_to_cart_url}}" == http://mystore.com/cart.php?action=add&product_id=15865.

如何不将客户重定向到他的购物车？ 如何将商品添加到购物车并保持在同一页面上？

例如在产品页面，客户添加产品后，客户停留在同一页面，脚本打开模态确认窗口。

        <!-- from templates\components\products\product-view.html -->

        <form class="form" method="post" action="{{product.cart_url}}" enctype="multipart/form-data"
        data-cart-item-add>
        <input type="hidden" name="action" value="add">
        <input type="hidden" name="product_id" value="{{product.id}}"/>
    <div class="form-action">

      <input id="form-action-addToCart" 
data-wait-message=
"{{lang 'products.adding_to_cart'}}" 
class="button button--primary" type="submit"
 value="{{#if product.pre_order}}
{{lang 'products.pre_order'}}
{{else}}
{{lang 'products.add_to_cart'}}
{{/if}}">
</div>

此产品页面代码基于此脚本工作：assets\js\bundle.js

 Product.prototype.addProductToCart = function addProductToCart(event, form) {
            var _this4 = this;

            var $addToCartBtn = (0, _jquery2.default)('#form-action-addToCart', (0, _jquery2.default)(event.target));
            var originalBtnVal = $addToCartBtn.val();
            var waitMessage = $addToCartBtn.data('waitMessage');

            // Do not do AJAX if browser doesn't support FormData
            if (window.FormData === undefined) {
                return;
            }

            // Prevent default
            event.preventDefault();

            $addToCartBtn.val(waitMessage).prop('disabled', true);

            // Add item to cart
            _stencilUtils2.default.api.cart.itemAdd(new FormData(form), function (err, response) {
                var errorMessage = err || response.data.error;

                $addToCartBtn.val(originalBtnVal).prop('disabled', false);

                // Guard statement
                if (errorMessage) {
                    // Strip the HTML from the error message
                    var tmp = document.createElement('DIV');
                    tmp.innerHTML = errorMessage;

                    alert(tmp.textContent || tmp.innerText);

                    return;
                }

                // Open preview modal and update content
                previewModal.open();

                _this4.updateCartContent(previewModal, response.data.cart_item.hash);
            });
        };

更新： 这是类似的： Adding item to cart with BigCommerce Stencil

他能够使用 utils.api.cart.itemAdd() 我无法使它可行。

Stencil 中的钩子示例之一： https://stencil.bigcommerce.com/docs/hook-example-2-cart-dialog

1. 我需要从分类页面将产品添加到购物车 (模板\组件\产品\card.html)
2. 防止页面重定向。
3. 更新购物车内容。 所有这些确实 addProductToCart(event, form) 功能。如何使用？

只是防止页面重定向不够，它会产生问题 更新购物车内容和数量。

在card.html（类别页面）和product-view.html（产品页面）上添加产品到购物车的区别也在于选项和数量。 在 card.html 上通过链接 {{add_to_cart_url}} 添加。 在 product-view.html 上，它通过表单提交和钩子发生 addProductToCart(事件，表单)。

Answer 1

所以看看主题（Cornerstone Light），我可以看出这不是任何类型的错误，它只是在主题文件中设置这个主题的方式。我在测试商店的默认主题版本上对此进行了测试，如果您在主页、品牌或类别页面上点击添加到购物车级别，它也会自动重定向到购物车。我检查了内置主题编辑器，发现没有办法将其关闭，唯一允许这样做的方法是让开发人员编辑您的主题文件，以便购物车弹出页面出现在主页中、类别和品牌页面，而不仅仅是他们设置的产品页面。

方案一：如果查看文件card.html的代码，有两个按钮，一个是快速查看，一个是添加到购物车，所以我们可以使添加到购物车的行为相同喜欢快速查看，因此当用户单击添加到购物车时，弹出窗口会出现，然后他可以单击添加到购物车按钮，然后也可以继续购物按钮。借助此功能，用户将不会重定向到结帐页面。要实现这一点，只需更改 card.html 上的代码，如下所示：

{{#if add_to_cart_url }}
<a href="{{add_to_cart_url}}" class="button button--small card-figcaption-button">{{lang 'products.add_to_cart'}}</a>
{{/if}}

用这个替换上面的代码：

{{#unless hide_product_quick_view}}
     {{#if theme_settings.show_product_quick_view}}
        <a href="#" class="button button--small card-figcaption-button quickview" data-product-id="{{id}}">{{lang 'products.add_to_cart'}}</a>
    {{/if}}
 {{/unless}}

这样的快速查看结果如下：https://prnt.sc/hbl06f

备选方案 2： 获得 bigcommerce 应用市场并购买此应用并添加到购物车。 https://www.themevale.com/bigcommerce-add-ons-ajax-add-to-cart-with-fly-effect-stencil-ready-now-available/

谢谢