Announcement

**diana** · 12-05-13, 09:51 PM

Re: swatches on ctgy

Anyone? I've struggled with this and given up many times. Searched the forum, read the docs. Works fine on PROD page, but not sure how to edit CTGY page. Frustrated and willing to pay someone to get this working.

ASSIGNED ITEMS: attributemachine & product_attributes
Added the following...
HEAD:

Code:

<mvt:item name="attributemachine" param="head"  />
<mvt:item name="category_listing_imagemachine" param="head"  />

TAB - PAGE:

Code:

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

TAB - CATEGORY PRODUCT LIST LAYOUT:

Code:

<div id="ctgyswatches_&mvte:product:id;" class="ctgyswatches"></div>

TAB - PROD ATTRIBUTE TEMPLATE: Tried various examples from forum. No luck.

Code:

<table>
<mvt:foreach iterator="attribute" array="attributes">
    <tr>
        <td class="prompt">
            <input type="hidden" name="Product_Attributes[ &mvt:attribute:index; ]:code" value="&mvte:attribute:code;" />
            <mvt:if expr="l.settings:attribute:template_code NE 0">
                <input type="hidden" name="Product_Attributes[ &mvt:attribute:index; ]:template_code" value="&mvte:attribute:template_code;" />
            </mvt:if>
            <mvt:if expr="l.settings:attribute:type NE 'checkbox'">
                <mvt:if expr="l.settings:attribute:image">
                    <img src="&mvte:attribute:image;" alt="&mvte:attribute:raw_prompt;" />
                <mvt:else>
                    <mvt:if expr="l.settings:attribute:required">
                        <span class="required">
                    <mvt:else>
                        <span>
                    </mvt:if>
                            &mvt:attribute:prompt;
                        </span>
                </mvt:if>
            <mvt:else>
                &nbsp;
            </mvt:if>
        </td>
        <td class="field">
            <mvt:if expr="l.settings:attribute:type EQ 'text'">
                <input type="text" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:attribute:value;" class="textfield" />
            <mvt:elseif expr="l.settings:attribute:type EQ 'memo'">
                <textarea name="Product_Attributes[&mvt:attribute:index;]:value">&mvte:attribute:value;</textarea>
            <mvt:elseif expr="l.settings:attribute:type EQ 'radio'">
                <mvt:foreach iterator="option" array="attribute:options">
                    <div>
                    <mvt:if expr="( ( g.Product_Attributes[l.settings:attribute:index]:value EQ 0 ) AND
                                    ( l.settings:option:id EQ l.settings:attribute:default_id ) )   OR
                                    ( g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code )">
                        <input type="radio" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:option:code;" checked />
                    <mvt:else>
                        <input type="radio" name="Product_Attributes[&mvt:attribute:index;]:value" value="&mvte:option:code;" />
                    </mvt:if>
                    <mvt:if expr="l.settings:option:image">
                        <img src="&mvte:option:image;" alt="&mvte:option:prompt;" />
                    <mvt:else>
                        &mvte:option:prompt;
                    </mvt:if>
                    </div>
                </mvt:foreach>
            <mvt:elseif expr="( l.settings:attribute:type EQ 'select' ) OR ( l.settings:attribute:type EQ 'swatch-select' )">
                <select name="Product_Attributes[&mvt:attribute:index;]:value">
                    <mvt:foreach iterator="option" array="attribute:options">
                        <mvt:if expr="( ( g.Product_Attributes[l.settings:attribute:index]:value EQ 0 ) AND ( l.settings:option:id EQ l.settings:attribute:default_id ) ) OR
                                        ( g.Product_Attributes[l.settings:attribute:index]:value EQ l.settings:option:code )">
                            <option value="&mvte:option:code;" selected>&mvte:option:prompt;</option>
                        <mvt:else>
                            <option value="&mvte:option:code;">&mvte:option:prompt;</option>
                        </mvt:if>
                    </mvt:foreach>
                </select>
            <mvt:elseif expr="l.settings:attribute:type EQ 'checkbox'">
                <mvt:if expr="g.Product_Attributes[l.settings:attribute:index]:value">
                    <input type="checkbox" name="Product_Attributes[&mvt:attribute:index;]:value" value="Yes" checked />
                <mvt:else>
                    <input type="checkbox" name="Product_Attributes[&mvt:attribute:index;]:value" />
                </mvt:if>
                <mvt:if expr="l.settings:attribute:image">
                    <img src="&mvte:attribute:image;" alt="&mvte:attribute:raw_prompt;" />
                <mvt:else>
                    <mvt:if expr="l.settings:attribute:required">
                        <span class="required">
                    <mvt:else>
                        <span>
                    </mvt:if>
                            &mvt:attribute:prompt;
                        </span>
                </mvt:if>                
            </mvt:if>
        </td>
    </tr>
