Adding Attributes Swatches to Levels ReadyTheme CTGY Page

[lesliekirk]

Are there any Levels ReadyTheme specific snippets of code to place the Attribute Swatches in the CTGY page template? One that can do the image swatch swap? I'm thinking that it will need to start with the having the product attributes as part of the CTGY page.

I've searched the forums and found some older stuff (MM5.5) but am looking to do this within the Levels Ready Theme

[Matt Zimmermann]

Hi Leslie,

Off the top of my head, I cannot think of any site which have the layout you are speaking of. However, you might be able to pirate some code from a Luxe site to accomplish what you are thinking of.

[lesliekirk]

Hi Leslie,

Off the top of my head, I cannot think of any site which have the layout you are speaking of. However, you might be able to pirate some code from a Luxe site to accomplish what you are thinking of.

Yeah, I swore I saw this on Luxe but I can't seem to find a product using it on the live demo.

[Matt Zimmermann]

Luxe only uses the swatch portion, but you can see it on this page when you hover a product. https://luxe.mivareadythemes.com/silk.html

[Mark Hood]

I can help with either suivant or shadows :)
Destructions haven't really changed even from 5.5

[lesliekirk]

I can help with either suivant or shadows :)
Destructions haven't really changed even from 5.5

Yeah, think I may need some insights into it. Thanks

[Mark Hood]

Head Tag of the ctgy and assign both items to the page
<mvt:item name="attributemachine" param="head" />
<mvt:item name="category_listing_imagemachine" param="head" />

Category Product List Layout
replace image display with
<a href="&mvte:product:link;" title="&mvt:product:name;">
<img id="main_image_&mvte:product:id;" src="&mvt:product:image;" alt="&mvt:product:name;" />
</a>
<mvt:item name="category_listing_imagemachine" param="body:product:id" />
<div id="ctgyswatches_&mvte:product:id;" class="ctgyswatches"></div>
<form>
<input type="hidden" name="Action" value="ADPR">
<input type="hidden" name="Screen" value="BASK">
<input type="hidden" name="Store_Code" value="&mvte:store:code;">
<input type="hidden" name="Product_Code" value="&mvte:product:code;">
<mvt:item name="product_attributes" param="product:id" />
</form>
<mvt:item name="attributemachine" param="body" />

Product attribute template surround with
<p class="hidden">
template code
</p>

I've possibly missed something so let me know how you make out.

[Mark Hood]

css
.ctgyswatches li span{display:block;align:center;} .ctgyswatches li img{max-height:20px;max-width:20px;margin:0;padding:0;} .ctgyswatches li{display:inline-block;width:22px;height:22px;list-style:none;margin:0;padding:0;border:1px solid #eeeeee;cursor:pointer;} .hidden{display:none;visibility:hidden;} #hidden{display:none;visibility:hidden;}