CODEWITHSUNDEEP
javascriptjqueryajaxshopifyliquid
narzero
narzero

Reputation: 2299

Show product quantity in cart in products div with ajax

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?

Upvotes: 3

Views: 4441

Answers (1)

Funk Doc
Funk Doc

Reputation: 1643

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

Upvotes: 1

Related Questions