</mvt:foreach>
</table>
<div class="clear"></div>

CSSUI
Miva Merchant 5.5
Production Release 8 Update 12

**Mark Hood** · 12-06-13, 10:07 AM

Re: swatches on ctgy

On the attribute machine tab of the CTGY make sure that the Swatch Element: is filled in

ctgyswatches_%product_id%

Do the actual attribute options show up and you are just missing swatch images?

**diana** · 12-06-13, 11:41 AM

Re: swatches on ctgy

Hi Mark, Thanks for the reply. I realize this is about the worst time of year to be reaching out for help.

I added "ctgyswatches_%product_id%" to the Swatch Element box if that's what you meant. Before it just said "swatches". Still nothing.
Under each image on the category page:
No swatches display with: <div id="ctgyswatches_&mvte:product:id;" class="ctgyswatches"></div>
If I add   A row appears but no swatches :<div id="ctgyswatches_&mvte:product:id;" class="ctgyswatches"> </div>
You can see the empty space here: http://agardenplace.com/c/birdhouse-cottage.html

**Mark Hood** · 12-06-13, 12:21 PM

Re: swatches on ctgy

I'm thinking you are really close how about posting the full page template.

make sure this <mvt:item name="attributemachine" param="body" />
is just above the footer and not before the product display layout

**Mark Hood** · 12-06-13, 12:24 PM

Re: swatches on ctgy

post your "product display layout" tab template as well

**diana** · 12-06-13, 12:37 PM

Re: swatches on ctgy

Category Display PAGE

Code:

<mvt:item name="html_profile" />
<mvt:if expr="g.mobile EQ 'TRUE'">
    <mvt:item name="mobile_content" />
<mvt:else>
<head>
<meta charset="utf-8">
<title>&mvte:category:name; - aGardenPlace.com</title>
<mvt:item name="prodctgy_meta" param="ctgy" />
<mvt:item name="head" param="head_tag" />
<mvt:item name="attributemachine" param="head" />
<mvt:item name="category_listing_imagemachine" param="head" />
</head>
<mvt:item name="body">
    <mvt:item name="hdft" param="global_header" />    
    <div id="prod-ctgy-hdft-header">
        <mvt:item name="prod_ctgy_hdft" param="ctgy_header" />
    </div>
    <div id="hdft-header">
        <mvt:item name="hdft" param="header" />
    </div>
    <mvt:item name="toolkit" param="subcat|ccount|g.Category_Code" />
    <mvt:if expr="ccount GT 0">
        <mvt:item name="subcategory_listing" />
    </mvt:if>
    <mvt:item name="toolkit" param="cxp|pcount|l.all_settings:category:id" />
    <mvt:if expr="pcount GT 0">
        <mvt:item name="category_listing" />
    </mvt:if>
    <div id="prod-ctgy-hdft-footer">
        <mvt:item name="prod_ctgy_hdft" param="ctgy_footer" />
    </div>
    <div id="hdft-footer">
        <mvt:item name="hdft" param="footer" />
    </div>
    <mvt:item name="attributemachine" param="body" />
    <mvt:item name="hdft" param="global_footer" />    
</mvt:item>
</mvt:if>
</html>

PRODUCT DISPLAY LIST LAYOUT ( Product Display Layout is not assigned)

Code:

