单击添加到购物车后防止重定向到购物车页面 - 3rd Party Shopify 主题答案

【问题标题】：Prevent Redirect To Cart Page After Clicking Add To Cart - 3rd Party Shopify Theme单击添加到购物车后防止重定向到购物车页面 - 3rd Party Shopify 主题
【发布时间】：2021-06-01 16:28:20
【问题描述】：

点击添加到购物车按钮时，它会将您直接带到购物车，这不会给购物者货比三家的机会。

如何更改它以使页面保持不变，以便客户可以继续购物？

我在 Web 开发方面没有太多经验，但如果有帮助，我附上了 product-template.liquid。

谢谢大家！

  {% endif %}
    {% if settings.upsell_popup_enable and upsell_enable %}
      $('.AddToCart').click(function(){
        var flag_addcart = true;
        $('.product_properties').each(function(){
          var val = $(this).find('input').val();
          var val_charlimit = $(this).find('input').data('charlimit');
          if(val == "") {
            flag_addcart = false;
            $(this).find('input').addClass("ui-state-error");
          } else {
            $(this).find('input').removeClass("ui-state-error");
            $(this).find('.error-limit').hide();
            if(val_charlimit != undefined) {
              if(val.length > val_charlimit){
                flag_addcart = false;
                $(this).find('input').addClass("ui-state-error");
                $(this).find('.error-limit').html("Oops, we won't have space to print all that, try something shorter.").show();
              }
            }
          }
        });
        if(flag_addcart) {
          if($(window).width() > 540){
            var width = "500px";
          } else {
            var width = "90%";  
          }
          $('#upsell-popup').find('.modal-content').css('width', width);
          $('#upsell-popup').addClass("in");
        }
        return false;
      });
      $('#upsell-popup .close-upsell').click(function(e){
        e.preventDefault();
        $('#upsell-popup').removeClass("in");
      });
      $('#upsell-popup .upsell-yes-btn').click(function(e){
        e.preventDefault();
        $('#upsell-popup').removeClass("in");
        $("#Quantity").val({{ settings.quantity_upsell }});
        var product_free_id = "";
        {% for variant in all_products[settings.free_product].variants %}
          {% if variant == all_products[settings.free_product].selected_or_first_available_variant %}
            product_free_id = {{variant.id}};
          {% endif %}
        {% endfor %}
        if(product_free_id !== "") {
          var data = 'id='+ product_free_id + '&quantity=1';
          $.ajax({
            type: 'POST',
            url: '/cart/add.js',
            dataType: 'json',
            data: data,
            success: function(res){
              setTimeout(function(){
                $("#AddToCartForm--{{ product.id }}").submit();
              }, 1000);
            }
          });
        } else {
          $("#AddToCartForm--{{ product.id }}").submit();
        }
        
      });
      $('#upsell-popup .upsell-no-btn').click(function(e){
        e.preventDefault();
        $('#upsell-popup').removeClass("in");
        $("#AddToCartForm--{{ product.id }}").submit();
      });
    {% endif %}
    {% for collection in product.collections limit: 1 %}
      timber.recordLastCollection({
        collection: "{{ collection.handle }}"
      });
    {% endfor %}
  });
</script>
{% if settings.show_related_products %}
<hr class="releted--products-hr" />

【问题讨论】：

许多主题都有一个主题设置，您可以切换它来控制添加到购物车的行为，通常在“产品”或“购物车”相关标题下。您是否确认您的主题没有任何可以通过这种方式打开的内置功能？
如果没有，停留在页面样式的添加到购物车由运行在您网站上的 Javascript 管理。如果您不习惯为您的商店编写自己的 javascript 功能，我建议您尝试其他一些主题，以找到具有您正在寻找的页面停留功能的主题。（此时，大多数主题 - 甚至是免费主题 - 都具有此功能）。您可以在主题商店中看到免费主题，点击后可以看到一个演示，您可以在其中测试您想要的功能：themes.shopify.com/…

标签： html shopify

【解决方案1】：

是的，请谨慎行事，并始终复制您当前的主题。此外，您需要通过在功能块中添加 event.preventDefault() 来防止链接将您重定向到购物车页面。请参阅此以获得更好的解释：https://www.w3schools.com/jsref/event_preventdefault.asp

//Before 
$('.AddToCart').click(function(){
 ...
 }
// After
$('.AddToCart').click(function(e){
 e.preventDefault();
 ...
}

确保在所有其他代码之前添加 e.preventDefault()。

【讨论】：