Question

我已经建立了一个基本商店，列出了一些产品。对于每种产品，都有一个购物车图标，单击该图标可将产品添加到卡中，而无需离开产品页面。标题中的购物卡图标会用用户购物车中有多少产品的计数进行更新。但是，当用户单击购物车图标时，在购物车中显示产品的模式不会更新。必须先刷新页面，然后才能对其进行更新。

如何设置它，以便当用户添加产品然后单击以查看其购物车时，该购物车已经使用新产品进行了更新。

ajaxify-cart.liquid

<script>

Shopify.AjaxifyCart = (function($) {
  
  // Some configuration options.
  // I have separated what you will never need to change from what
  // you might change.
  
  var _config = {
    howLongTillBtnReturnsToNormal: 20, // in milliseconds.
    cartCountSelector:             '.count',
    
    // What you will never need to change
    addToCartBtnSelector:          '[type="submit"]',
    addToCartFormSelector:         'form[action="/cart/add"]',
    shopifyAjaxAddURL:             '/cart/add.js',
    shopifyAjaxCartURL:            '/cart.js'
  };

  var _init = function() {   
    $(document).ready(function() { 
      $(_config.addToCartFormSelector).submit(function(e) {
        e.preventDefault();
        var $addToCartForm = $(this);
        var $addToCartBtn = $addToCartForm.find(_config.addToCartBtnSelector);
        $addToCartBtn.addClass('disabled').prop('disabled', true);
        // Add to cart.
        $.ajax({
          url: _config.shopifyAjaxAddURL,
          dataType: 'json',
          type: 'post',
          data: $addToCartForm.serialize(),
          success: function(itemData) {
            // Re-enable add to cart button.
            $addToCartBtn.addClass('inverted');
            window.setTimeout(function(){
              $addToCartBtn.prop('disabled', false).removeClass('disabled').removeClass('inverted');
            }, _config.howLongTillBtnReturnsToNormal);
            // Update cart count.
            $.getJSON(_config.shopifyAjaxCartURL, function(cart) {
              if (_config.cartCountSelector && $(_config.cartCountSelector).size()) {
                var value = $(_config.cartCountSelector).html() || '0';
                $(_config.cartCountSelector).html(value.replace(/[0-9]+/,cart.item_count)).removeClass('hidden');
              }
            });
            //Update Cart Modal
            
          },
          error: function(XMLHttpRequest) {
            var response = eval('(' + XMLHttpRequest.responseText + ')');
            response = response.description;
            if (response.slice(0,4) === 'All ') {
              _showFeedback('error', response.replace('All 1 ', 'All '), $addToCartForm);
              $addToCartBtn.prop('disabled', false);;
              $addToCartBtn.prop('disabled',true);
            }
            else {
              _showFeedback('error', '<i class="fa fa-warning"></i> ' + response, $addToCartForm);
              $addToCartBtn.prop('disabled', false).removeClass('disabled');
            }
          }
        });
        return false;    
      });
    });
  };
  return {
    init: function(params) {
        // Configuration
        params = params || {};
        // Merging with defaults.
        $.extend(_config, params);
        // Action
        $(function() {
          _init();
        });
    },    
    getConfig: function() {
      return _config;
    }
  }
  
})(jQuery);

Shopify.AjaxifyCart.init( { cartCountSelector: '.count'} );

</script>

例如，在下面的屏幕截图中，您可以看到我的购物车中有东西，但是购物车模式本身尚未更新以显示购物车中的物品：

我一直在按照以下步骤操作，以便在产品卡上使用添加到卡按钮。 https://community.shopify.com/c/Shopify-Design/Product-pages-Stay-on-the-product-page-after-adding-products-to/m-p/616440

添加产品时，AJAX更新购物车模式

0 个答案: