Selected Swatches on Category Pages

[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();
});

[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,

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]

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]

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]

I've hit a snag and I'm not sure if anyone is following along with this post. Thanks to an older suggestion from Matt Zimmermann I have taken the CTGY_PROD_SWATCH template code from the Luxe ReadyTheme and recreated it in Shadows 10.06. I have hit a problem with the "is--active" class not being appended to the selected swatch. I am wondering if there is a conflict with the javascript or if the required script is missing from the Shadows 10.06 AttributeMachine.js. As I mentioned in the Swatch Swap on CTGY/SRCH pages post, I don't see anything in the Head Template javascript that might provide this appending.

On a side note, other than this little snag - this is working very well and I think it should be included as an option in future releases of Shadows.

[lesliekirk]

The forum is being a pip and not letting me post my own link Luxe works like a charm. The CSS also needs to be used. https://www.miva.com/forums/forum/de...tgy-srch-pages

[lesliekirk]

Following up on this, I talked to Henry, he doesn't have access to the code he used to make this work. He pointed me in the direction of some VERY old posts that help to get the attributes to display (and even be able to add to cart) but I'm working on getting the image to swap with the swatch selected. I guess I need to start with getting the attribute swatches to display (currently it's a drop-down list).

Quick note, when adding the Attribute Machine to the CTGY template it used very OLD code in the Head Template and didn't include the updates swatch-select code.

I now have a blank area where the swatches should be. The div gets created but the swatches do not.

I did make the Swatch Element ctgyswatches_%product_id% - but is there someplace else I need to edit? I seem to think there might be.

[lesliekirk]

Following up on this, I talked to Henry, he doesn't have access to the code he used to make this work. He pointed me in the direction of some VERY old posts that help to get the attributes to display (and even be able to add to cart) but I'm working on getting the image to swap with the swatch selected. I guess I need to start with getting the attribute swatches to display (currently it's a drop-down list).

[lesliekirk]

I sure hope you'll be able to share the end result (link) so we can see how it turned out

Hey Henry stlads , did you ever get this working? I too have a store that needs this functionality. I was hoping it would have been something a little simpler to implement.

[lesliekirk]

I sure hope you'll be able to share the end result (link) so we can see how it turned out

[stlads]

Yes.

FYI, I think I have it working now. I scrapped trying to use the setTimeout function inside the Generate_Swatch function. Instead, I created a custom AttributeList_Load_Possible_Callback function, which loops through the swatch containers and associated swatch-select inputs to determine which swatch should be selected. It also updates the product links to pass the serialized attributes to the product page. This was all a bit tricky, since I had to add product ID's to swatch-select elements, and additional data attribute to swatches for option.product_id, but it appears to be working.

Thanks again for your quick responses,
Henry

[Matt Zimmermann]

Hi Henry,

Do you have the attributemachine item set to be product specific within the product foreach loop?

<mvt:item name="attributemachine" param="body:product:id" />

[stlads]

Unfortunately, it did not work, as the &mvt:product:id; did not resolve to the id, when looking at the source code. Also, I think since the Generate_Swatch function is in the page only once, setTimeout would need to loop through the querySelectorAll for "ctgyswatches_" containers, as you initially indicated. Not sure if I know how to do that, but will give it a try.

If you have this working on another theme, or do get it implemented for swatches on the category page for Shadows, please let me post an example.

Thanks again,

[Matt Zimmermann]

Hi Henry,

I would believe it should resolve. For the querySelector, try changing it to #ctgyswatches_&mvt:product:id; and see if that works. I have not implemented swatches on the category page for Shadows yet, so I do not have any examples.