'You Save' coding issue when product with variants

Explorer
200 0 20

So we have just added a feature we found on Shopify to display the £ saving to the customer when a product is on sale. The problem comes when you have a product with more than one variant.

Whats happening is that when a non-sale variant is displayed it is still shown the saving, the current liquid is this:

   {% if product.compare_at_price > product.price %}Save up to {{ product.compare_at_price | minus: product.price | money_with_currency}}{% endif %}
       </br>

Now i have changed the code to replace product. with variant. however this doesnt work either as the code / page doesnt refresh when a customer goes from selecting a non sale item to a sale item.

Example product with the issue here: (we have changed the words to say 'save up to' as a kind of workaround)

http://www.barksandbunnies.co.uk/collections/dog-collars-reflective-led/products/red-dingo-lumitube

 

Anyway to get this to work?

0 Likes
Astronaut
1890 1 393

You will need to edit some Javascript as well as Liquid.  Replace the block of code that you pasted with:

<span class="save_price"></span><br/>

Open Assets/app.js.  Look for the following block of code.

    if (variant && variant.available == true) {
      if(variant.price < variant.compare_at_price){
        $('.was_price', $product).html(Shopify.formatMoney(variant.compare_at_price, $('form.product_form', $product).data('money-format')))
      } else {
        $('.was_price', $product).text('')
      }



      $('.sold_out', $product).text('');
      $('.current_price', $product).html(Shopify.formatMoney(variant.price, $('form.product_form', $product).data('money-format')));
      $('.add_to_cart', $product).removeClass('disabled').removeAttr('disabled').val('Add to Cart');
      $notify_form.hide();
    } else {
      var message = variant ? "Sold Out" : "Out of Stock";
      $('.was_price', $product).text('');
      $('.current_price', $product).text('');
      $('.items_left', $product).text('');
      $('.quantity', $product).removeAttr('max');
      $('.sold_out', $product).text(message);
      $('.add_to_cart', $product).addClass('disabled').attr('disabled', 'disabled').val(message);
      $notify_form.fadeIn();
    }

Add a few lines to get:

    if (variant && variant.available == true) {
      if(variant.price < variant.compare_at_price){
        $('.was_price', $product).html(Shopify.formatMoney(variant.compare_at_price, $('form.product_form', $product).data('money-format')))
        $('.save_price', $product).html("Save up to "+Shopify.formatMoney((variant.compare_at_price-variant.price), $('form.product_form', $product).data('money-format')))
      } else {
        $('.was_price', $product).text('')
        $('.save_price', $product).text('')
      }



      $('.sold_out', $product).text('');
      $('.current_price', $product).html(Shopify.formatMoney(variant.price, $('form.product_form', $product).data('money-format')));
      $('.add_to_cart', $product).removeClass('disabled').removeAttr('disabled').val('Add to Cart');
      $notify_form.hide();
    } else {
      var message = variant ? "Sold Out" : "Out of Stock";
      $('.was_price', $product).text('');
      $('.save_price', $product).text('')
      $('.current_price', $product).text('');
      $('.items_left', $product).text('');
      $('.quantity', $product).removeAttr('max');
      $('.sold_out', $product).text(message);
      $('.add_to_cart', $product).addClass('disabled').attr('disabled', 'disabled').val(message);
      $notify_form.fadeIn();
    }

I hope this helps.

0 Likes
Explorer
200 0 20

Alex, that is absolutely amazing! Thank you so much that is really very kind of you to help.

Again, thank you so much

Can you explain why it needs js and not just plain liquid? trying to learn every day :)

0 Likes
Astronaut
1890 1 393

We can use Javascript to alter the HTML without refreshing the page.  For example, as we choose different product variants, we are allowing Javascript to the alter the HTML so that the page says "You save $4.00" instead of "You save $1.00".  These changes only exist in the viewer's browser and are done without needing to refresh the page.

Liquid cannot alter the HTML without refreshing the page.

0 Likes
Explorer
200 0 20

Thank you

0 Likes
Explorer
200 0 20

Alex,

Hopefully you get to see this. Have a strange problem, we have two products which use the same product template. The 'You Save' code works on one of them but not on the other?! Any ideas?

Code not working:

http://www.barksandbunnies.co.uk/collections/special-offers/products/eco-treatball-for-small-animals

Code working:

http://www.barksandbunnies.co.uk/collections/special-offers/products/chew-tube-small

0 Likes
Shopify Expert
9800 91 1554

It's not that the code is not working, it's just not being called. One product has multiple variants and the other doesn't. The callback function Alex is helping you with above will only fire on multi-variant products. You'd want to add some liquid to check if there's a solo item and write out the discount (in a similar way to your first post). 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Explorer
200 0 20

Ok thanks, so just to get that clear in my head, where there is a single product it can be done with liquid like in my original code above as the page doesnt need to be refreshed and Alex's code will only 'fire' when there is a product with multiple codes so a combination of both codes is needed?

 

EDIT:

Tried the following code but it doesnt display the saving, not sure what other variable to use?

{% if product.variants == 1 and product.compare_at_price > product.price %}You Save {{ product.compare_at_price | minus: product.price | money_with_currency}}{% endif %}
       </br>

 

0 Likes
Astronaut
1890 1 393

Instead of:

<span class="save_price"></span><br/>

Try this: (Note that you should be using "product.variants.size" rather than "product.variants".)

<span class="save_price">{% if product.variants.size == 1 and product.compare_at_price > product.price %}You Save {{ product.compare_at_price | minus: product.price | money_with_currency}}{% endif %}</span><br/>

 

0 Likes
Explorer
200 0 20

Thank you Alex. Hadnt seen the variants.size option, was searching for 'count' or similar

0 Likes