ShopSite Forums

Your source for ShopSite user collaboration

Skip to content

Swap product image based on Option

General ShopSite user discussion
Post a reply

Swap product image based on Option

Postby sheersol » Sat Jul 14, 2007 8:59 am

Hi, I hope someone has run into this. My product has artwork on it and I offer the customer the option to select different artwork. I want to swap the image for the item when the customer selects a different option. Can this be done? And, if so how> Much appreciated.
sheersol
 
Posts: 9
Joined: Mon Jul 09, 2007 7:34 am
Top

Postby sheersol » Fri Jul 20, 2007 6:49 pm

Can someone please help me?

I have the Java script but don't know how to make it work in ShopSite.
sheersol
 
Posts: 9
Joined: Mon Jul 09, 2007 7:34 am
Top

Postby Jim » Sat Jul 21, 2007 6:51 am

Maybe if we saw the code we could help.
Jim
Site Admin
 
Posts: 4953
Joined: Fri Aug 04, 2006 1:42 pm
Location: Utah
Top

Postby sheersol » Sat Jul 21, 2007 7:28 am

Thanks so much for responding. I am loosing my mind on this. I am new to Shopsite.

Here is an example of the Javascript and body text:

<script language="javascript">
<!--


function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="mygallery"><p><select
name="picture" size="1" onChange="showimage()">
<option selected value="blueflower.gif">Blue Flower</option>
<option value="grapes.gif">Grapes</option>
<option value="chili.gif">Chili</option>
</select></p>
</form>
</td>
</tr>
<tr>
<td width="100%"><p align="center"><img src="blueflower.gif" name="pictures" width="99"
height="100"></td>
</tr>
</table>

I am using a custom template that was copied off the sc - gradient1-page template. Most of it is the same as the template. Here is the website www.winebottlecheesetray.com
I manage to make a pop-up but I really want to swap images based on the Artwork option selected.
The artwork is set-up as an Option in the Product page. I am not sure if that is the right way to do this. Any help would be greatly appreciated!
sheersol
 
Posts: 9
Joined: Mon Jul 09, 2007 7:34 am
Top

Postby sheersol » Sat Jul 21, 2007 1:27 pm

I was able to find another script that worked better. The only problem is now I have 2 Options boxes and my Add to Cart is not working. Can anyone tell me what I am doing wrong? Thanks.

