更新后重新加载ajax购物车

时间:2018-11-22 11:22:21

标签: javascript ajax

我正在为购物场所建造一个购物车抽屉。通过ajax购物车api填充抽屉。对于抽屉中的产品数量,我还具有一些加/减功能。 这是购物车抽屉的代码:

function updateCartDesc(data){
  var _config = {
  shopifyAjaxCartURL:            '/cart.js'
};
  $('#item_count').text(data.item_count);
  renderHoverCart(data);
$('.drawer-overlay').css('display','block');
  $.getJSON(_config.shopifyAjaxCartURL, function(cart) {
    $.each(cart.items, function(index, cartItem) {
      var line= index +1;
var cents = "";

if (cartItem.price % 100 < 10) {
cents = "0";
}
var price = parseInt(cartItem.price/100) + "." + cents + cartItem.price % 100;
        $('.ajax-cart-form').append("<div class='cart-item desktop-full mobile-full'><div class='cart-image desktop-5'><a href='"+ cartItem.url +"'title='"+cartItem.title+"'><img src='"+ cartItem.image +"'></a></div><div class='cart-title desktop-7'><p>"+ cartItem.title +"</p><div class='cart-item-actions'><span class='drawer-price'><strong>£ "+ price +" GBP</strong></span></div><div class='cart-quantity'><input type='button' value='-' class='qtyminus qtyminus-2 CartCount qty-btn' field='updates_"+ cartItem.id +"'/><input name='updates[]' id='updates_"+ cartItem.id +"' class='quantity CartCount' value='"+ cartItem.quantity +"' /><input type='button' value='+' class='qtyplus qtyplus-2 CartCount qty-btn' field='updates_"+ cartItem.id +"' /></div></div>");
  });


  $(function(index, cartItem) {
        var line2= index +1;
        var cents2 = "";

if (cart.original_total_price % 100 < 10) {
cents2 = "0";
}
var price2 = parseInt(cart.original_total_price/100) + "." + cents2 + cart.original_total_price % 100;
  $('.ajax-subtotal').append("<div class='drawer-subtotal'><h3>Subtotal <span class='money'>£"+ price2 +" GBP</span></h3></div>");
  });
});
}

购物车数量函数如下:

$('.ajax-cart-form').on("click",'.qtyplus.qtyplus-2', function(){
    // Get the field name
    fieldName = $(this).attr('field');
    // Get its current value
    var currentVal = parseInt($('input[id='+fieldName+']').val());
    // If is not undefined
    if (!isNaN(currentVal)) {
        // Increment
        $('input[id='+fieldName+']').val(currentVal + 1);
    } else {
        // Otherwise put a 0 there
        $('input[id='+fieldName+']').val(0);
    }
    var currentVal2 = parseInt($('input[id='+fieldName+']').val());
    $.ajax({
  type: 'POST',
  url: '/cart/update.js',
  data: { updates: { 35450129542: currentVal2 }},
  dataType: 'json',
  success: function() {
      shopifyAjaxCartURL.load();
  }
   });
});

因此,这确实会更新产品的数量,但是需要首先刷新页面才能显示更新。 如您所见,我已经尝试添加

 success: function() {
          shopifyAjaxCartURL.load();
      }

我也尝试过

 success: function() {
          shopifyAjaxCartURL.reload();
      }

但是仍然需要刷新页面才能查看更新的购物车。任何想法如何做到这一点?

0 个答案:

没有答案