Associating product images with variants - yet again.

Shopify Staff (Retired)
Shopify Staff (Retired)
5711 0 122

@CoverMe Cool. If you come up with any new hacks make sure you come back and share :D

http://shopifyplus.com ::: http://twitter.com/bacchus
0 Likes
Shopify Partner
1 0 0

 

To get variant images on the cart page i put the following into cart.liquid

reusing the the variant image app's json endpoint

<img id="{{ item.id }}_image" src="{{ item.product.featured_image | product_img_url: 'small' }}"  alt="{{ item.product.title }}" />

<script type="text/javascript">
// Get the image for the variant (if there is any)
jQuery.get("/a/variant-images-1?format=json&shop=" + Shopify.shop + "&handle={{ item.product.handle }}", function(data){
  var old_src = $("#{{ item.id }}_image").attr("src");
  var assetVer = old_src.split("?")[1];
  var filename = data["{{item.id }}"]["filename"];
  var variantParts = filename.split(".");
  variantParts[variantParts.length-2] = variantParts[variantParts.length-2] + "_small";
  var newfilename = variantParts.join(".") + "?" + assetVer;
  var cdnPortion = old_src.split("/");
  cdnPortion[cdnPortion.length-1] = newfilename;
  console.log(cdnPortion.join("/"));
  $("#{{ item.id }}_image").attr("src", cdnPortion.join("/"));
}) 
</script>

 

 

0 Likes
Shopify Partner
2 0 1

@Dominik Thank you! I needed this too.

0 Likes
Shopify Partner
39 0 0

Hi Dominik. 

Thanks for posting. I figured out to do that myself aswell, my main problem is still having the correct image on the checkout pages :-) 

CoverMe.dk - Design Laptop Covers
0 Likes
New Member
2 0 0

The admin and JSON parts of the app seem to do exactly what we need, but as far as I can tell the onchange handler for the Options drop down somehow breaks the onclick handler for the product thumbnails. They both should change the main large image on the product page. Since the JSON is available describing the images for each variant (looks like @Dominik and @CoverMe also spotted this) we should be able to fix it ourselves in the Javascript. 

0 Likes
Shopify Staff
Shopify Staff
5704 0 278

PS. There are 3 Liquid coding solutions here to show the right image on the Cart page at /cart. They are relying on some convention or another, and are not relying on what you have set up in the Variant Images app, though.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Shopify Partner
39 0 0

Thanks for all the feedback and links - my main issue still remains not being able to show the correct variant image on the checkout pages :-)

CoverMe.dk - Design Laptop Covers
0 Likes