Selected Swatches on Category Pages

[stlads]

I am a bit confused, shouldn't the "&mvt:attributemachine:swatch_element_id" resolve to the actual swatch element id containing the product id as in the "ctgyswatches_%product_id%", in the "document.querySelector('#&mvt:attributemachine:sw atch_element_id;')"? If if does, then the Javascript should work correctly for each of the elements, since the id would be unique for each of the swatch elements

Do you have an example of doing this with querySelectorAll and the forEach loop?

[Matt Zimmermann]

Hi Henry,

Currently, only one "swatch_container" will be selected since it is a querySelector. You would probably need to change that to querySelectorAll and then run a forEach on the containers to apply the class to each selected swatch in each container.

[stlads]

Yes. I have the attribute and swatch image swap functionality working. I am having trouble with selected swatch functionality, where the class, "x-product-layout-purchase__swatches--active" is added to the selected swatch swatch.

[Matt Zimmermann]

Hi Henry,

In the Attribute Machine setting on the category page, do you have the Swatch Element value set to "ctgyswatches_%product_id%"?

[stlads]

I am working on a customer site to incorporate attributes and swatches into the category product list layout. I have been able to setup the swatches with image swap functionality in the CTGY page, like on the PROD page, but am having trouble setting up selected swatch functionality, like on the PROD page. The issue appears to be in the

let swatch_container = document.querySelector('#&mvt:attributemachine:swa tch_element_id;');

line of the "AttributeMachine.prototype.Generate_Swatch" function. The "ctgyswatches_%product_id%" is not looking up the product_id and is just looking for it literally, "ctgyswatches_%product_id%", instead of replacing the token with product id. Is there a way I can setup selected swatches functionality on the Category and Search pages?

Thanks in advance,
Henry