select variant by clicking the image

Automatic Select Variant Option Using Product Images

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: Dawn 2.5 version and above, and any Shopify 2.0 FREE themes

Someone asked to do a variant select using the thumbnail images. There are lot of video tutorials available but none of them work with Dawn theme or in Shopify 2.0 themes. The answer is not always an APP either. This can be done with a simple snippet code. I also added a feature that will select the option using multiple variant images. I used the image alt to do the job. It is tedious work to assign alt to multiple images, but if you already have a CSV file for the product, this can easily be done.

Features:

- Select with multiple images

- Works with either dropdown or radio buttons variant picker

 - Updates the product information, eg. price

Check this demo product. Password: Made4uo

 NOTE: Before you start, makes sure you have the "Hide other variants’ media after selecting a variant" unclick from your theme editor and use "thumbnail carousel" or "thumbnails."  You also have to make sure tat you assign an image on every variants options. 

This will not work if you have an APP that changes the product options.

For product that has several options, always put the variant to select as FIRST in the variant selection. In this way, the code does not need to figure out what is the variant option it has to respond to, since an image can be use several times in the options (only if multiple images is used). 

 

 

To start:

1. We need to go to our Admins store and open the code editor. Click Online store > Themes > Actions > Edit code.

2. We need to open the Asset folder and look for media-gallery.js. If you don't have this file, this code will not work for you. Open the media-galley.js and find the code below. 

 mediaToSwitch.querySelector('button').addEventListener('click', this.setActiveMedia.bind(this, mediaToSwitch.dataset.target, false));  

Then insert the code below it. Please refer to the image for placement

mediaToSwitch.addEventListener('click', this.imageClicked.bind(this)); 

 

3. Let's start in a new line, then add the code below, after the closing curly bracket. Please refer to the image for placement. Then click SAVE.

 imageClicked(e) {
this.variantsJSON = this.variantsJSON || JSON.parse(this.querySelector('#productVariants').textContent);
const variantSelect = this.parentNode.nextElementSibling.querySelector('variant-selects');
const variantRadios = this.parentNode.nextElementSibling.querySelector('variant-radios');

const activeMediaId = e.currentTarget.dataset.target.split('__main-')[1];
const mediaOptions = this.variantsJSON.find(media => {
if(activeMediaId == media.featured_media.id) {
return media
}
})

if(variantSelect){
variantSelect.querySelectorAll('option').forEach(option => {
if(mediaOptions) {
if(mediaOptions.options[0] == option.value) {
option.selected = true;
updateProduct(variantSelect);
}
}
if(this.hasAttribute('multiple-images')) {
const activeMediaAlt =  e.currentTarget.querySelector('img').alt;
if(activeMediaAlt == option.value) {
option.selected = true;
updateProduct(variantSelect);
}
}
})
} else {
variantRadios.querySelectorAll('input').forEach(option => {
if(mediaOptions) {
if(mediaOptions.options[0] == option.value) {
option.checked = true;
updateProduct(variantRadios);
}
}

if(this.hasAttribute('multiple-images')) {
const activeMediaAlt =  e.currentTarget.querySelector('img').alt;
if(activeMediaAlt == option.value) {
option.checked = true;
updateProduct(variantRadios);
}
}
})
}

function updateProduct(selector) {
selector.updateOptions();
selector.updateMasterId()
selector.updateURL();
selector.updateVariantInput();
selector.renderProductInfo();
}
}
 

 

Code Placement:

code placement

 4. Next, we need to open the Section folder and open the main-product.liquid. Inside the file, search for "<media-gallery." Below the media-gallery, add the code below.

<script id="productVariants" type="application/json">
{{ product.variants | json }}
</script>

 Continue below if you want multiple image connected to the variant option. Otherwise, just SAVE the main-product.liquid and that is it. 

5. If you have multiple images in a variant option, you need to add the code below next to the "<media-gallery." Please check the image for placement. Click SAVE.

multiple-images

 

multiple-image

6. This is only if you have multiple images associated to the variant option. Go to your Admin screen and click "Products", click the product, then under the Media section. Click on the images and assign the media alt the same with the variant option. Please check the image for more information. Make sure to click SAVE.

Image alt insertion

Step 3 will open the window below. Add the image alt the same as the option. E.g. Option is "White", add a media alt "White." This is case sensitive. 

NOTE: If you don't assign a media alt, this image will not be use to select the variant option. 

That's it (",)

Copied!
Voltar para o blogue

Deixe um comentário