Announcement

Collapse
No announcement yet.

Production Release 8 CSSUI Template Changes

Collapse
X
Collapse
 
  • Page of 4
  • Filter
  • Time
  • Show
Clear All
new posts
Previous 1 2 3 4 template Next
    #1

    Production Release 8 CSSUI Template Changes

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

    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>
    with...

    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>
    On PROD in the main page template:

    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>
    with...

    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>
    In the advanced mode Product Display Layout template, replace...

    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>
    with...

    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>
    New CSS styles added to cssui.css (these can be added to any existing CSS file or placed in additional CSS files):

    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%;
}
    Last edited by pbrynie; 06-24-11, 11:35 AM.
    Preston Brynie
    Software Developer
    Miva Merchant
    http://www.mivamerchant.com/
    Tags: None
    #2
    Re: Production Release 8 CSSUI Template Changes

    In the Product Attribute Template, replace...

    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: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'">
				<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: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>
    with...

    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: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: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>
    Last edited by pbrynie; 06-24-11, 11:35 AM.
    Preston Brynie
    Software Developer
    Miva Merchant
    http://www.mivamerchant.com/

    Comment

      #3
      Re: Production Release 8 CSSUI Template Changes

      Hello Miva: Attempted to make the suggested template changes to our CSSUI store. After making the suggested change to the PROD Product Display Layout, am unhappy with the changes to the resulting page layout.

      We do not intend to use the thumbprint feature on that page, so can we proceed with our PR8 migration without making any of the suggested template changes?
      Thanks, Larry
      Larry
      Luce Kanun Web Design
      www.facebook.com/wajake41
      www.plus.google.com/116415026668025242914/posts?hl=en


      Comment

        #4
        Re: Production Release 8 CSSUI Template Changes

        What do you mean thumbprint feature? Also these shouldn't have resulted in a layout change. Did you do this on a Dev store where I can see it?
        Last edited by Rick Wilson; 06-25-11, 06:07 AM.
        Thanks,

        Rick Wilson
        CEO
        Miva, Inc.
        [email protected]
        https://www.miva.com

        Comment

          #5
          Re: Production Release 8 CSSUI Template Changes

          Maybe Larry mean thumbnail - unless he has a fancy hand dryer that is thumbprint activated ;)
          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way           (aka Leslie Nord leslienord)
          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment

            #6
            Re: Production Release 8 CSSUI Template Changes

            Hi Leslie: You got a laugh out of me on that one! It must have been later than I thought last night.
            Anyway, my question is for Rick: Since we will not be using the thumb print, er, I mean thumbnail images on the Prod page, can we go to PR8 and not install any of the suggested template changes and be OK?
            I think I know that we can, but just want to be sure before we take our bread & butter site to PR8.
            Thanks, Larry
            Larry
            Luce Kanun Web Design
            www.facebook.com/wajake41
            www.plus.google.com/116415026668025242914/posts?hl=en


            Comment

              #7
              Re: Production Release 8 CSSUI Template Changes

              Hi Rick: No this was on our Production site www.xlerator-hand-dryer.com and the layout change was that the product image was displayed above the product name, number in basket, add button etc. Before the template changes were installed, all of this information was displayed to the right of the product image.

              The bottom line is that we aren't going to use the thumbnails, so I've backed out the PR8 template changes on the PROD page and the site appears to be functioning OK.
              As I said in my prior post, I want to be sure this is OK before we go to PR8 with our MMUI bread & butter store.

              Thanks, Larry
              Larry
              Luce Kanun Web Design
              www.facebook.com/wajake41
              www.plus.google.com/116415026668025242914/posts?hl=en


              Comment

                #8
                Re: Production Release 8 CSSUI Template Changes

                You're assumption is correct, not doing the template changes won't hurt anything, it'll just prevent use of the new Multiple Images and Swatch features.
                Thanks,

                Rick Wilson
                CEO
                Miva, Inc.
                [email protected]
                https://www.miva.com

                Comment

                  #9
                  Re: Production Release 8 CSSUI Template Changes

                  Took our 3 sites (1 MMUI & 2 CSSUI) to PR8 this weekend. No problems, went smooth as silk. Thanks to the Miva testing team that made it so easy.
                  Larry
                  Larry
                  Luce Kanun Web Design
                  www.facebook.com/wajake41
                  www.plus.google.com/116415026668025242914/posts?hl=en


                  Comment

                    #10
                    Re: Production Release 8 CSSUI Template Changes

                    Having another one of those <duh> moments - why doesn't the Full-sized Image display if there are no additional images? Am I missing a setting again?

                    Leslie
                    Leslie Kirk
                    Miva Certified Developer
                    Miva Merchant Specialist since 1997
                    Previously of Webs Your Way                     (aka Leslie Nord leslienord)
                    Email me: [email protected]
                    www.lesliekirk.com

                    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                    Comment

                      #11
                      Re: Production Release 8 CSSUI Template Changes

                      Originally posted by lesliekirk View Post
                      Having another one of those <duh> moments - why doesn't the Full-sized Image display if there are no additional images? Am I missing a setting again?
                      Yup it was a <duh> moment, I forgot about the select Legacy Fallback Image. If it's set to None, then none it will be...
                      Leslie Kirk
                      Miva Certified Developer
                      Miva Merchant Specialist since 1997
                      Previously of Webs Your Way                       (aka Leslie Nord leslienord)
                      Email me: [email protected]
                      www.lesliekirk.com

                      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                      Comment

                        #12
                        Re: Production Release 8 CSSUI Template Changes

                        Originally posted by wajake41 View Post
                        Hi Rick: No this was on our Production site www.xlerator-hand-dryer.com and the layout change was that the product image was displayed above the product name, number in basket, add button etc. Before the template changes were installed, all of this information was displayed to the right of the product image.
                        I am having a similar issue with the content being placed under the images as opposed to the right of the images. I would like to keep the multiple image aspect of the image machine, but would like my content back to the right side.

                        Any help? Thank you

                        Comment

                          #13
                          Re: Production Release 8 CSSUI Template Changes

                          Originally posted by lesliekirk View Post
                          Yup it was a <duh> moment, I forgot about the select Legacy Fallback Image. If it's set to None, then none it will be...
                          Where do you select legacy fallback image?
                          Bill Weiland - Emporium Plus http://www.emporiumplus.com/store.mvc
                          Online Documentation http://www.emporiumplus.com/tk3/v3/doc.htm
                          Question http://www.emporiumplus.com/mivamodu...vc?Screen=SPTS
                          Facebook http://www.facebook.com/EmporiumPlus
                          Twitter http://twitter.com/emporiumplus

                          Comment

                            #14
                            Re: Production Release 8 CSSUI Template Changes

                            In the Product Display Layout Image Dimensions tab
                            Leslie Kirk
                            Miva Certified Developer
                            Miva Merchant Specialist since 1997
                            Previously of Webs Your Way                             (aka Leslie Nord leslienord)
                            Email me: [email protected]
                            www.lesliekirk.com

                            Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

                            Comment

                              #15
                              Re: Production Release 8 CSSUI Template Changes

                              There is no tab that says "image dimensions". Can you be more specific on how to get to the correct place to change that setting?
                              Bill Weiland - Emporium Plus http://www.emporiumplus.com/store.mvc
                              Online Documentation http://www.emporiumplus.com/tk3/v3/doc.htm
                              Question http://www.emporiumplus.com/mivamodu...vc?Screen=SPTS
                              Facebook http://www.facebook.com/EmporiumPlus
                              Twitter http://twitter.com/emporiumplus

                              Comment

                              Previous 1 2 3 4 template Next
                              Working...
                              X