<!-- begin ctgy product display layout //-->
<div id="category-listing">
    <mvt:foreach iterator="product" array="category_listing:products">
        <mvt:if expr="(pos1 MOD 4) EQ 1">
            <div class="product-wrapper first">
        <mvt:else>
            <div class="product-wrapper">
        </mvt:if>
            <div class="img-shadow">
            <a href="&mvte:product:link;" title="&mvte:product:name;" class="product-link" >
                <mvt:if expr="NOT ISNULL l.settings:product:imagetypes:main">
                    <img src="&mvte:product:imagetypes:main;" alt="&mvte:product:name;"  />
                <mvt:elseif expr="NOT ISNULL l.settings:product:thumbnail">
                    <img src="&mvte:product:thumbnail;" alt="&mvte:product:name;"  />
                <mvt:else>
                    <img src="../images/img_no_thumb.jpg" alt="&mvte:product:name;" />
                </mvt:if>
            </a>
            </div>
            <div id="ctgyswatches_&mvte:product:id;" class="ctgyswatches">&nbsp;</div>                            
                <br class="clear" />
                        <mvt:item name="category_listing_imagemachine" param="body:product:id" />
            <p class="product-wrapper-name"><a href="&mvte:product:link;" title="&mvte:product:name;">&mvte:product:name;</a></p>
                    <p class="ctgy-price">&mvt:product:formatted_price;</p>
            <mvt:if expr="l.settings:product:customfield_values:customfields:regular_price NE 0">
            <mvt:item name="toolkit" param="math_subtract|difference|l.all_settings:product:customfield_values:customfields:regular_price|l.all_settings:product:price" />
            <mvt:item name="toolkit" param="currencyformat|formatted_savings|difference" />
            <div class="savings">List: <span class="listprice">$&mvt:product:customfield_values:customfields:regular_price;</span> Save:<span class="savings">&mvt:global:formatted_savings;</span></div>
    </mvt:if>
            <p>
            <mvt:if expr="NOT ISNULL l.settings:product:customfield_values:customfields:baskmessage"> 
                <span class="red">Est Ship: &mvt:product:customfield_values:customfields:baskmessage;</span>
            <mvt:else>
            <mvt:if expr="l.settings:product:inv_active">&mvt:product:inv_short;</mvt:if></mvt:if></p>
                      
            </div>
    </mvt:foreach>
</div>
<mvt:if expr="g.CatListingOffset OR g.CatListingNextOffset">
    <div id="ctgy-bottom-navigation" class="clearfix">
        <mvt:if expr="g.CatListingOffset GT 0">
            <div class="previous-button">
                <form method="post" action="&mvte:global:sessionurl;">
                    <input type="hidden" name="Screen" value="&mvte:global:Screen;" />
                    <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />
                    <input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;" />
                    <input type="hidden" name="Product_Code" value="&mvte:global:Product_Code;" />
                    <input type="hidden" name="Search" value="&mvte:global:Search;" />
                    <input type="hidden" name="Offset" value = "&mvte:global:CatListingPrevOffset;" />
                    <input type="hidden" name="AllOffset" value = "&mvte:global:AllOffset;" />
                    <input type="hidden" name="CatListingOffset" value = "&mvte:global:CatListingPrevOffset;" />
                    <input type="hidden" name="RelatedOffset" value = "&mvte:global:RelatedOffset;" />
                    <input type="hidden" name="SearchOffset" value = "&mvte:global:SearchOffset;" />
                    <mvt:item name="buttons" param="Previous" />
                </form>
            </div>
        </mvt:if>
        <mvt:if expr="g.CatListingNextOffset GT 0">
            <div class="next-button">
                <form method="post" action="&mvte:global:sessionurl;">
                    <input type="hidden" name="Screen" value="&mvte:global:Screen;" />
                    <input type="hidden" name="Store_Code" value="&mvte:global:Store_Code;" />
                    <input type="hidden" name="Category_Code" value="&mvte:global:Category_Code;" />
                    <input type="hidden" name="Product_Code" value="&mvte:global:Product_Code;" />
                    <input type="hidden" name="Search" value="&mvte:global:Search;" />
                    <input type="hidden" name="Offset" value = "&mvte:global:CatListingNextOffset;" />
                    <input type="hidden" name="AllOffset" value = "&mvte:global:AllOffset;" />
                    <input type="hidden" name="CatListingOffset" value = "&mvte:global:CatListingNextOffset;" />
                    <input type="hidden" name="RelatedOffset" value = "&mvte:global:RelatedOffset;" />
                    <input type="hidden" name="SearchOffset" value = "&mvte:global:SearchOffset;" />
                    <mvt:item name="buttons" param="Next" />
                </form>
            </div>
        </mvt:if>
    </div>
</mvt:if>