#CrossSell-Sky Product Template
#copyright 2006 ShopSite inc. Design by Andy
#Note: subproducts are treated as cross-sell links
#############################
[-- DEFINE SUBPRODUCT --]
#############################
[-- INCLUDE CrossSell-Sky-pr-vars.sst PROCESS --]
[-- IF PRODUCT.DisplayMoreInformationPage --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a href="javascript:__utmLinker(\'[-- PRODUCT.MoreInfoURL --]\');">[-- PRODUCT.Name --]</a>');
</script>
<noscript>
<a href="[-- PRODUCT.MoreInfoURL --]">[-- PRODUCT.Name --]</a>
</noscript>
[-- ELSE --]
<a href="[-- PRODUCT.MoreInfoURL --]">[-- PRODUCT.Name --]</a>
[-- END_IF --]
[-- ELSE --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post" onSubmit="javascript:__utmLinkPost(this)">
[-- ELSE --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
[-- END_IF --]
<span class="subprInfo">[-- PRODUCT.Name --]<br>
[-- VAR.SaleOn "no" --]
[-- IF PRODUCT.SaleOn--]
[-- IF PRODUCT.SaleAmount --]
[-- VAR.SaleOn "yes" --]
[-- Else --]
[-- VAR.SaleOn "no" --]
[-- END_IF --]
[-- END_IF --]

# if merchant wants price displayed
[-- IF PRODUCT.DisplayPrice --]
[-- IF PRODUCT.VariablePrice? --]
[-- PRODUCT.PriceStyle Begin --]
[--STORE.Price --]:[-- STORE.CurrencySymbol --]
[-- PRODUCT.PriceStyle End --]
<input type=text name="[-- PRODUCT.RecordNumber --]:price" size="4" maxlength="10" value="">
[-- ELSE --]

[-- IF VAR.SaleOn "yes" --]
<strike>[-- PRODUCT.Price --]</strike>
[-- PRODUCT.PriceStyle Begin --][-- PRODUCT.SaleAmount --][-- PRODUCT.PriceStyle End --]
[-- IF PRODUCT.AltPrice--]
<strike>[-- PRODUCT.AltPrice --]</strike>
[-- PRODUCT.PriceStyle Begin --][-- PRODUCT.AltSaleAmount --][-- PRODUCT.PriceStyle End --]
[-- END_IF --]


[-- ELSE --]
# product is not on sale
[-- PRODUCT.PriceStyle Begin --][-- PRODUCT.Price --][-- PRODUCT.PriceStyle End --]
[-- IF PRODUCT.AltPrice--]
[-- PRODUCT.AltPrice --]
[-- END_IF --]
[-- END_IF --]
[-- END_IF --]
[-- ELSE --]
# merchant does not want price displayed, but is there a sale price?
[-- IF PRODUCT.VariablePrice? --]
#don't display sale price
[-- ELSE_IF VAR.SaleOn "yes" --]
# display sale price, but not regular price
[-- IF VAR.MoreInfoPage "yes" --]
# do nothing
[-- ELSE --]
<br>
[-- END_IF --]

[-- PRODUCT.PriceStyle Begin --][-- PRODUCT.SaleAmount --][-- PRODUCT.PriceStyle End --]
[-- IF PRODUCT.AltPrice--]
[-- PRODUCT.PriceStyle Begin --][-- PRODUCT.AltSaleAmount --][-- PRODUCT.PriceStyle End --]
[-- END_IF --]

[-- END_IF --]

[-- END_IF --]

<input type=hidden name=storeid value=[-- store_id --]>
<input type=hidden name=dbname value=products>
<input type=hidden name=function value=add>
<input type=hidden name=itemnum value=[-- product.recordnumber --]>

[-- IF VAR.AddButtonGraphic --]
<input type=image class="add" src="[-- OUTPUT_DIRECTORY_URL --]/[-- VAR.Media --]/[-- VAR.AddButtonGraphic --]" name="Add to Cart" alt="Add to Cart">
[-- ELSE_IF ADDIMAGE? --]
<input type=image class="add-img" [--addimage--]>
[-- ELSE --]
<input class="add" type=submit value="[-- ADDTEXT --]">
[-- END_IF --]



</span>
</form>
[-- END_IF --]
#############################
[-- END_DEFINE SUBPRODUCT --]
#############################



######################
[-- DEFINE PRODUCT --]
######################
### Set a bunch of variables ###
[-- VAR.TableLayout no --]
#[-- VAR.Form no --]
[-- VAR.Options no --]
[-- VAR.Quantity no --]
[-- VAR.Graphic no --]
[-- INCLUDE CrossSell-Sky-pr-vars.sst PROCESS --]
### Start the form for Add to Cart button ###

[-- IF ANALYTICS_MULTI_DOMAIN --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post" onSubmit="javascript:__utmLinkPost(this)">
[-- ELSE --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
[-- END_IF --]

<div class="productGraphic" style="text-align: [-- VAR.ProductAlignment --]; float: [-- VAR.ProductFloat --];">
[-- IF PRODUCT.Graphic --]
[-- IF PRODUCT.DisplayMoreInformationPage --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a href="javascript:__utmLinker(\'[-- PRODUCT.MoreInfoURL --]\');">');
</script>
<noscript>
<a href="[-- PRODUCT.MoreInfoURL --]">
</noscript>
[-- ELSE --]
<a href="[-- PRODUCT.MoreInfoURL --]">
[-- END_IF --]
[-- END_IF --]

[-- IF PRODUCT.DisplayGraphic --]
[-- PRODUCT.Graphic --]
<br>Click to enlarge<br>

[-- END_IF --]

[-- IF PRODUCT.DisplayMoreInformationPage --]
</a>
[-- END_IF --]
[-- ELSE --]
<br>
[-- END_IF --]
</div><!-- end productGraphic -->

<div class="productName">
#######
[-- IF PRODUCT.VariablePrice? --]
[-- IF PRODUCT.VariableName? --]
<span class="VariableProductName">
[-- STORE.ProductName --]: <input type=text name="[-- PRODUCT.RecordNumber --]:name" size="20" maxlength="100" value="">
</span>
[-- ELSE --]
[-- IF PRODUCT.DisplayMoreInformationPage --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a class="linkToPage" href="javascript:__utmLinker(\'[-- PRODUCT.MoreInfoURL --]\');">');
</script>
<noscript>
<a class="linkToPage" href="[-- PRODUCT.MoreInfoURL --]">
</noscript>
[-- ELSE --]
<a class="linkToPage" href="[-- PRODUCT.MoreInfoURL --]">
[-- END_IF --]
[-- END_IF --]
[-- IF PRODUCT.DisplayName --]
[-- PRODUCT.NameStyle Begin --][-- PRODUCT.NameSize Begin --]
[-- PRODUCT.Name --]
[-- PRODUCT.NameSize End --][-- PRODUCT.NameStyle End --]
[-- END_IF --]
[-- IF PRODUCT.DisplayMoreInformationPage --]
</a>
[-- END_IF --]
[-- END_IF --]
[-- ELSE --]
[-- IF PRODUCT.DisplayMoreInformationPage --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a class="linkToPage" href="javascript:__utmLinker(\'[-- PRODUCT.MoreInfoURL --]\');">');
</script>
<noscript>
<a class="linkToPage" href="[-- PRODUCT.MoreInfoURL --]">
</noscript>
[-- ELSE --]
<a class="linkToPage" href="[-- PRODUCT.MoreInfoURL --]">
[-- END_IF --]
[-- END_IF --]
[-- IF PRODUCT.DisplayName --]
[-- PRODUCT.NameStyle Begin --][-- PRODUCT.NameSize Begin --]
[-- PRODUCT.Name --]
[-- PRODUCT.NameSize End --][-- PRODUCT.NameStyle End --]
[-- END_IF --]
[-- IF PRODUCT.DisplayMoreInformationPage --]
</a>
[-- END_IF --]
[-- END_IF --]
########
<div class="productDescription">
[-- IF PRODUCT.ProductDescription --]
[-- PRODUCT.DescriptionStyle Begin --][-- PRODUCT.DescriptionSize Begin --]
[-- PRODUCT.ProductDescription --]
[-- PRODUCT.DescriptionSize End --][-- PRODUCT.DescriptionStyle End --]
[-- END_IF --]
</div> <!-- end productDescription -->

[-- IF PRODUCT.DisplaySKU --]
<div class="productSku">
[-- PRODUCT.SKUSize Begin --][-- PRODUCT.SKUStyle Begin --]
[-- STORE.SKU --]
[-- IF PRODUCT.VariablePrice? --]
[-- IF PRODUCT.VariableSKU? --]
<input type=text name="[-- PRODUCT.RecordNumber --]:sku" size="4" maxlength="10" value="">
[-- ELSE --]
[-- PRODUCT.SKU --]
[-- END_IF --]
[-- ELSE --]
[-- PRODUCT.SKU --]
[-- END_IF --]
[-- PRODUCT.SKUStyle End --][-- PRODUCT.SKUSize End --]
</div> <!-- end productSku -->
[-- END_IF --]
</div><!-- end productName -->

# ###################
# # PRODUCT PRICE #
# ###################

[-- VAR.SaleOn "no" --]
[-- IF PRODUCT.SaleOn--]
[-- IF PRODUCT.SaleAmount --]
[-- VAR.SaleOn "yes" --]
[-- Else --]
[-- VAR.SaleOn "no" --]
[-- END_IF --]
[-- END_IF --]

# if merchant wants price displayed
<div class="productPrice">
[-- IF PRODUCT.DisplayPrice --]
[-- IF PRODUCT.VariablePrice? --]
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --]
[--STORE.Price --]:[-- STORE.CurrencySymbol --]
[-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
<input type=text name="[-- PRODUCT.RecordNumber --]:price" size="4" maxlength="10" value="">
[-- ELSE --]

[-- IF VAR.SaleOn "yes" --]
<strike>[-- PRODUCT.Price --]</strike>
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.SaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- IF PRODUCT.AltPrice--]
<strike>[-- PRODUCT.AltPrice --]</strike>
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.AltSaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- END_IF --]
<span class="onsale">[-- STORE.OnSaleText --]</span>

[-- ELSE --]
# product is not on sale
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.Price --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- IF PRODUCT.AltPrice--]
[-- PRODUCT.AltPrice --]
[-- END_IF --]
[-- END_IF --]
[-- END_IF --]
[-- ELSE --]
# merchant does not want price displayed, but is there a sale price?
[-- IF PRODUCT.VariablePrice? --]
#don't display sale price
[-- ELSE_IF VAR.SaleOn "yes" --]
# display sale price, but not regular price
[-- IF VAR.MoreInfoPage "yes" --]
# do nothing
[-- ELSE --]
<br>
[-- END_IF --]

[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.SaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- IF PRODUCT.AltPrice--]
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.AltSaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- END_IF --]
<span class="onsale">[-- STORE.OnSaleText --]</span>
[-- END_IF --]

[-- END_IF --]

</div> <!-- end productPrice -->

<div class="checkout">
# ######################
# # ADD TO CART BUTTON #
# ######################
[-- IF PRODUCT.QuantityPricing --]
<div class="QPtable">
[-- PRODUCT.QuantityPricing --]
</div>
[-- END_IF --]

<input type=hidden name=storeid value=[-- store_id --]>
<input type=hidden name=dbname value=products>
<input type=hidden name=function value=add>
<input type=hidden name=itemnum value=[-- product.recordnumber --]>

[-- IF PRODUCT.DisplayOrderingOptions --]
<SCRIPT language="JavaScript">

/*
Script posted and featured on JavaScript Kit
http://javascriptkit.com
*/

function display_image(form) {
selectionname = form.imagename.options[form.imagename.selectedIndex].text;
selection = form.imagename.options[form.imagename.selectedIndex].value;
PreView = window.open("", "Preview", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,copyhistory=0,width=200,height=255");
PreView.document.open();
PreView.document.write("<HTML><HEAD>");
PreView.document.write("<TITLE>Preview</TITLE>");
PreView.document.write("</HEAD><BODY BGCOLOR=FFFFFF TEXT=000000>");
PreView.document.write("<FORM><CENTER><B><FONT SIZE=+1>" +
selectionname + "</FONT></B><HR>");
PreView.document.write("<IMG HSPACE=0 VSPACE=0 " +
"SRC='" + selection + "'>");
PreView.document.write("<HR><FORM><INPUT TYPE='button' VALUE='Close' " +
"onClick='window.close()'></FORM>");
PreView.document.write("</CENTER>");
PreView.document.write("</BODY></HTML>");
PreView.document.close();
}
</SCRIPT>

<br>Artwork<br>
<FORM>
<select name="imagename" onChange="display_image(this.form)">
<option value="http://winebottlecheesetray.com/store/media/prodimg/blueflower.gif" selected>Blue
Flower
<option value="http://winebottlecheesetray.com/store/media/prodimg/chili.gif">Chili
<option value="http://winebottlecheesetray.com/store/media/prodimg/grapes.gif">Grapes
<option value="http://winebottlecheesetray.com/store/media/prodimg/rooster.gif">Rooster
</select>
</FORM>
[-- IF PRODUCT.OptionText --]
[-- PRODUCT.OptionText --]
[-- END_IF --]
[-- ORDER_OPTION_MENU LINE --]
[-- END_IF --]

[-- IF PRODUCT.DisplayOrderQuantity checked --]
[-- IF PRODUCT.DisplayOrderingOptions --]
#do nothing
[-- ELSE --]
[-- IF VAR.MoreInfoPage "yes" --]
<br>
[-- END_IF --]
[-- END_IF --]
[-- STORE.Qty --] <input type=text size=2 name="[-- PRODUCT.RecordNumber --]:qnty" value="1" >&nbsp;&nbsp;
[-- END_IF --]

[-- IF VAR.AddButtonGraphic --]
<input type=image class="add" src="[-- OUTPUT_DIRECTORY_URL --]/[-- VAR.Media --]/[-- VAR.AddButtonGraphic --]" name="Add to Cart" alt="Add to Cart">
[-- ELSE_IF ADDIMAGE? --]
<input type=image class="add-img" [--addimage--]>
[-- ELSE --]
<input class="add" type=submit value="[-- ADDTEXT --]">
[-- END_IF --]


# ### Product View Cart Button ###
[-- IF ViewImage? --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a class="viewcart-img" href="javascript:__utmLinker(\'[-- SHOPPING_CART_URL --]\');"><img [-- viewimage--]></a>');
</script>
<noscript>
<a class="viewcart-img" href="[-- SHOPPING_CART_URL --]"><img [-- viewimage--]></a>
</noscript>
[-- ELSE --]
<a class="viewcart-img" href="[-- SHOPPING_CART_URL --]"><img [-- viewimage--]></a>
[-- END_IF --]
[-- ELSE --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a class="viewcart" href="javascript:__utmLinker(\'[-- SHOPPING_CART_URL --]\');">[-- ViewText --]</a> ');
</script>
<noscript>
<a class="viewcart" href="[-- SHOPPING_CART_URL --]">[-- ViewText --]</a>
</noscript>
[-- ELSE --]
<a class="viewcart" href="[-- SHOPPING_CART_URL --]">[-- ViewText --]</a>
[-- END_IF --]
[-- END_IF --]
</div><!-- end checkout -->
</form>
[-- END_DEFINE PRODUCT --]


##############################
[-- DEFINE MORE_INFO_PAGE--]
[-- INCLUDE CrossSell-Sky-vars.sst PROCESS --]
[-- INCLUDE CrossSell-Sky-pr-vars.sst PROCESS --]
[-- VAR.define "more_info" --]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
[-- IF PRODUCT.MoreInformationTitle --]
<title>[-- PRODUCT.MoreInformationTitle --]</title>
[-- ELSE --]
<title>[-- STORE.Name --]: [-- PRODUCT.Name --]</title>
[-- END_IF --]
[-- IF PRODUCT.MoreInformationMetaDescription --]
<meta name="description" content="[-- PRODUCT.MoreInformationMetaDescription --]">
[-- ELSE --]
<meta name="description" content="[-- STORE.Name --]: [-- PRODUCT.Name --]">
[-- END_IF --]
[-- IF PRODUCT.MoreInformationMetaKeywords --]
<meta name="keywords" content="[-- PRODUCT.MoreInformationMetaKeywords --]">
[-- ELSE_IF PRODUCT.SearchKeywords --]
<meta name="keywords" content="[-- PRODUCT.SearchKeywords --]">
[-- ELSE --]
<meta name="keywords" content="[-- PRODUCT.Name --], [-- STORE.Name --]">
[-- END_IF --]

<meta name="robots" content="index,follow">

<style type="text/css">
[-- INCLUDE VAR.ThemeCSS PROCESS --]
[-- INCLUDE VAR.MoreInfoCSS PROCESS --]
</style>

[-- INCLUDE VAR.MiniCart-JS PROCESS --]
</head>

<body>
<div id="masthead">
[-- IF MORE_INFO.DisplayPageHeader --]
<div id="univ-header">
[-- HEADER --]
</div>

[-- END_IF --]

[-- IF MiniCart --]
<div id="miniCart">
<script type="text/javascript" language="JavaScript">
DisplayMiniCart("ss_cart_[-- STORE_Serial_Number --]","ItemCount");
</script>
</div>
[-- ELSE --]
<div id="miniCart">
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a class="MiniCart" href="javascript:__utmLinker(\'[-- SHOPPING_CART_URL --]\');">[-- STORE.SC_YourShoppingCart --]</a>');
</script>
<noscript>
<a class="MiniCart" href="[-- SHOPPING_CART_URL --]">[-- STORE.SC_YourShoppingCart --]</a>
</noscript>
[-- ELSE --]
<a class="MiniCart" href="[-- SHOPPING_CART_URL --]">[-- STORE.SC_YourShoppingCart --]</a>
[-- END_IF --]
</div>
[-- END_IF --]
<div id="globalNav">

[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a href="javascript:__utmLinker(\'[-- MyStoreURL --]\');">[-- STORE.Home --]</a>');
</script>
<noscript>
<a href="[-- MyStoreURL --]">[-- STORE.Home --]</a>
</noscript>
[-- ELSE --]
<a href="[-- MyStoreURL --]">[-- STORE.Home --]</a>
[-- END_IF --]

[-- IF STORE.Type "PROFESSIONAL" --]
[-- IF SC_Registration --]
&nbsp;|&nbsp;&nbsp;[-- INCLUDE VAR.CR_JS PROCESS --]
[-- END_IF --]

[-- IF GiftCert --]
&nbsp;|&nbsp;&nbsp;&nbsp;[-- GiftCertLink --]
[-- END_IF --]

[-- IF TELLAFRIEND --]
[-- VAR.tell_friend_link PRODUCT.Name --]
&nbsp;|&nbsp;&nbsp;&nbsp;[-- TELLAFRIEND VAR.tell_friend_link --]
[-- END_IF --]
[-- END_IF --]

</div> <!-- end globalNav -->

</div>
<!-- end masthead -->

<div id="[-- VAR.ContentDivMI --]">

<h2 id="pageName">[-- PRODUCT.Name --]</h2>
<div class="mi-text1">
[-- IF ANALYTICS_MULTI_DOMAIN --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post" onSubmit="javascript:__utmLinkPost(this)">
[-- ELSE --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
[-- END_IF --]
<div class="mi-productBlock">
<div class="mi-productGraphic">
[-- IF PRODUCT.MoreInformationGraphic --]
[-- PRODUCT.MoreInformationGraphic --]
[-- ELSE_IF PRODUCT.DisplayGraphic --]
[-- PRODUCT.Graphic --]
[-- END_IF --]
</div><!-- end productGraphic -->
<div class="mi-productInfowrap">
<div class="mi-productDescription">
[-- IF PRODUCT.MoreInformationText --]
[-- PRODUCT.DescriptionStyle Begin --][-- PRODUCT.DescriptionSize Begin --][-- PRODUCT.MoreInformationText --][-- PRODUCT.DescriptionSize End --][-- PRODUCT.DescriptionStyle End --]
[-- ELSE_IF PRODUCT.ProductDescription --]
[-- PRODUCT.DescriptionStyle Begin --][-- PRODUCT.DescriptionSize Begin --][-- PRODUCT.ProductDescription --][-- PRODUCT.DescriptionSize End --][-- PRODUCT.DescriptionStyle End --]

[-- END_IF --]
</div> <!-- end productDescription -->

<div class="mi-productName">
####################
# PRODUCT NAME #
####################

[-- IF PRODUCT.VariablePrice? --]
[-- IF PRODUCT.VariableName? --]
<span class="VariableProductName">
[-- STORE.ProductName --]: <input type=text name="[-- PRODUCT.RecordNumber --]:name" size="20" maxlength="100" value="">
</span>
[-- ELSE --]
[-- PRODUCT.NameStyle Begin --][-- PRODUCT.NameSize Begin --]
[-- PRODUCT.Name --]
[-- PRODUCT.NameSize End --][-- PRODUCT.NameStyle End --]
[-- END_IF --]
[-- ELSE --]
[-- PRODUCT.NameStyle Begin --][-- PRODUCT.NameSize Begin --]
[-- PRODUCT.Name --]
[-- PRODUCT.NameSize End --][-- PRODUCT.NameStyle End --]
[-- END_IF --]
</div><!-- end mi-productName -->
[-- IF PRODUCT.DisplaySKU --]
<div class="productSku">
[-- PRODUCT.SKUSize Begin --][-- PRODUCT.SKUStyle Begin --]
[-- STORE.SKU --]
[-- IF PRODUCT.VariablePrice? --]
[-- IF PRODUCT.VariableSKU? --]
<input type=text name="[-- PRODUCT.RecordNumber --]:sku" size="4" maxlength="10" value="">
[-- ELSE --]
[-- PRODUCT.SKU --]
[-- END_IF --]
[-- ELSE --]
[-- PRODUCT.SKU --]
[-- END_IF --]
[-- PRODUCT.SKUStyle End --][-- PRODUCT.SKUSize End --]
</div> <!-- end productSku -->
[-- END_IF --]

# ###################
# # PRODUCT PRICE #
# ###################

[-- VAR.SaleOn "no" --]
[-- IF PRODUCT.SaleOn--]
[-- IF PRODUCT.SaleAmount --]
[-- VAR.SaleOn "yes" --]
[-- Else --]
[-- VAR.SaleOn "no" --]
[-- END_IF --]
[-- END_IF --]


# if merchant wants price displayed

<div class="mi-productPrice">
[-- IF PRODUCT.DisplayPrice --]

[-- IF PRODUCT.VariablePrice? --]
<b>[--STORE.Price --]:</b> [-- STORE.CurrencySymbol --]<input type=text name="[-- PRODUCT.RecordNumber --]:price" size="4" maxlength="10" value="">
[-- ELSE --]

[-- IF VAR.SaleOn "yes" --]
<strike>[-- PRODUCT.Price --]</strike>
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.SaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- IF PRODUCT.AltPrice--]
<strike>[-- PRODUCT.AltPrice --]</strike>
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.AltSaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- END_IF --]
<span class="onsale">[-- STORE.OnSaleText --]</span>

[-- ELSE --]
# product is not on sale
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.Price --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- IF PRODUCT.AltPrice--]
[-- PRODUCT.AltPrice --]
[-- END_IF --]
[-- END_IF --]
[-- END_IF --]
[-- ELSE --]
# merchant does not want price displayed, but is there a sale price?
[-- IF PRODUCT.VariablePrice? --]
#don't display sale price
[-- ELSE_IF VAR.SaleOn "yes" --]
# display sale price, but not regular price
[-- IF VAR.MoreInfoPage "yes" --]
# do nothing
[-- ELSE --]
<br>
[-- END_IF --]

[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.SaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- IF PRODUCT.AltPrice--]
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.AltSaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- END_IF --]
<span class="onsale">[-- STORE.OnSaleText --]</span>
[-- END_IF --]

[-- END_IF --]
</div><!-- end mi-productPrice -->



<div class="mi-checkout">
# ######################
# # ADD TO CART BUTTON #
# ######################
[-- IF PRODUCT.QuantityPricing --]
<div class="QPtable">
[-- PRODUCT.QuantityPricing --]
</div>
[-- END_IF --]

<input type=hidden name=storeid value=[-- store_id --]>
<input type=hidden name=dbname value=products>
<input type=hidden name=function value=add>
<input type=hidden name=itemnum value=[-- product.recordnumber --]>

[-- IF PRODUCT.DisplayOrderingOptions --]
#CrossSell-Sky Product Template
#copyright 2006 ShopSite inc. Design by Andy
#Note: subproducts are treated as cross-sell links
#############################
[-- DEFINE SUBPRODUCT --]
#############################
[-- INCLUDE CrossSell-Sky-pr-vars.sst PROCESS --]
[-- IF PRODUCT.DisplayMoreInformationPage --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a href="javascript:__utmLinker(\'[-- PRODUCT.MoreInfoURL --]\');">[-- PRODUCT.Name --]</a>');
</script>
<noscript>
<a href="[-- PRODUCT.MoreInfoURL --]">[-- PRODUCT.Name --]</a>
</noscript>
[-- ELSE --]
<a href="[-- PRODUCT.MoreInfoURL --]">[-- PRODUCT.Name --]</a>
[-- END_IF --]
[-- ELSE --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post" onSubmit="javascript:__utmLinkPost(this)">
[-- ELSE --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
[-- END_IF --]
<span class="subprInfo">[-- PRODUCT.Name --]<br>
[-- VAR.SaleOn "no" --]
[-- IF PRODUCT.SaleOn--]
[-- IF PRODUCT.SaleAmount --]
[-- VAR.SaleOn "yes" --]
[-- Else --]
[-- VAR.SaleOn "no" --]
[-- END_IF --]
[-- END_IF --]

# if merchant wants price displayed
[-- IF PRODUCT.DisplayPrice --]
[-- IF PRODUCT.VariablePrice? --]
[-- PRODUCT.PriceStyle Begin --]
[--STORE.Price --]:[-- STORE.CurrencySymbol --]
[-- PRODUCT.PriceStyle End --]
<input type=text name="[-- PRODUCT.RecordNumber --]:price" size="4" maxlength="10" value="">
[-- ELSE --]

[-- IF VAR.SaleOn "yes" --]
<strike>[-- PRODUCT.Price --]</strike>
[-- PRODUCT.PriceStyle Begin --][-- PRODUCT.SaleAmount --][-- PRODUCT.PriceStyle End --]
[-- IF PRODUCT.AltPrice--]
<strike>[-- PRODUCT.AltPrice --]</strike>
[-- PRODUCT.PriceStyle Begin --][-- PRODUCT.AltSaleAmount --][-- PRODUCT.PriceStyle End --]
[-- END_IF --]


[-- ELSE --]
# product is not on sale
[-- PRODUCT.PriceStyle Begin --][-- PRODUCT.Price --][-- PRODUCT.PriceStyle End --]
[-- IF PRODUCT.AltPrice--]
[-- PRODUCT.AltPrice --]
[-- END_IF --]
[-- END_IF --]
[-- END_IF --]
[-- ELSE --]
# merchant does not want price displayed, but is there a sale price?
[-- IF PRODUCT.VariablePrice? --]
#don't display sale price
[-- ELSE_IF VAR.SaleOn "yes" --]
# display sale price, but not regular price
[-- IF VAR.MoreInfoPage "yes" --]
# do nothing
[-- ELSE --]
<br>
[-- END_IF --]

[-- PRODUCT.PriceStyle Begin --][-- PRODUCT.SaleAmount --][-- PRODUCT.PriceStyle End --]
[-- IF PRODUCT.AltPrice--]
[-- PRODUCT.PriceStyle Begin --][-- PRODUCT.AltSaleAmount --][-- PRODUCT.PriceStyle End --]
[-- END_IF --]

[-- END_IF --]

[-- END_IF --]

<input type=hidden name=storeid value=[-- store_id --]>
<input type=hidden name=dbname value=products>
<input type=hidden name=function value=add>
<input type=hidden name=itemnum value=[-- product.recordnumber --]>

[-- IF VAR.AddButtonGraphic --]
<input type=image class="add" src="[-- OUTPUT_DIRECTORY_URL --]/[-- VAR.Media --]/[-- VAR.AddButtonGraphic --]" name="Add to Cart" alt="Add to Cart">
[-- ELSE_IF ADDIMAGE? --]
<input type=image class="add-img" [--addimage--]>
[-- ELSE --]
<input class="add" type=submit value="[-- ADDTEXT --]">
[-- END_IF --]



</span>
</form>
[-- END_IF --]
#############################
[-- END_DEFINE SUBPRODUCT --]
#############################



######################
[-- DEFINE PRODUCT --]
######################
### Set a bunch of variables ###
[-- VAR.TableLayout no --]
#[-- VAR.Form no --]
[-- VAR.Options no --]
[-- VAR.Quantity no --]
[-- VAR.Graphic no --]
[-- INCLUDE CrossSell-Sky-pr-vars.sst PROCESS --]
### Start the form for Add to Cart button ###

[-- IF ANALYTICS_MULTI_DOMAIN --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post" onSubmit="javascript:__utmLinkPost(this)">
[-- ELSE --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
[-- END_IF --]

<div class="productGraphic" style="text-align: [-- VAR.ProductAlignment --]; float: [-- VAR.ProductFloat --];">
[-- IF PRODUCT.Graphic --]
[-- IF PRODUCT.DisplayMoreInformationPage --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a href="javascript:__utmLinker(\'[-- PRODUCT.MoreInfoURL --]\');">');
</script>
<noscript>
<a href="[-- PRODUCT.MoreInfoURL --]">
</noscript>
[-- ELSE --]
<a href="[-- PRODUCT.MoreInfoURL --]">
[-- END_IF --]
[-- END_IF --]

[-- IF PRODUCT.DisplayGraphic --]
[-- PRODUCT.Graphic --]
<br>Click to enlarge<br>

[-- END_IF --]

[-- IF PRODUCT.DisplayMoreInformationPage --]
</a>
[-- END_IF --]
[-- ELSE --]
<br>
[-- END_IF --]
</div><!-- end productGraphic -->

<div class="productName">
#######
[-- IF PRODUCT.VariablePrice? --]
[-- IF PRODUCT.VariableName? --]
<span class="VariableProductName">
[-- STORE.ProductName --]: <input type=text name="[-- PRODUCT.RecordNumber --]:name" size="20" maxlength="100" value="">
</span>
[-- ELSE --]
[-- IF PRODUCT.DisplayMoreInformationPage --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a class="linkToPage" href="javascript:__utmLinker(\'[-- PRODUCT.MoreInfoURL --]\');">');
</script>
<noscript>
<a class="linkToPage" href="[-- PRODUCT.MoreInfoURL --]">
</noscript>
[-- ELSE --]
<a class="linkToPage" href="[-- PRODUCT.MoreInfoURL --]">
[-- END_IF --]
[-- END_IF --]
[-- IF PRODUCT.DisplayName --]
[-- PRODUCT.NameStyle Begin --][-- PRODUCT.NameSize Begin --]
[-- PRODUCT.Name --]
[-- PRODUCT.NameSize End --][-- PRODUCT.NameStyle End --]
[-- END_IF --]
[-- IF PRODUCT.DisplayMoreInformationPage --]
</a>
[-- END_IF --]
[-- END_IF --]
[-- ELSE --]
[-- IF PRODUCT.DisplayMoreInformationPage --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a class="linkToPage" href="javascript:__utmLinker(\'[-- PRODUCT.MoreInfoURL --]\');">');
</script>
<noscript>
<a class="linkToPage" href="[-- PRODUCT.MoreInfoURL --]">
</noscript>
[-- ELSE --]
<a class="linkToPage" href="[-- PRODUCT.MoreInfoURL --]">
[-- END_IF --]
[-- END_IF --]
[-- IF PRODUCT.DisplayName --]
[-- PRODUCT.NameStyle Begin --][-- PRODUCT.NameSize Begin --]
[-- PRODUCT.Name --]
[-- PRODUCT.NameSize End --][-- PRODUCT.NameStyle End --]
[-- END_IF --]
[-- IF PRODUCT.DisplayMoreInformationPage --]
</a>
[-- END_IF --]
[-- END_IF --]
########
<div class="productDescription">
[-- IF PRODUCT.ProductDescription --]
[-- PRODUCT.DescriptionStyle Begin --][-- PRODUCT.DescriptionSize Begin --]
[-- PRODUCT.ProductDescription --]
[-- PRODUCT.DescriptionSize End --][-- PRODUCT.DescriptionStyle End --]
[-- END_IF --]
</div> <!-- end productDescription -->

[-- IF PRODUCT.DisplaySKU --]
<div class="productSku">
[-- PRODUCT.SKUSize Begin --][-- PRODUCT.SKUStyle Begin --]
[-- STORE.SKU --]
[-- IF PRODUCT.VariablePrice? --]
[-- IF PRODUCT.VariableSKU? --]
<input type=text name="[-- PRODUCT.RecordNumber --]:sku" size="4" maxlength="10" value="">
[-- ELSE --]
[-- PRODUCT.SKU --]
[-- END_IF --]
[-- ELSE --]
[-- PRODUCT.SKU --]
[-- END_IF --]
[-- PRODUCT.SKUStyle End --][-- PRODUCT.SKUSize End --]
</div> <!-- end productSku -->
[-- END_IF --]
</div><!-- end productName -->

# ###################
# # PRODUCT PRICE #
# ###################

[-- VAR.SaleOn "no" --]
[-- IF PRODUCT.SaleOn--]
[-- IF PRODUCT.SaleAmount --]
[-- VAR.SaleOn "yes" --]
[-- Else --]
[-- VAR.SaleOn "no" --]
[-- END_IF --]
[-- END_IF --]

# if merchant wants price displayed
<div class="productPrice">
[-- IF PRODUCT.DisplayPrice --]
[-- IF PRODUCT.VariablePrice? --]
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --]
[--STORE.Price --]:[-- STORE.CurrencySymbol --]
[-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
<input type=text name="[-- PRODUCT.RecordNumber --]:price" size="4" maxlength="10" value="">
[-- ELSE --]

[-- IF VAR.SaleOn "yes" --]
<strike>[-- PRODUCT.Price --]</strike>
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.SaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- IF PRODUCT.AltPrice--]
<strike>[-- PRODUCT.AltPrice --]</strike>
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.AltSaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- END_IF --]
<span class="onsale">[-- STORE.OnSaleText --]</span>

[-- ELSE --]
# product is not on sale
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.Price --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- IF PRODUCT.AltPrice--]
[-- PRODUCT.AltPrice --]
[-- END_IF --]
[-- END_IF --]
[-- END_IF --]
[-- ELSE --]
# merchant does not want price displayed, but is there a sale price?
[-- IF PRODUCT.VariablePrice? --]
#don't display sale price
[-- ELSE_IF VAR.SaleOn "yes" --]
# display sale price, but not regular price
[-- IF VAR.MoreInfoPage "yes" --]
# do nothing
[-- ELSE --]
<br>
[-- END_IF --]

[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.SaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- IF PRODUCT.AltPrice--]
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.AltSaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- END_IF --]
<span class="onsale">[-- STORE.OnSaleText --]</span>
[-- END_IF --]

[-- END_IF --]

</div> <!-- end productPrice -->

<div class="checkout">
# ######################
# # ADD TO CART BUTTON #
# ######################
[-- IF PRODUCT.QuantityPricing --]
<div class="QPtable">
[-- PRODUCT.QuantityPricing --]
</div>
[-- END_IF --]

<input type=hidden name=storeid value=[-- store_id --]>
<input type=hidden name=dbname value=products>
<input type=hidden name=function value=add>
<input type=hidden name=itemnum value=[-- product.recordnumber --]>

[-- IF PRODUCT.DisplayOrderingOptions --]
[-- IF PRODUCT.OptionText --]
[-- PRODUCT.OptionText --]
[-- END_IF --]
[-- ORDER_OPTION_MENU LINE --]
[-- END_IF --]

[-- IF PRODUCT.DisplayOrderQuantity checked --]
[-- IF PRODUCT.DisplayOrderingOptions --]
#do nothing
[-- ELSE --]
[-- IF VAR.MoreInfoPage "yes" --]
<br>
[-- END_IF --]
[-- END_IF --]
[-- STORE.Qty --] <input type=text size=2 name="[-- PRODUCT.RecordNumber --]:qnty" value="1" >&nbsp;&nbsp;
[-- END_IF --]

[-- IF VAR.AddButtonGraphic --]
<input type=image class="add" src="[-- OUTPUT_DIRECTORY_URL --]/[-- VAR.Media --]/[-- VAR.AddButtonGraphic --]" name="Add to Cart" alt="Add to Cart">
[-- ELSE_IF ADDIMAGE? --]
<input type=image class="add-img" [--addimage--]>
[-- ELSE --]
<input class="add" type=submit value="[-- ADDTEXT --]">
[-- END_IF --]


# ### Product View Cart Button ###
[-- IF ViewImage? --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a class="viewcart-img" href="javascript:__utmLinker(\'[-- SHOPPING_CART_URL --]\');"><img [-- viewimage--]></a>');
</script>
<noscript>
<a class="viewcart-img" href="[-- SHOPPING_CART_URL --]"><img [-- viewimage--]></a>
</noscript>
[-- ELSE --]
<a class="viewcart-img" href="[-- SHOPPING_CART_URL --]"><img [-- viewimage--]></a>
[-- END_IF --]
[-- ELSE --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a class="viewcart" href="javascript:__utmLinker(\'[-- SHOPPING_CART_URL --]\');">[-- ViewText --]</a> ');
</script>
<noscript>
<a class="viewcart" href="[-- SHOPPING_CART_URL --]">[-- ViewText --]</a>
</noscript>
[-- ELSE --]
<a class="viewcart" href="[-- SHOPPING_CART_URL --]">[-- ViewText --]</a>
[-- END_IF --]
[-- END_IF --]
</div><!-- end checkout -->
</form>
[-- END_DEFINE PRODUCT --]


##############################
[-- DEFINE MORE_INFO_PAGE--]
[-- INCLUDE CrossSell-Sky-vars.sst PROCESS --]
[-- INCLUDE CrossSell-Sky-pr-vars.sst PROCESS --]
[-- VAR.define "more_info" --]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
[-- IF PRODUCT.MoreInformationTitle --]
<title>[-- PRODUCT.MoreInformationTitle --]</title>
[-- ELSE --]
<title>[-- STORE.Name --]: [-- PRODUCT.Name --]</title>
[-- END_IF --]
[-- IF PRODUCT.MoreInformationMetaDescription --]
<meta name="description" content="[-- PRODUCT.MoreInformationMetaDescription --]">
[-- ELSE --]
<meta name="description" content="[-- STORE.Name --]: [-- PRODUCT.Name --]">
[-- END_IF --]
[-- IF PRODUCT.MoreInformationMetaKeywords --]
<meta name="keywords" content="[-- PRODUCT.MoreInformationMetaKeywords --]">
[-- ELSE_IF PRODUCT.SearchKeywords --]
<meta name="keywords" content="[-- PRODUCT.SearchKeywords --]">
[-- ELSE --]
<meta name="keywords" content="[-- PRODUCT.Name --], [-- STORE.Name --]">
[-- END_IF --]

<meta name="robots" content="index,follow">

<style type="text/css">
[-- INCLUDE VAR.ThemeCSS PROCESS --]
[-- INCLUDE VAR.MoreInfoCSS PROCESS --]
</style>

[-- INCLUDE VAR.MiniCart-JS PROCESS --]
</head>

<body>
<div id="masthead">
[-- IF MORE_INFO.DisplayPageHeader --]
<div id="univ-header">
[-- HEADER --]
</div>

[-- END_IF --]

[-- IF MiniCart --]
<div id="miniCart">
<script type="text/javascript" language="JavaScript">
DisplayMiniCart("ss_cart_[-- STORE_Serial_Number --]","ItemCount");
</script>
</div>
[-- ELSE --]
<div id="miniCart">
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a class="MiniCart" href="javascript:__utmLinker(\'[-- SHOPPING_CART_URL --]\');">[-- STORE.SC_YourShoppingCart --]</a>');
</script>
<noscript>
<a class="MiniCart" href="[-- SHOPPING_CART_URL --]">[-- STORE.SC_YourShoppingCart --]</a>
</noscript>
[-- ELSE --]
<a class="MiniCart" href="[-- SHOPPING_CART_URL --]">[-- STORE.SC_YourShoppingCart --]</a>
[-- END_IF --]
</div>
[-- END_IF --]
<div id="globalNav">

[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a href="javascript:__utmLinker(\'[-- MyStoreURL --]\');">[-- STORE.Home --]</a>');
</script>
<noscript>
<a href="[-- MyStoreURL --]">[-- STORE.Home --]</a>
</noscript>
[-- ELSE --]
<a href="[-- MyStoreURL --]">[-- STORE.Home --]</a>
[-- END_IF --]

[-- IF STORE.Type "PROFESSIONAL" --]
[-- IF SC_Registration --]
&nbsp;|&nbsp;&nbsp;[-- INCLUDE VAR.CR_JS PROCESS --]
[-- END_IF --]

[-- IF GiftCert --]
&nbsp;|&nbsp;&nbsp;&nbsp;[-- GiftCertLink --]
[-- END_IF --]

[-- IF TELLAFRIEND --]
[-- VAR.tell_friend_link PRODUCT.Name --]
&nbsp;|&nbsp;&nbsp;&nbsp;[-- TELLAFRIEND VAR.tell_friend_link --]
[-- END_IF --]
[-- END_IF --]

</div> <!-- end globalNav -->

</div>
<!-- end masthead -->

<div id="[-- VAR.ContentDivMI --]">

<h2 id="pageName">[-- PRODUCT.Name --]</h2>
<div class="mi-text1">
[-- IF ANALYTICS_MULTI_DOMAIN --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post" onSubmit="javascript:__utmLinkPost(this)">
[-- ELSE --]
<form action="[-- SHOPPING_CART_URL BASE --]/order.cgi" method="post">
[-- END_IF --]
<div class="mi-productBlock">
<div class="mi-productGraphic">
[-- IF PRODUCT.MoreInformationGraphic --]
[-- PRODUCT.MoreInformationGraphic --]
[-- ELSE_IF PRODUCT.DisplayGraphic --]
[-- PRODUCT.Graphic --]
[-- END_IF --]
</div><!-- end productGraphic -->
<div class="mi-productInfowrap">
<div class="mi-productDescription">
[-- IF PRODUCT.MoreInformationText --]
[-- PRODUCT.DescriptionStyle Begin --][-- PRODUCT.DescriptionSize Begin --][-- PRODUCT.MoreInformationText --][-- PRODUCT.DescriptionSize End --][-- PRODUCT.DescriptionStyle End --]
[-- ELSE_IF PRODUCT.ProductDescription --]
[-- PRODUCT.DescriptionStyle Begin --][-- PRODUCT.DescriptionSize Begin --][-- PRODUCT.ProductDescription --][-- PRODUCT.DescriptionSize End --][-- PRODUCT.DescriptionStyle End --]

[-- END_IF --]
</div> <!-- end productDescription -->

<div class="mi-productName">
####################
# PRODUCT NAME #
####################

[-- IF PRODUCT.VariablePrice? --]
[-- IF PRODUCT.VariableName? --]
<span class="VariableProductName">
[-- STORE.ProductName --]: <input type=text name="[-- PRODUCT.RecordNumber --]:name" size="20" maxlength="100" value="">
</span>
[-- ELSE --]
[-- PRODUCT.NameStyle Begin --][-- PRODUCT.NameSize Begin --]
[-- PRODUCT.Name --]
[-- PRODUCT.NameSize End --][-- PRODUCT.NameStyle End --]
[-- END_IF --]
[-- ELSE --]
[-- PRODUCT.NameStyle Begin --][-- PRODUCT.NameSize Begin --]
[-- PRODUCT.Name --]
[-- PRODUCT.NameSize End --][-- PRODUCT.NameStyle End --]
[-- END_IF --]
</div><!-- end mi-productName -->
[-- IF PRODUCT.DisplaySKU --]
<div class="productSku">
[-- PRODUCT.SKUSize Begin --][-- PRODUCT.SKUStyle Begin --]
[-- STORE.SKU --]
[-- IF PRODUCT.VariablePrice? --]
[-- IF PRODUCT.VariableSKU? --]
<input type=text name="[-- PRODUCT.RecordNumber --]:sku" size="4" maxlength="10" value="">
[-- ELSE --]
[-- PRODUCT.SKU --]
[-- END_IF --]
[-- ELSE --]
[-- PRODUCT.SKU --]
[-- END_IF --]
[-- PRODUCT.SKUStyle End --][-- PRODUCT.SKUSize End --]
</div> <!-- end productSku -->
[-- END_IF --]

# ###################
# # PRODUCT PRICE #
# ###################

[-- VAR.SaleOn "no" --]
[-- IF PRODUCT.SaleOn--]
[-- IF PRODUCT.SaleAmount --]
[-- VAR.SaleOn "yes" --]
[-- Else --]
[-- VAR.SaleOn "no" --]
[-- END_IF --]
[-- END_IF --]


# if merchant wants price displayed

<div class="mi-productPrice">
[-- IF PRODUCT.DisplayPrice --]

[-- IF PRODUCT.VariablePrice? --]
<b>[--STORE.Price --]:</b> [-- STORE.CurrencySymbol --]<input type=text name="[-- PRODUCT.RecordNumber --]:price" size="4" maxlength="10" value="">
[-- ELSE --]

[-- IF VAR.SaleOn "yes" --]
<strike>[-- PRODUCT.Price --]</strike>
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.SaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- IF PRODUCT.AltPrice--]
<strike>[-- PRODUCT.AltPrice --]</strike>
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.AltSaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- END_IF --]
<span class="onsale">[-- STORE.OnSaleText --]</span>

[-- ELSE --]
# product is not on sale
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.Price --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- IF PRODUCT.AltPrice--]
[-- PRODUCT.AltPrice --]
[-- END_IF --]
[-- END_IF --]
[-- END_IF --]
[-- ELSE --]
# merchant does not want price displayed, but is there a sale price?
[-- IF PRODUCT.VariablePrice? --]
#don't display sale price
[-- ELSE_IF VAR.SaleOn "yes" --]
# display sale price, but not regular price
[-- IF VAR.MoreInfoPage "yes" --]
# do nothing
[-- ELSE --]
<br>
[-- END_IF --]

[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.SaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- IF PRODUCT.AltPrice--]
[-- PRODUCT.PriceSize Begin --][-- PRODUCT.PriceStyle Begin --][-- PRODUCT.AltSaleAmount --][-- PRODUCT.PriceStyle End --][-- PRODUCT.PriceSize End --]
[-- END_IF --]
<span class="onsale">[-- STORE.OnSaleText --]</span>
[-- END_IF --]

[-- END_IF --]
</div><!-- end mi-productPrice -->



<div class="mi-checkout">
# ######################
# # ADD TO CART BUTTON #
# ######################
[-- IF PRODUCT.QuantityPricing --]
<div class="QPtable">
[-- PRODUCT.QuantityPricing --]
</div>
[-- END_IF --]

<input type=hidden name=storeid value=[-- store_id --]>
<input type=hidden name=dbname value=products>
<input type=hidden name=function value=add>
<input type=hidden name=itemnum value=[-- product.recordnumber --]>

[-- IF PRODUCT.DisplayOrderingOptions --]
[-- IF PRODUCT.OptionText --]
[-- PRODUCT.OptionText --]
[-- END_IF --]
[-- ORDER_OPTION_MENU LINE --]
[-- END_IF --]

[-- IF PRODUCT.DisplayOrderQuantity checked --]
[-- IF PRODUCT.DisplayOrderingOptions --]
#do nothing
[-- ELSE --]
[-- IF VAR.MoreInfoPage "yes" --]
<br>
[-- END_IF --]
[-- END_IF --]
[-- STORE.Qty --] <input type=text size=2 name="[-- PRODUCT.RecordNumber --]:qnty" value="1" >&nbsp;&nbsp;
[-- END_IF --]

[-- IF VAR.AddButtonGraphic --]
<input type=image class="add" src="[-- OUTPUT_DIRECTORY_URL --]/[-- VAR.Media --]/[-- VAR.AddButtonGraphic --]" name="Add to Cart" alt="Add to Cart">
[-- ELSE_IF ADDIMAGE? --]
<input type=image class="add-img" [--addimage--]>
[-- ELSE --]
<input class="add" type=submit value="[-- ADDTEXT --]">
[-- END_IF --]

# ### Product View Cart Button ###
[-- IF ViewImage? --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a class="viewcart-img" href="javascript:__utmLinker(\'[-- SHOPPING_CART_URL --]\');"><img [-- viewimage--]></a>');
</script>
<noscript>
<a class="viewcart-img" href="[-- SHOPPING_CART_URL --]"><img [-- viewimage--]></a>
</noscript>
[-- ELSE --]
<a class="viewcart-img" href="[-- SHOPPING_CART_URL --]"><img [-- viewimage--]></a>
[-- END_IF --]
[-- ELSE --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a class="viewcart" href="javascript:__utmLinker(\'[-- SHOPPING_CART_URL --]\');">[-- ViewText --]</a>');
</script>
<noscript>
<a class="viewcart" href="[-- SHOPPING_CART_URL --]">[-- ViewText --]</a>
</noscript>
[-- ELSE --]
<a class="viewcart" href="[-- SHOPPING_CART_URL --]">[-- ViewText --]</a>
[-- END_IF --]
[-- END_IF --]
</div><!-- end mi-checkout -->
</div><!-- end productInfowrap -->

<div class="clear"></div>

</div> <!-- end productBlock -->
</form>
</div><!-- end text1 -->

</div><!--end [-- VAR.ContentDivMI --] -->

[-- IF VAR.DisplayNavMI "yes" --]
<div id="navBar">
[-- IF STORE.Type "STARTER" --]
#no search
[-- ELSE --]
[-- IF VAR.ShowSearchField "Yes" --]
<div id="search">
<h2>[-- STORE.175 --]</h2>
[-- IF ANALYTICS_MULTI_DOMAIN --]
<form action="[-- SHOPPING_CART_URL Base --]/productsearch.cgi?storeid=[-- STORE.ID --]" method="post" onSubmit="javascript:__utmLinkPost(this)">
[-- ELSE --]
<form action="[-- SHOPPING_CART_URL Base --]/productsearch.cgi?storeid=[-- STORE.ID --]" method="post">
[-- END_IF --]
<input type=text name="search_field" size=15>
<input type=hidden name="storeid" value="[-- STORE.ID --]">
<input type=submit value="[-- STORE.177 --]">
</form>
</div>
[-- END_IF --]
[-- END_IF --]
[-- IF PRODUCT.NumSubProducts "0" --]
[-- ELSE --]
<div id="sectionLinks">
<h3>Related Items:</h3>
<ul>
[-- LOOP SUBPRODUCTS --]
<li>[-- SUBPRODUCTS --]</li>
[-- END_LOOP SUBPRODUCTS --]
</ul>
</div>
[-- END_IF --]

<div id="text2" class="text2-empty" style="padding: 0;"></div>

</div> <!--end navbar -->
[-- END_IF --]

<div id="footer">
<div id="footerContents">
[-- IF MORE_INFO.DisplayPageFooter --]
[-- FOOTER --]
[-- ELSE --]
&nbsp;
[-- END_IF --]
</div>
</div>

</body>
</html>
[-- END_DEFINE MORE_INFO_PAGE --]

[-- IF PRODUCT.OptionText --]
[-- PRODUCT.OptionText --]
[-- END_IF --]
[-- ORDER_OPTION_MENU LINE --]
[-- END_IF --]

[-- IF PRODUCT.DisplayOrderQuantity checked --]
[-- IF PRODUCT.DisplayOrderingOptions --]
#do nothing
[-- ELSE --]
[-- IF VAR.MoreInfoPage "yes" --]
<br>
[-- END_IF --]
[-- END_IF --]
[-- STORE.Qty --] <input type=text size=2 name="[-- PRODUCT.RecordNumber --]:qnty" value="1" >&nbsp;&nbsp;
[-- END_IF --]

[-- IF VAR.AddButtonGraphic --]
<input type=image class="add" src="[-- OUTPUT_DIRECTORY_URL --]/[-- VAR.Media --]/[-- VAR.AddButtonGraphic --]" name="Add to Cart" alt="Add to Cart">
[-- ELSE_IF ADDIMAGE? --]
<input type=image class="add-img" [--addimage--]>
[-- ELSE --]
<input class="add" type=submit value="[-- ADDTEXT --]">
[-- END_IF --]

# ### Product View Cart Button ###
[-- IF ViewImage? --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a class="viewcart-img" href="javascript:__utmLinker(\'[-- SHOPPING_CART_URL --]\');"><img [-- viewimage--]></a>');
</script>
<noscript>
<a class="viewcart-img" href="[-- SHOPPING_CART_URL --]"><img [-- viewimage--]></a>
</noscript>
[-- ELSE --]
<a class="viewcart-img" href="[-- SHOPPING_CART_URL --]"><img [-- viewimage--]></a>
[-- END_IF --]
[-- ELSE --]
[-- IF ANALYTICS_MULTI_DOMAIN --]
<script type="text/javascript" language="JavaScript">
document.write('<a class="viewcart" href="javascript:__utmLinker(\'[-- SHOPPING_CART_URL --]\');">[-- ViewText --]</a>');
</script>
<noscript>
<a class="viewcart" href="[-- SHOPPING_CART_URL --]">[-- ViewText --]</a>
</noscript>
[-- ELSE --]
<a class="viewcart" href="[-- SHOPPING_CART_URL --]">[-- ViewText --]</a>
[-- END_IF --]
[-- END_IF --]
</div><!-- end mi-checkout -->
</div><!-- end productInfowrap -->

<div class="clear"></div>

</div> <!-- end productBlock -->
</form>
</div><!-- end text1 -->

</div><!--end [-- VAR.ContentDivMI --] -->

[-- IF VAR.DisplayNavMI "yes" --]
<div id="navBar">
[-- IF STORE.Type "STARTER" --]
#no search
[-- ELSE --]
[-- IF VAR.ShowSearchField "Yes" --]
<div id="search">
<h2>[-- STORE.175 --]</h2>
[-- IF ANALYTICS_MULTI_DOMAIN --]
<form action="[-- SHOPPING_CART_URL Base --]/productsearch.cgi?storeid=[-- STORE.ID --]" method="post" onSubmit="javascript:__utmLinkPost(this)">
[-- ELSE --]
<form action="[-- SHOPPING_CART_URL Base --]/productsearch.cgi?storeid=[-- STORE.ID --]" method="post">
[-- END_IF --]
<input type=text name="search_field" size=15>
<input type=hidden name="storeid" value="[-- STORE.ID --]">
<input type=submit value="[-- STORE.177 --]">
</form>
</div>
[-- END_IF --]
[-- END_IF --]
[-- IF PRODUCT.NumSubProducts "0" --]
[-- ELSE --]
<div id="sectionLinks">
<h3>Related Items:</h3>
<ul>
[-- LOOP SUBPRODUCTS --]
<li>[-- SUBPRODUCTS --]</li>
[-- END_LOOP SUBPRODUCTS --]
</ul>
</div>
[-- END_IF --]

<div id="text2" class="text2-empty" style="padding: 0;"></div>

</div> <!--end navbar -->
[-- END_IF --]

<div id="footer">
<div id="footerContents">
[-- IF MORE_INFO.DisplayPageFooter --]
[-- FOOTER --]
[-- ELSE --]
&nbsp;
[-- END_IF --]
</div>
</div>

</body>
</html>
[-- END_DEFINE MORE_INFO_PAGE --]
sheersol
 
Posts: 9
Joined: Mon Jul 09, 2007 7:34 am
Top

Postby JeremeD » Tue Aug 07, 2007 11:11 pm

It would be best to do this on your more information page instead of at the product listing. It's a little more involved to make it work on the product listing page.

You need to change a few things. All of these steps should be performed on the more info section of your product template.

First, find your [-- Product.MoreInformationGraphic --] tag and replace it with this:

Code: Select all
<img [-- Product.MoreInformationGraphic REMOVE_HTML --] id="mainImage">


Next, locate the <body> tag and change it to this:

Code: Select all
<body onload="doOrderingOptions();">


Now, find the [-- Order_Option_Menu Line --] tag and change it like this:

Code: Select all
<div id="orderingOptions">
[-- Order_Option_Menu Line --]
</div>


Lastly, place this script somewhere in the page:


Code: Select all
<script language="JavaScript" type="text/javascript">

function doOrderingOptions() {

 var artwork1 = 'http://winebottlecheesetray.com/store/media/prodimg/blueflower.gif';
 var artwork2 = 'http://winebottlecheesetray.com/store/media/prodimg/chili.gif';
 var artwork3 = 'http://winebottlecheesetray.com/store/media/prodimg/grapes.gif';
 var artwork4 = 'http://winebottlecheesetray.com/store/media/prodimg/rooster.gif';
 var orderingOptions = document.getElementById('orderingOptions').getElementsByTagName('select')
 var mainImage = document.getElementById('mainImage')
 
 for ( i=0; i<orderingOptions.length; i++ ) {

  orderingOptions[0].onchange = function() {

   mainImage.removeAttribute('height');
   mainImage.removeAttribute('width');

   if ( orderingOptions[0].selectedIndex == "0" ) {

    mainImage.src = artwork1;

   } else if ( orderingOptions[0].selectedIndex == "1" ) {

    mainImage.src = artwork2;

   } else if ( orderingOptions[0].selectedIndex == "3" ) {

    mainImage.src = artwork3;

   } else if ( orderingOptions[0].selectedIndex == "5" ) {

    mainImage.src = artwork4;

   }

  }

 }

}

</script>
SD360.com
Certified ShopSite Designer
ShopSite Templates Available Now
JeremeD
 
Posts: 60
Joined: Sat Feb 10, 2007 4:20 pm
Location: Athens, GA
Top
Post a reply

Return to User Forum

Who is online

Users browsing this forum: No registered users and 54 guests

Powered by phpBB® Forum Software © phpBB Group