在购物车显示产品的数量在产品div与阿贾克斯 [英] Show product quantity in cart in products div with ajax

问题描述

我使用的是默认的供应主题我的Shopify商店，我已经启用Ajaxify车的选择。

I'm using the default Supply theme for my Shopify store and I've enabled Ajaxify Cart option.

我已经定制了主题，因此，如果一个客户增加产品X的车，重载并悬停在产品（集合页）它表明产品X为1时添加到购物车中。

I've customised the theme so that if a customers add Product X to the cart, reloads and hovers over the product (on the collections page) it shows that Product X is added 1 time to the cart.

这是液体code，显示产品中的X车数量：

This is the liquid code that shows the quantity of Product X in the cart:

<!-- 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-右上被添加到 DIV＃在推车指示器，如果不是购物车中的类是未在-车。

If a product is in the cart .triangle-top-right gets added to div#in-cart-indicator, if it's not in the cart the class is not-in-cart.

下面是一个GIF说明它目前是这样的：

Here's a GIF illustrating what it currently looks like:

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

![enter image description here][1]

现状：

1. 添加产品X到购物车 怎么了：
   • 在车数获取的更新

1. Add Product X to cart What happens:
   • Cart count get's updated

• 包含产品X拿到DIV是一个蓝色三角形在右上角，表明产品X是在车
• 当鼠标悬停在产品X，它显示了次产品X的数量是在购物车中。

我想：

1. 添加产品X到购物车 怎么了：
   • 在车数获取的更新
   • 包含产品X拿到DIV是一个蓝色三角形在右上角，表明产品X是在车
   • 当鼠标悬停在产品X，它显示了次产品X的数量是在购物车中。

1. Add Product X to cart What happens:
   • Cart count get's updated
   • The div containing Product X get's a blue triangle in the top right corner, indicating that Product X is in the cart
   • When hovering over Product X, it shows the number of times Product X is in the cart.

我试着用code中的 ajaxify.js ，但我缺乏的JavaScript似乎打破的东西。

I've tried messing with the code in ajaxify.js, but my lack of javascript seems to break things.

我该怎么办做到这一点？

What could I try to accomplish this?

推荐答案

这里的code我用一个人的时候悬停在商店购物车图标。悬停它得到cart.js并使用返回的数据填写保存的购物车信息。我选择了不显示在车悬停所有个别项目，因为如果有很多它就会变得混乱，但你当然可以。

Here's the code I use for when a person hovers over the cart icon in the store. On hover it gets cart.js and uses the returned data to fill in the that holds the cart info. I chose not to show all the individual items in the cart hover because if there are a lot it gets messy but you certainly can.

$("#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();
});

这篇关于在购物车显示产品的数量在产品div与阿贾克斯的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！