Get product compare_at_price via AJAX

New Member
9 0 0

Hi, I'm using Venture Theme and I would like to display compare_at_price in the cart. I edit the code in cart.liquid and it works but when I want to update the cart using quantity selector it disappears.

 

So I need to use AJAX to have the compare_at_price. I went to https://help.shopify.com/en/api/reference/shipping-and-fulfillment/fulfillment to see the "line_items" properties but I can't find how to get product compare_at_price, I can only get price property.

 

Any way to do this?

0 Likes
Astronaut
765 80 155

I figured out a roundabout way of doing it. 

 

So you can't get the compare at price with the cart ajax, but it DOES give you a url to your product. Which you can then do another ajax call and get that product, then use it's compare at price. I put some "del" tags with unique id's next to my product prices, so that I know which one to inject the html into. 

 

So kind of like this:

 

//HTML
{% for item in cart.items %}
<div class="col-auto col-md line-item__line-price">
{{ item.price | money }} <del class="comp-price" id="comp-price_{{ item.title | handleize | replace: '®','' }}"> </del>
 </div>
{% endfor %}

//JAVASCRIPT

<script>
    let cart = jQuery.getJSON('/cart.js');
    cart.done(function(){
      cart = cart.responseJSON;
      let items = cart.items;
      getItemCompPrice(items);
    })
    function getItemCompPrice(items){
      let count=0;
      for (var i=0;i<items.length;i++){
        jQuery.getJSON(items[i].url + '.js', function(product){
          displayPrice(product.product, count)
		  count++;
        });         
        }
      }
    function displayPrice(product, index){
        console.log(product.handle)
		$('#comp-price_' + product.handle).html(product.variants[0].compare_at_price);
    }
</script>

And this is only assuming you have one variant. Definitely not perfect, but it's just what I came up with, maybe you can build off it.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Shopify Expert
2000 82 1452

You could create an alternate cart template that outputs a json string with whatever properties you need. This would let you return cart info and the compare at price.

 

https://help.shopify.com/en/themes/customization/store/create-alternate-templates

 

If you're stuck on building something just reply and we can help nudge you in the right direction.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
Astronaut
765 80 155

@Jason , if you have time would you mind giving a simple example of this? I don't quite understand how by creating an alternate template you can output a JSON string. 

 

I know how to create alternate templates, but once the template is created how would you go about creating the JSON string you need?

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
9 0 0

Thanks @Ninthony and @Jason for your answers!

 

@Jason I know alternate templates but how can I create a JSON to have the compare_at_price?

0 Likes
Shopify Expert
2000 82 1452

I'll make a quick example that you can use as inspiration for whatever you're building. Will post back with a link.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Expert
2000 82 1452

@ToTheMoon wrote:

@Jason I know alternate templates but how can I create a JSON to have the compare_at_price?


See if this helps:
https://github.com/freakdesign/Shopify-code-snippets/tree/master/Get%20a%20cart%20json%20response%20...

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
2 Likes
Astronaut
765 80 155

Thank you! Appreciate that example.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Highlighted
New Member
9 0 0

Very nice @Jason ! I'll try to use it on my store. Thank you for your work!

0 Likes