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
