Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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 %}
@carolineschnapp

This comment has been minimized.

Copy link
Owner Author

carolineschnapp commented Jan 26, 2014

I am assuming here that your theme uses jQuery. That's 99.9% of all Shopify themes out there. The only exception I know of is the theme ClearFlex by ClearLeft. Also, this script assumes that jQuery is included in the head element, as it should. There is a bunch of JavaScript files a theme should include in the head, rather than at the bottom of the body element, and jQuery is one of those.

@carolineschnapp

This comment has been minimized.

Copy link
Owner Author

carolineschnapp commented Jan 26, 2014

PS. For now, it's not possible to show the correct image at checkout. This solution fixes the cart page issue, and not the checkout pages one.

@carolineschnapp

This comment has been minimized.

Copy link
Owner Author

carolineschnapp commented Jan 26, 2014

Paste above script at the top of your cart.liquid template.

@CameronRoberts

This comment has been minimized.

Copy link

CameronRoberts commented Mar 14, 2014

Thank you for sharing this excellent code.

@justinwild

This comment has been minimized.

Copy link

justinwild commented Mar 27, 2014

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

This comment has been minimized.

Copy link

justinwild commented Mar 27, 2014

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

@carolineschnapp

This comment has been minimized.

Copy link
Owner Author

carolineschnapp commented Apr 2, 2014

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

This comment has been minimized.

Copy link
Owner Author

carolineschnapp commented Apr 2, 2014

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

This comment has been minimized.

Copy link

willbroderick commented Aug 6, 2014

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

This comment has been minimized.

Copy link

franz-see commented Sep 13, 2014

Does this still work?

The ajax

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

return 404 for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.