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 %}
@justinwild
Copy link

Hi, I have ClearFlex Theme, so do I need to add JQuery to the template, if so, which file. I can't seem to get this to work on the ClearFlex Theme, any ideas. Help is much appreciated!

@justinwild
Copy link

Ah ha, adding Jquery to the template makes ClearFlex Theme work ok.

@carolineschnapp
Copy link
Author

Hi Justin,

There's only one theme that does not use jQuery in the theme store, and it is ClearFlex. I am glad you figured it out. For others, if you have ClearFlex, simply add this at the top of your code:

{{ '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' | script_tag }}

@carolineschnapp
Copy link
Author

The snippet has now been fixed to work in the Simple theme, which contains 2 cart forms. The previous code was only updating the images in the drawer cart when on the cart page. Include the code snippet on all pages to deal with the cart drawer, BUT when adding an item to the cart, you won't be able to see the right image, unless you execute the code again. The images will correctly be shown after a page refresh.

@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