Question

how "Add To Cart" looks on a Category page

＆＃34; templates \ components \ products \ card.html＆＃34;中的以下代码点击“添加到购物车”后，将顾客带到购物车。类别页面上所选产品上的按钮。

{{#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}}

＆＃34; {{add_to_cart_url}}＆＃34; == 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

我需要从类别页面添加产品到购物车（模板\部件\产品\ card.html）
防止页面重定向。
更新购物车内容。所有这些都是addProductToCart（事件，表单）功能。怎么用？

只是阻止页面重定向不够，它给出了问题更新购物车内容和数量。

在card.html（类别页面）和product-view.html（产品页面）上向购物车添加产品的区别在于选项和数量。在card.html上添加链接{{add_to_cart_url}}。在product-view.html上，它通过表单提交和钩子来实现 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应用程序市场并购买此应用程序fly添加到购物车。 https://www.themevale.com/bigcommerce-add-ons-ajax-add-to-cart-with-fly-effect-stencil-ready-now-available/

谢谢

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

1 个答案: