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
我需要将产品从“类别”页面添加到购物车
（模板\组件\产品\卡.html）
防止页面重定向。
更新购物车内容。
所有这些都可以实现addProductToCart（event，form）函数。如何使用它？
只是防止页面重定向不够，它给
更新购物车的内容和数量。
在选项和数量上，将产品添加到card.html（类别页面）和product-view.html（产品页面）上的购物车之间的区别。
在card.html上，添加是通过链接{{add_to_cart_url}}进行的。
在product-view.html上，它是通过表单提交并从
addProductToCart（事件，表单）。
最佳答案
因此，查看主题（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/
谢谢