在购物车显示产品的数量在产品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]
现状:
- 添加产品X到购物车
怎么了:
- 在车数获取的更新
- Add Product X to cart
What happens:
- Cart count get's updated
- 包含产品X拿到DIV是一个蓝色三角形在右上角,表明产品X是在车
- 当鼠标悬停在产品X,它显示了次产品X的数量是在购物车中。
我想:
- 添加产品X到购物车
怎么了:
- 在车数获取的更新
- 包含产品X拿到DIV是一个蓝色三角形在右上角,表明产品X是在车
- 当鼠标悬停在产品X,它显示了次产品X的数量是在购物车中。
- 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屋!