javascript - 使用ajax在产品div的购物车中显示产品数量

Question

我正在为我的 Shopify 商店使用默认的 Supply 主题，并且我已经启用了 Ajaxify 购物车选项。

我已经自定义了主题，这样如果客户将产品 X 添加到购物车，重新加载并将鼠标悬停在产品上(在收藏页面上)，它会显示产品 X 被添加到购物车 1 次。

这是显示购物车中产品 X 数量的液体代码:

<!-- Snippet from product-grid-item.liquid -->

{% assign count = 0 %}
{% for item in cart.items %}
  {% if product.id == item.product.id %}
    {% assign count = count | plus: item.quantity %}
  {% endif  %}
{% endfor %}

...

<span class="item-quantity">{{ count }}</span>

如果产品在购物车 .triangle-top-right 中，则添加到 div#in-cart-indicator，如果不在购物车中，则类是不在购物车中。

这是一个 GIF，展示了它当前的样子:

![在此处输入图片描述][1]

现状:

1. 将产品 X 添加到购物车会发生什么:
   • 购物车数量得到更新
2. 重新加载页面会发生什么:
   • 包含产品 X 的 div 在右上角有一个蓝色三 Angular 形，表示产品 X 在购物车中
   • 将鼠标悬停在产品 X 上时，它会显示产品 X 在购物车中的次数。

我想要什么:

1. 将产品 X 添加到购物车会发生什么:
   • 购物车数量得到更新
   • 包含产品 X 的 div 在右上角有一个蓝色三 Angular 形，表示产品 X 在购物车中
   • 将鼠标悬停在产品 X 上时，它会显示产品 X 在购物车中的次数。

我试过弄乱 ajaxify.js 中的代码，但我缺少 javascript 似乎破坏了一切。

我可以尝试什么来完成这个？

Answer 1

这是当有人将鼠标悬停在商店中的购物车图标上时我使用的代码。悬停时它获取 cart.js 并使用返回的数据来填充包含购物车信息的 。我选择不显示购物车悬停中的所有单个项目，因为如果有很多，它会变得困惑，但你当然可以。

$("#main-cart-link").hover(function(){
jQuery.getJSON('/cart.js', function (cart, textStatus) {
  if(cart.item_count>0){
    var cartshipnote="";
//if the cart total is close to free shipping add a note
    if(cart.total_price>5000){
      var leftover="$"+((7500-cart.total_price)/100).toFixed( 2 );
      cartshipnote="<div style='padding:4px 0; font-style:italic; text-align:right'>Only "+leftover+" away from free shipping!</div>";
    }
//if the cart total is over free shipping requirement add a note
   if(cart.total_price>7500){
     cartshipnote="<div style='padding:4px 0; font-weight:bold; text-align:right'>You've qualified for free shipping!!</div>";
    }
//show cart total price in US dollars with 2 decimals
  var carttotal="$"+(cart.total_price/100).toFixed( 2 );
//add html to the cart hover div
    jQuery("#ccbody").html("<div id='ccount'>Items in cart: "+cart.item_count+"</div><div id='carttotal'>Total: "+carttotal+"</div>"+cartshipnote); 
  }
});
},function(){
//on hover-out empty the cart div
  jQuery("#ccbody").empty();
});