Announcement

Collapse
No announcement yet.

swatches on ctgy

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    swatches on ctgy

    Hello,

    I am trying to get my swatches to appear on the category screen screen, right below my thumbnail. Is there an example of how to do this?

    #2
    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
    Diana Hall
    http://aGardenPlace.com

    Comment


      #3
      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?
      Last edited by Mark Hood; 12-06-13, 10:08 AM.
      Mark Hood
      Vermont Gear

      Comment


        #4
        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 &nbsp; A row appears but no swatches :<div id="ctgyswatches_&mvte:product:id;" class="ctgyswatches">&nbsp;</div>
        You can see the empty space here: http://agardenplace.com/c/birdhouse-cottage.html
        Diana Hall
        http://aGardenPlace.com

        Comment


          #5
          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
          Vermont Gear

          Comment


            #6
            Re: swatches on ctgy

            post your "product display layout" tab template as well
            Last edited by Mark Hood; 12-06-13, 12:24 PM.
            Mark Hood
            Vermont Gear

            Comment


              #7
              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>
              Last edited by diana; 12-06-13, 12:40 PM.
              Diana Hall
              http://aGardenPlace.com

              Comment


                #8
                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.
                Last edited by KNewbrough; 12-06-13, 01:03 PM.
                Kyle Newbrough
                Technical Support / Web Developer
                Miva Merchant

                Comment


                  #9
                  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.
                  Diana Hall
                  http://aGardenPlace.com

                  Comment


                    #10
                    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
                    Vermont Gear

                    Comment


                      #11
                      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
                      Vermont Gear

                      Comment


                        #12
                        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>
                        Mark Hood
                        Vermont Gear

                        Comment


                          #13
                          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.
                          Diana Hall
                          http://aGardenPlace.com

                          Comment


                            #14
                            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.

                            Kyle Newbrough
                            Technical Support / Web Developer
                            Miva Merchant

                            Comment


                              #15
                              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.
                              Diana Hall
                              http://aGardenPlace.com

                              Comment

                              Working...
                              X