Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp
Last active February 11, 2022 07:16
Show Gist options
  • Save carolineschnapp/8444587 to your computer and use it in GitHub Desktop.
Save carolineschnapp/8444587 to your computer and use it in GitHub Desktop.
Script that updates images on the cart page to show the correct thumbnail as chosen in the Variant Images app.
{% if cart.item_count > 0 %}
<script>
// Script that updates images on the cart page to show the correct thumbnail as chosen in the Variant Images app.
// This works with any markup.
// This works when using Line Item Properties where several items in the cart form can share the same variant ID.
// Author: Caroline Schnapp.
// Place at the top of your cart.liquid template.
(function($) {
var variantImages = {},
productHandles = [];
{% for item in cart.items %}
productHandles.push('{{ item.product.handle }}');
productHandles = $.unique(productHandles);
if (typeof variantImages[{{ item.id | json }}] === 'undefined') {
variantImages[{{ item.id | json }}] = [];
}
variantImages[{{ item.id | json }}].push({{ forloop.index0 }});
{% endfor %}
jQuery(function($) {
$('form[action="/cart"]').each(function() {
var images = $(this).find('img[src*="/products/"]').hide();
var size = images.first().attr('src').match(/thumb|small|compact|medium|large|grande/)[0] || 'small';
for (var i=0;i<productHandles.length;i++){
$.getJSON("/a/variant-images-1?shop=" + Shopify.shop + "&handle=" + productHandles[i], function(data){
$.each(data, function(variantId, image) {
if (typeof variantImages[variantId] !== 'undefined') {
for (var j=0; j<variantImages[variantId].length;j++) {
var oldURLParts = images.eq(variantImages[variantId][j]).attr('src').split('?');
var suffix = '?' + oldURLParts[1];
var prefix = oldURLParts[0].split('/');
prefix.pop();
prefix = prefix.join('/') + '/';
var filename = image.filename.replace('.', '_' + size + '.');
images.eq(variantImages[variantId][j]).attr('src', prefix + filename + suffix).show();
};
}
});
});
}
});
});
})(jQuery);
</script>
{% endif %}
@willbroderick
Copy link

Awesome snippet! Thank you so much :)

One thing I noticed, is that it doesn't work when the filename has a period/full stop in it, e.g. 'my.car.jpg'.
It ends up replacing the first period with the size. I changed the filename line to this to help with that:

var posOfLastPeriod = image.filename.lastIndexOf('.');
var filename = image.filename.substr(0, posOfLastPeriod) + '_' + size + image.filename.substr(posOfLastPeriod);

Just popping it here in case it helps somebody else.

@franz-see
Copy link

Does this still work?

The ajax

$.getJSON("/a/variant-images-1?shop=" + Shopify.shop + "&handle=" + productHandles[i], ...

return 404 for me.

@hossamhossny
Copy link

hossamhossny commented Feb 11, 2022

I actually managed to change the product featured image shown on cart page with the variant image by editing the code in cart-template.liquid
Search for image: item.product.featured_media.preview_image and replace with image: item.variant.featured_media.preview_image

I am still checking where can I do the same trick on the mini side cart.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment