CSSUI:
The CSSUI template changes outlined below are required to utilize the Image Machine and swatch attribute functionality. Also, the "prodctgy_meta" item tag was also added to the head section of both the PROD and CTGY pages.
Before editing the templates, the "product_display_imagemachine" item must be assigned to the PROD page and the Image Machine must be enabled on its configuration tab.
On CTGY in the main page template:
replace...
with...
On PROD in the main page template:
replace...
with...
In the advanced mode Product Display Layout template, replace...
with...
New CSS styles added to cssui.css (these can be added to any existing CSS file or placed in additional CSS files):
The CSSUI template changes outlined below are required to utilize the Image Machine and swatch attribute functionality. Also, the "prodctgy_meta" item tag was also added to the head section of both the PROD and CTGY pages.
Before editing the templates, the "product_display_imagemachine" item must be assigned to the PROD page and the Image Machine must be enabled on its configuration tab.
On CTGY in the main page template:
replace...
Code:
<head> <title>&mvt:store:name;: &mvt:category:name;</title> <base href="&mvt:global:basehref;" /> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <mvt:item name="head" param="css_list" /> <mvt:item name="head" param="head_tag" /> </head>
Code:
<head> <title>&mvt:store:name;: &mvt:category:name;</title> <base href="&mvt:global:basehref;" /> <mvt:item name="prodctgy_meta" param="ctgy" /> <mvt:item name="head" param="css_list" /> <mvt:item name="head" param="head_tag" /> </head>
replace...
Code:
<head> <title>&mvt:store:name; &mvte:product:name;</title> <base href="&mvt:global:basehref;" /> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <mvt:item name="head" param="css_list" /> <mvt:item name="head" param="head_tag" /> <mvt:item name="attributemachine" param="head" /> </head>
Code:
<head> <title>&mvt:store:name; &mvte:product:name;</title> <base href="&mvt:global:basehref;" /> <mvt:item name="prodctgy_meta" param="prod" /> <mvt:item name="head" param="css_list" /> <mvt:item name="head" param="head_tag" /> <mvt:item name="attributemachine" param="head" /> <mvt:item name="product_display_imagemachine" param="head" /> </head>
Code:
<h1>&mvt:product:name;</h1> <div class="product-details-1"> <mvt:if expr="NOT ISNULL l.settings:product:image"> <div class="product-image"><img src="&mvt:product:image;" alt="&mvt:product:name;" /></div> <mvt:else> <div class="image-not-available product-image"></div> </mvt:if> <div class="product-code">Code: <span class="bold">&mvt:product:code;</span></div> <div class="product-price">Price: <span id="price-value" class="bold">&mvt:product:formatted_price;</span></div> <mvt:if expr="l.settings:product:weight NE 0"> <div class="product-weight">Shipping Weight: <span class="bold">&mvt:product:weight;</span> &mvt:store:wtunits;</div> </mvt:if> <div id="inventory-message"> <mvt:if expr="l.settings:product:inv_active"> &mvt:product:inv_long; </mvt:if> </div> <div class="product-quantity">Quantity in Basket: <mvt:if expr="l.settings:product:quantity EQ 0"> <span class="italic">None</span> <mvt:else> <span class="bold">&mvt:product:quantity;</span> </mvt:if> </div> </div> <div class="product-details-2"> <form method="post" action="&mvt:global:sessionurl;Screen=BASK"> <div class="product-description">&mvt:product:descrip;</div> <input type="hidden" name="Old_Screen" value="&mvte:global:Screen;" /> <input type="hidden" name="Old_Search" value="&mvte:global:Search;" /> <input type="hidden" name="Action" value="ADPR" /> <input type="hidden" name="Store_Code" value="&mvte:store:code;" /> <input type="hidden" name="Product_Code" value="&mvte:product:code;" /> <input type="hidden" name="Category_Code" value="&mvte:global:category_code;" /> <input type="hidden" name="Offset" value="&mvte:global:Offset;" /> <input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" /> <input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" /> <input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" /> <input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" /> <div class="product-attributes"><mvt:item name="product_attributes" param="product:id" /></div> <div class="purchase-buttons">Quantity: <input type="text" name="Quantity" value="1" class="product-quantity-input textfield" /> <mvt:item name="buttons" param="AddToBasket" /></div> </form> </div> <div class="clear"></div>
Code:
<h1>&mvt:product:name;</h1> <div class="product-details-1"><div class="product-image"><img id="main_image" src="graphics/en-US/cssui/blank.gif" alt="&mvte:product:name;" /></div> <ul id="thumbnails" class="thumbnails"></ul> <div id="closeup_div" class="closeup"><img id="closeup_image" src="graphics/en-US/cssui/blank.gif" alt="" /><div><a id="closeup_close">close</a></div></div> <mvt:item name="product_display_imagemachine" param="body:product:id" /> <div class="clear product-image-margin"></div> <div class="product-code">Code: <span class="bold">&mvt:product:code;</span></div> <div class="product-price">Price: <span id="price-value" class="bold">&mvt:product:formatted_price;</span></div> <mvt:if expr="l.settings:product:weight NE 0"> <div class="product-weight">Shipping Weight: <span class="bold">&mvt:product:weight;</span> &mvt:store:wtunits;</div> </mvt:if> <div id="inventory-message"> <mvt:if expr="l.settings:product:inv_active"> &mvt:product:inv_long; </mvt:if> </div> <div class="product-quantity">Quantity in Basket: <mvt:if expr="l.settings:product:quantity EQ 0"> <span class="italic">None</span> <mvt:else> <span class="bold">&mvt:product:quantity;</span> </mvt:if> </div> </div> <div class="product-details-2"> <form method="post" action="&mvt:global:sessionurl;Screen=BASK"> <div class="product-description">&mvt:product:descrip;</div> <div id="swatches" class="swatches"></div> <div class="clear"></div> <input type="hidden" name="Old_Screen" value="&mvte:global:Screen;" /> <input type="hidden" name="Old_Search" value="&mvte:global:Search;" /> <input type="hidden" name="Action" value="ADPR" /> <input type="hidden" name="Store_Code" value="&mvte:store:code;" /> <input type="hidden" name="Product_Code" value="&mvte:product:code;" /> <input type="hidden" name="Category_Code" value="&mvte:global:category_code;" /> <input type="hidden" name="Offset" value="&mvte:global:Offset;" /> <input type="hidden" name="AllOffset" value="&mvte:global:AllOffset;" /> <input type="hidden" name="CatListingOffset" value="&mvte:global:CatListingOffset;" /> <input type="hidden" name="RelatedOffset" value="&mvte:global:RelatedOffset;" /> <input type="hidden" name="SearchOffset" value="&mvte:global:SearchOffset;" /> <div class="product-attributes"><mvt:item name="product_attributes" param="product:id" /></div> <div class="purchase-buttons">Quantity: <input type="text" name="Quantity" value="1" class="product-quantity-input textfield" /> <mvt:item name="buttons" param="AddToBasket" /></div> </form> </div> <div class="clear"></div>
Code:
.thumbnails{ display:block; margin:0; padding:0; width:274px; } .thumbnails li{ display:block; float:left; margin:4px 4px 0 0; padding:0; width:42px; height:42px; text-align:center; border:1px solid #eeeeee; cursor:pointer; } .thumbnails li span{ display:inline-block; height:100%; text-align:center; vertical-align:middle; } .thumbnails li img{ vertical-align:middle; } .swatches{ display:inline; margin:0; padding:0; } .swatches li{ display:block; float:left; margin:4px 4px 0 0; padding:0; width:50px; height:50px; text-align:center; border:1px solid #eeeeee; cursor:pointer; } .swatches li span{ display:inline-block; height:100%; text-align:center; vertical-align:middle; } .swatches li img{ vertical-align:middle; } .product-image-margin{ height:8px; } .closeup{ position:absolute; top:75px; padding:10px 10px 5px 10px; background-color:#ffffff; border:1px solid #333333; text-align:center; display:none; z-index:2; min-width:274px; min-height:274px; } .closeup a{ cursor:pointer; margin:5px 0 0 0; z-index:2; } .closeup_backing{ display:none; position:absolute; left:0px; top:0px; background-color:#333333; opacity:0.75; filter:alpha(opacity=75); width:100%; }
Comment