Question

我正在使用Shopify商店的默认Supply主题，并启用了Ajaxify Cart选项。

我已经定制了主题，以便如果客户将产品X添加到购物车，重新加载并悬停在产品上（在收藏页面上），则表明产品X已添加一次到购物车。

这是显示购物车中产品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，如果该商品不在购物车中，则该类为not-in-cart。

这是一个GIF，说明目前的情况：

！[在此处输入图片说明] [1]

现状：

将商品X添加到购物车怎么了：
- 购物车数量已更新
重新加载页面怎么了：
- 包含产品X的div在右上角得到一个蓝色三角形，表示产品X在购物车中
- 将鼠标悬停在产品X上时，会显示产品X在购物车中的次数。

我想要的是什么：

将商品X添加到购物车怎么了：
- 购物车数量已更新
- 包含产品X的div在右上角得到一个蓝色三角形，表示产品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();
});

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

1 个答案: