Get product compare_at_price via AJAX

Highlighted
Tourist
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
Highlighted
Shopify Partner
1236 162 362

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 my solution helped you, please like and accept as solution!
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
Shopify Expert
9856 98 1680

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
Highlighted
Shopify Partner
1236 162 362

@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 my solution helped you, please like and accept as solution!
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
Tourist
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
Highlighted
Shopify Expert
9856 98 1680

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
Highlighted
Shopify Expert
9856 98 1680

@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
3 Likes
Highlighted
Shopify Partner
1236 162 362

Thank you! Appreciate that example.

If my solution helped you, please like and accept as solution!
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
Tourist
9 0 0

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

0 Likes
Highlighted
Tourist
4 0 0

Hello Jason, thanks for those informations. I'm trying to add the compare price on my cart but I'm not sure how to use your alternate cart template. For now, I create that alternate template with the .json code you gave but how can I use those data in my cart-template.liquid ?

0 Likes