**KNewbrough** · 12-06-13, 12:38 PM

Re: swatches on ctgy

You'll need an add-to-basket form for each product with the product_attributes item called inside it. You can hide it with CSS if it isn't being used and if the swatch attribute is the only attribute available for the product, but the form must be present so that attribute machine has a target select to manipulate when the swatches are clicked, which is what triggers image machine to fetch the variant and swap the image. The feature wasn't originally designed to go on CTGY, so this is one of the caveats of putting it there.

Code:

<form method="post" action="&mvte:global:sessionurl;Screen=BASK">                                <input type="hidden" name="Action" value="ADPR" />
                <input type="hidden" name="Quantity" value="1" />
                                <mvt:item name="product_attributes" param="product:id" />                
                <input type="hidden" name="Product_Code" value="&mvte:product:code;" />    
                </form>

You also want this at the bottom of the product foreach loop on CTGY so that it is called below both the ctgyswatches container and the form:

Code:

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

Let us know if it still doesn't work after that.

You also don't need the attributemachine with param="body" you currently have at the bottom of the page.

**diana** · 12-06-13, 01:08 PM

Re: swatches on ctgy

PROGRESS!! Added the form and above code right above the </mvt:foreach> on Category Product List Layout.
Although it messed up the page by putting everything in a verticle layout, the swatches are showing!.
However, so is the swatch drop down box and any other attribute dropbox. before I tinker and make a bigger mess...

1. How do I hide the dropdown boxes, any other attribute options?
2. Where do I modify the size of the swatches?
2. The swatches don't change the product image, perhaps because the Cat page uses the old thumbnail image?
3. My Category Page does not have item "Product Display" enabled, but rather Category Product List Layout. Is that correct?

Thank you all so much! I am always amazed at the generosity within the forum.

**Mark Hood** · 12-06-13, 01:23 PM

Re: swatches on ctgy

I did this by adding
<p class="hidden">
attribute template
</p>

and adding
.hidden { display: none; }
to my css

**Mark Hood** · 12-06-13, 01:24 PM

Re: swatches on ctgy

add max width and height to ctgyswatches like

.ctgyswatches li{
display:block;
float:left;
margin:1px;
padding:1px;
text-align:center;
border:1px solid #eeeeee;
cursor:pointer;
}
.ctgyswatches li img{
max-width:20px;
max-height:20px;
}

**Mark Hood** · 12-06-13, 01:30 PM

Re: swatches on ctgy

You will have to change from using the thumbnail to have the image swap which may look something like this for you?

Code:

<a href="http://www.agardenplace.comcom/pc/&mvt:product:code;.html"><img id="main_image_&mvte:product:id;" src="http://www.agardenplace.com/mm5/&mvt:product:image;" alt="&mvt:product:name;" /></a>

**diana** · 12-06-13, 01:52 PM

Re: swatches on ctgy

That worked. I'm hopeful I can figure out the minor details from here.
Thank you Mark & Kyle so much for your help! I would have just given up again.

**KNewbrough** · 12-06-13, 05:43 PM

Re: swatches on ctgy

Oops, I guess I should've been more clear about the form placement. If you put it before the last </div> in the foreach loop it should fix the vertical alignment issue with the layout.

Mark's solution is a good one for hiding the attributes. You can put the entire form in the hidden element or just the product_attributes item call.

It looks like you already figured out how to modify the swatch sizes via CSS.

Your assumption about the old thumbnails being unable to support image swapping is correct - you will need to install Image Machine. It will be a very similar process to installing Attribute Machine where you'll install it the same way it is on the PROD page, but you need to use id="main_image_&mvte:product:id;" and change the main image element to main_image_%product_id% to account for there being multiple products on the page, and use body:product:id instead of just 'body' for the body item call's param.

CTGY shouldn't have Product Display Layout, but instead Category Product Display Layout. I think Mark just had a momentary case of brain and fingers moving at different speeds. It is Friday, after all.

**diana** · 12-06-13, 06:06 PM

Re: swatches on ctgy

Wow, your timing could not have been better. Just returned to continue on after giving my brain a rest, ha ha.
I did finally figure out the swatch size/css connection and will now work on the rest per your instructions above.

Thank you so much for following up! You and Mark have saved me hours of frustration.

Announcement

swatches on ctgy

swatches on ctgy

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment