node.js - 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 中的钩子(Hook)示例之一: 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上，它是通过表单提交和 Hook 发生的 addProductToCart(事件，表单)。

Answer 1

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

替代方案1:如果您检查文件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/

谢谢