Selected Swatches on Category Pages

[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

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

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,

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]

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,

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.

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

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]

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

[lesliekirk]

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

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

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]

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]

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]

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.