Show product quantity in cart in products div with ajax

2
votes

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

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.

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>

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.

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

![enter image description here][1]

Current situation:

  1. Add Product X to cart What happens:
    • Cart count get's updated
  2. Reload the page What happens:
    • 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.

What I would like:

  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.

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?

1
javascriptjqueryajaxshopifyliquid
well this is a couple problems in one so i'll try and help as much as possibe. First although we discussed it yesterday there is a more simple way to get the total count of the cart without the loop. cart.item_count returns the amount of items in the cart. – Funk Doc
second, you do need to use Ajax to make your add to cart without refresh work. I use the jquery library to access the functions of cart.js. You can see my answer to a similar question here stackoverflow.com/questions/26347107/… - I can explain and help more if needed but you're going to need to get familiar with ajax and how to return data from calls to the shopify API. – Funk Doc
@FunkDoc I appreciate the help. First, I don't need to return the amount of items in the cart, I need to know how many times a certain product has been added to the cart, So if I add Product A one time, and Product B two times, it should show: Product A: 1. Product B: 2, which it does now. Second, Thanks for the tip on cart.js (!), I'll look into it. – narzero
@FunkDoc I do have some questions, is there any way (Skype, Google Hangout) we could use IM to talk? – narzero
I don't have video capability. If you have a basic understanding of Jquery and use cart.js you should be able to manipulate what you need. When I have a little time I'll put some code in the answer below to hopefully help more. – Funk Doc

1 Answers

1
votes

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