Selected Swatches on Category Pages

[Matt Zimmermann]

lesliekirk In Shadows, it uses the class "x-product-layout-purchase__swatches--active" instead of the old "is--active" one. You can see it here: https://github.com/mivaecommerce/sha...achine.mvt#L50

[lesliekirk]

lesliekirk In Shadows, it uses the class "x-product-layout-purchase__swatches--active" instead of the old "is--active" one. You can see it here: https://github.com/mivaecommerce/sha...achine.mvt#L50

I sort of figured something else is used or something is missing. Would you happen to know what the javascript for Luxe is? And can I add it to the Head Template in the Attribute Machine template for this layout?

[Matt Zimmermann]

Hi Leslie,

This is the attribute machine code for the category page with swatches from Luxe. However, you shouldn't need it as the functionality was refined and expanded in Shadows.

s c r i p t
AttributeMachine.prototype.Generate_Discount = function (discount) {
var discount_div;

discount_div = document.createElement('div');
discount_div.innerHTML = discount.descrip + ': ' + discount.formatted_discount;

return discount_div;
};

AttributeMachine.prototype.Generate_Swatch = function (product_code, attribute, option) {
var swatch = document.createElement('li'),
img = document.createElement('img');

img.setAttribute('class', 'is--loaded');
img.src = option.image;
img.setAttribute('alt', option.prompt);
img.setAttribute('title', option.prompt);
swatch.setAttribute('data-code', option.code);
swatch.appendChild(img);
return swatch;
};
/ s c r i p t

[lesliekirk]

Hi Matt - thanks. That is almost exactly what is there. It doesn't have the script tags wrapped around it. Everything works except the "is--active". I'm puzzled...

[Matt Zimmermann]

Hi Leslie,

In Luxe, this functionality was included in the scripts.js file (theme.js for Shadows) within the function block for the swatch category page. You may need to modify for your store.

// ---- Add 'box-shadow' to Active Swatch ---- //
function selectedSwatch() {
$.hook('cmp-product-list__swatches').find('li').each(function () {
var swatchElement = $(this),
swatchColor = swatchElement.attr('data-code'),
swatchImage = swatchElement.find('img');

if (swatchColor === $.hook('swatch-select').find('option:selected').val()) {
swatchImage.addClass('is--active');
}
});
}

selectedSwatch();

MivaEvents.SubscribeToEvent('variant_changed', function () {
selectedSwatch();
});