Debut Grouping Variant Images

10 0 3

I'm tantalising close to getting this working, just can't quite get there.


Followed a tutorial ( and figure it must be slightly out of date so something has changed slightly in Debut which is preventing it from working.


In this code (from the tutorial):


{% if color == image.alt %}

I changed 'image.alt' to 'media.alt' which got me a step closer.


The behaviour I'm seeing now is the main variant thumbnails are hidden (goal!), but the additional images I'm trying to associate with each variant (using the image alt tag as per the tutorial) are still appearing on all variants not just the variant the alt tag is pointing to.


The code that goes into theme.js (from the tutorial) is:


_onSelectChange: function() {

Before the closing } bracket, add: 

var thumbs = document.getElementsByClassName("product-single__thumbnails");

for (var i = 0; i < thumbs.length; i++){
var variantTitle = variant.title;
var variantColor = thumbs[i].getAttribute('data-color');

if (variantTitle.includes(variantColor)) {
$('.product-single__thumbnails[data-color="' + variantColor + '"]').removeClass('hide');
} else {
$('.product-single__thumbnails[data-color="' + variantColor + '"]').addClass('hide');

 I notice if I remove this code altogether, the behaviour is the same which leads me to think something has changed in Debut that makes this code block no longer work.

Can anyone spot what the problem is?

Reply 1 (1)
New Member
2 0 0

I'm following the same tutorial.
Did you managed to get the code into theme.js to work?