When you click on an image the code doesn't change | Supply Theme

[DStanko]

I need it so when you click on an image I need the SKU to change.

[Jasoliya]

Hi @DStanko 

First of all you have to add sku in <li> attribute by sku="{{ image.variants [0].sku }}" , so it look like...

<li sku="{{ image.variants [0].sku }}" class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">

now add bellow Js code in Asset->theme.js

$(document).on('click','#productThumbs-product-template li',function(){
    $('.variant-sku').text($(this).attr('sku')); 
})

[DStanko]

here do i add the top code?

[Jasoliya]

Yes you can use this copy Js code but add sku="{{ image.variants [0].sku }}" on right place as i mentioned

[DStanko]

This isn't working. i still dont get what you want me to do with the 

<li sku="{{ image.variants [0].sku }}" class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">

code

[DStanko]

All this does is make the image really big and take up the whole page, i need the SKU to change when you click a different image.

[Jasoliya]

 just need to add this code in <li> no need to change your code

sku="{{ image.variants [0].sku }}"

[DStanko]

It still enlarges the image instead of JUST changing the code.