Image
Extra Module Help for MIVA
Merchant v5
Module
Template Layouts Explained
This
module automatically creates
and assigns the required
item to Category and Product
pages. In order for the
module features to function,
you must incorporate the
provided JavaScript and
tokens or their variations
into your category and/or
product pages. You must
also provide the image
settings for category
and/or product pages where
you would like to use
the features. Tokens can
be used on any product
or category associated
template screens. This
includes individual category
and product headers/footers,
category and product page
headers and footers, category
and product pages, etc..
This page contains a table,
listing all module available
tokens for Category and
Product pages. It also
contains code snippets
for quickly incorporating
the desired features into
your pages. HTML and template
scripting knowledge is
required to make template
modifications. If you
do not have these skills
it is recommended you
contact
ADS representative
to get assistance with
template design and customization.
You
will also need to include
the provided JavaScript
Functions or their variations,
in the HEAD Tag Content
section of your store
settings, to use the module
provided features.
 JavaScript
Functions
<SCRIPT LANGUAGE="JavaScript">
<!--
var popwin = null;
function PopupImage(link,wtitle,w,h)
{
if (popwin) popwin.close();
popwin = window.open("",'popwindow','toolbar=no,location=no,directories=no,status=no,menubar=no,width='+w+',height='+h+',scrollbars=yes,resizable=no,screenX=50,screenY=50,left=50,top=50');
popwin.document.write('<HTML><HEAD><TITLE>'
+ wtitle + '</TITLE><body
topmargin="2"
leftmargin="2"
marginwidth="2"
marginheight="2"
bgcolor="#FFFFFF"
onLoad="self.focus()">');
if (wtitle) popwin.document.write('<CENTER><FONT
SIZE="3" FACE="arial"><B>'
+ wtitle + '</B></FONT></CENTER><BR>');
popwin.document.write('<CENTER><IMG
SRC="' + link + '"
BORDER="0" ALT="'
+ wtitle + '"></CENTER>');
popwin.document.write('<BR><CENTER><A
HREF="javascript:
self.close();"><FONT
SIZE="2" FACE="arial">Close
Window</FONT></A></CENTER>');
popwin.document.write('</BODY></HTML>');
popwin.document.close()
;
//popwin.location.href
= link;
//popwin.focus();
}
function MM_swapImgRestore()
{ //v3.0
var i,x,a=document.MM_sr;
for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)
x.src=x.oSrc;
}
function
MM_findObj(n, d) {
//v4.01
var p,i,x; if(!d)
d=document; if((p=n.indexOf("?"))>0&&parent.frames.length)
{
d=parent.frames[n.substring(p+1)].document;
n=n.substring(0,p);}
if(!(x=d[n])&&d.all)
x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById)
x=d.getElementById(n);
return x;
}
function
MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new
Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x;
if(!x.oSrc) x.oSrc=x.src;
x.src=a[i+2];}
}
//-->
</SCRIPT>
Token
Quick Reference:
Product
Tokens
| Product
Tokens |
Image
URL |
Image
Title |
Image
Link |
Image
Link Target |
Image
Width |
Image
Height |
Complete
Image Tag |
Complete
Image Tag w/ Link |
| Image
1 |
&mvt:ADS_ProdImgs_img1; |
&mvt:ADS_ProdImgs_img1t; |
&mvt:ADS_ProdImgs_img1l; |
&mvt:ADS_ProdImgs_img1lt; |
&mvt:ADS_ProdImgs_img1w; |
&mvt:ADS_ProdImgs_img1h; |
&mvt:ADS_ProdImgs_img1_img |
&mvt:ADS_ProdImgs_img1_imgL; |
| Image
2 |
&mvt:ADS_ProdImgs_img2; |
&mvt:ADS_ProdImgs_img2t; |
&mvt:ADS_ProdImgs_img2l; |
&mvt:ADS_ProdImgs_img2lt; |
&mvt:ADS_ProdImgs_img2w; |
&mvt:ADS_ProdImgs_img2h; |
&mvt:ADS_ProdImgs_img2_img |
&mvt:ADS_ProdImgs_img2_imgL; |
| Image
3 |
&mvt:ADS_ProdImgs_img3; |
&mvt:ADS_ProdImgs_img3t; |
&mvt:ADS_ProdImgs_img3l; |
&mvt:ADS_ProdImgs_img3lt; |
&mvt:ADS_ProdImgs_img3w; |
&mvt:ADS_ProdImgs_img3h; |
&mvt:ADS_ProdImgs_img3_img |
&mvt:ADS_ProdImgs_img3_imgL; |
| Image
4 |
&mvt:ADS_ProdImgs_img4; |
&mvt:ADS_ProdImgs_img4t; |
&mvt:ADS_ProdImgs_img4l; |
&mvt:ADS_ProdImgs_img4lt; |
&mvt:ADS_ProdImgs_img4w; |
&mvt:ADS_ProdImgs_img4h; |
&mvt:ADS_ProdImgs_img4_img |
&mvt:ADS_ProdImgs_img4_imgL; |
| Image
5 |
&mvt:ADS_ProdImgs_img5; |
&mvt:ADS_ProdImgs_img5t; |
&mvt:ADS_ProdImgs_img5l; |
&mvt:ADS_ProdImgs_img5lt; |
&mvt:ADS_ProdImgs_img5w; |
&mvt:ADS_ProdImgs_img5h; |
&mvt:ADS_ProdImgs_img5_img |
&mvt:ADS_ProdImgs_img5_imgL; |
|
Product Slideshow |
<mvt:item
name="ads-imagextra" param="ads_Prodimg_slideshow"/> |
| Image
Popup |
<A
href="javascript: PopupImage('&mvt:ADS_ProdImgs_img1;','&mvt:ADS_ProdImgs_img1t;','520','600');">&mvt:ADS_ProdImgs_img1_img;</A> |
| Image
On Click Swap |
<A
href="javascript:;" onClick="MM_swapImage('myimage','','&mvt:ADS_ProdImgs_img1;',0)">&mvt:ADS_ProdImgs_img1_img;</A> |
| Image
On MouseOver Swap |
<A
href="javascript:;" onMouseOver="MM_swapImage('myimage','','&mvt:ADS_ProdImgs_img1;',0)">&mvt:ADS_ProdImgs_img1_img;</A> |
| Image
On MouseOver Swap w/ restore |
<A
href="javascript:;" onMouseOver="MM_swapImage('myimage','','&mvt:ADS_ProdImgs_img1;',0)"
onMouseOut="MM_swapImgRestore()">&mvt:ADS_ProdImgs_img1_img;</A> |
Example
1: Use the module
to display small versions
of the extra images
on the product page,
just under the product
image and either popup
a full sized image
or replace the existing
product
image onmouseover
or onclick.
-
Click
on Pages in
the left navigation.
-
Click Edit
button next
to PROD Product
Display page.
-
Click on the
Product Display
Layout tab.
-
In the template
code, find
the area where
product image
token(<img
src="&mvt:product:image;"
alt="&mvt:product:name;">)
is and modify
the line to
this:
<img
src="&mvt:product:image;"
alt="&mvt:product:name;"
name="myimage"
><br><br>
-
If
you would
like a popup
window to
open use something
like this
somewhere
below the
images:
<mvt:if
expr="NOT
ISNULL l.settings:ADS_ProdImgs_img1
OR NOT ISNULL
l.settings:ADS_ProdImgs_img2
OR NOT ISNULL
l.settings:ADS_ProdImgs_img3
OR NOT ISNULL
l.settings:ADS_ProdImgs_img4
OR NOT ISNULL
l.settings:ADS_ProdImgs_img5
">
<table
border="1"
cellpadding="2"
cellspacing="0"
bordercolor="#000066">
<tr align="center">
<td colspan="5"><b><font
color="#000099"
size="3"
face="Arial,
Helvetica,
sans-serif">Other
Views</font></b></td>
</tr>
<tr>
<mvt:if
expr="NOT
ISNULL l.settings:ADS_ProdImgs_img1">
<td><A
href="javascript:
PopupImage('&mvt:ADS_ProdImgs_img1;','&mvt:ADS_ProdImgs_img1t;','520','400');">&mvt:ADS_ProdImgs_img1_img;</A></td>
</mvt:if>
<mvt:if
expr="NOT
ISNULL l.settings:ADS_ProdImgs_img2">
<td><A
href="javascript:
PopupImage('&mvt:ADS_ProdImgs_img2;','&mvt:ADS_ProdImgs_img2t;','520','400');">&mvt:ADS_ProdImgs_img2_img;</A></td>
</mvt:if>
<mvt:if
expr="NOT
ISNULL l.settings:ADS_ProdImgs_img3">
<td><A
href="javascript:
PopupImage('&mvt:ADS_ProdImgs_img3;','&mvt:ADS_ProdImgs_img3t;','520','400');">&mvt:ADS_ProdImgs_img3_img;</A></td>
</mvt:if>
<mvt:if
expr="NOT
ISNULL l.settings:ADS_ProdImgs_img4">
<td><A
href="javascript:
PopupImage('&mvt:ADS_ProdImgs_img4;','&mvt:ADS_ProdImgs_img4t;','520','400');">&mvt:ADS_ProdImgs_img4_img;</A></td>
</mvt:if>
<mvt:if
expr="NOT
ISNULL l.settings:ADS_ProdImgs_img5">
<td><A
href="javascript:
PopupImage('&mvt:ADS_ProdImgs_img5;','&mvt:ADS_ProdImgs_img5t;','520','400');">&mvt:ADS_ProdImgs_img5_img;</A></td>
</mvt:if>
</tr>
</table>
</mvt:if>
-
The popup
window is
controlled
by the above
provided by
the Javascript
PopupImage
function,
where the
first parameter
is the image
URL, second
is Image Title,
the last
two parameters
are width
and hight
of the opened
window.
- You
an use variations
of this code to
implement an image
swap onmouseover
or
onclick. Just
replace the above
links with links
form the Product
Tokens table above.
- You
can also modify
the included JavaScript
functions to meet
your needs or
create
your own.
Example
2: Use the module
to display a slideshow
of the available images.
-
Configure
your slideshow
on individual
product or
category pages.
-
Select
an area of
the template
where you
would like
to insert
your slideshow.
Tokens can
be used on
any product
or category
associated
template screens.
This includes
individual
category and
product headers/footers,
category and
product page
headers and
footers, category
and product
pages, etc..
- Insert
an Item token
"<mvt:item
name="ads-imagextra"
param="ads_Prodimg_slideshow"/>"
in the selected
template.
Category
Tokens
| Category
Tokens |
Image
URL |
Image
Title |
Image
Link |
Image
Link Target |
Image
Width |
Image
Height |
Complete
Image Tag |
Complete
Image Tag
w/ Link |
| Image
1 |
&mvt:ADS_CatImgs_img1; |
&mvt:ADS_CatImgs_img1t; |
&mvt:ADS_CatImgs_img1l; |
&mvt:ADS_CatImgs_img1lt; |
&mvt:ADS_CatImgs_img1w; |
&mvt:ADS_CatImgs_img1h; |
&mvt:ADS_CatImgs_img1_img; |
&mvt:ADS_CatImgs_img1_imgL; |
| Image
2 |
&mvt:ADS_CatImgs_img2; |
&mvt:ADS_CatImgs_img2t; |
&mvt:ADS_CatImgs_img2l; |
&mvt:ADS_CatImgs_img2lt; |
&mvt:ADS_CatImgs_img2w; |
&mvt:ADS_CatImgs_img2h; |
&mvt:ADS_CatImgs_img2_img; |
&mvt:ADS_CatImgs_img2_imgL; |
| Image
3 |
&mvt:ADS_CatImgs_img3; |
&mvt:ADS_CatImgs_img3t; |
&mvt:ADS_CatImgs_img3l; |
&mvt:ADS_CatImgs_img3lt; |
&mvt:ADS_CatImgs_img3w; |
&mvt:ADS_CatImgs_img3h; |
&mvt:ADS_CatImgs_img3_img; |
&mvt:ADS_CatImgs_img3_imgL; |
| Image
4 |
&mvt:ADS_CatImgs_img4; |
&mvt:ADS_CatImgs_img4t; |
&mvt:ADS_CatImgs_img4l; |
&mvt:ADS_CatImgs_img4lt; |
&mvt:ADS_CatImgs_img4w; |
&mvt:ADS_CatImgs_img4h; |
&mvt:ADS_CatImgs_img4_img; |
&mvt:ADS_CatImgs_img4_imgL; |
| Image
5 |
&mvt:ADS_CatImgs_img5; |
&mvt:ADS_CatImgs_img5t; |
&mvt:ADS_CatImgs_img5l; |
&mvt:ADS_CatImgs_img5lt; |
&mvt:ADS_CatImgs_img5w; |
&mvt:ADS_CatImgs_img5h; |
&mvt:ADS_CatImgs_img5_img; |
&mvt:ADS_CatImgs_img5_imgL; |
| Category
Slideshow |
<mvt:item
name="ads-imagextra"
param="ads_Catimg_slideshow"/> |
| Image
Popup |
<A
href="javascript:
PopupImage('&mvt:ADS_CatImgs_img1;','&mvt:ADS_CatImgs_img1t;','520','600');">&mvt:ADS_CatImgs_img1_img;</A> |
| Image
On Click Swap |
<A
href="javascript:;"
onClick="MM_swapImage('myimage','','&mvt:ADS_CatImgs_img1;',0)">&mvt:ADS_CatImgs_img1_img;</A> |
| Image
On MouseOver
Swap |
<A
href="javascript:;"
onMouseOver="MM_swapImage('myimage','','&mvt:ADS_CatImgs_img1;',0)">&mvt:ADS_CatImgs_img1_img;</A> |
| Image
On MouseOver
Swap w/ restore |
<A
href="javascript:;"
onMouseOver="MM_swapImage('myimage','','&mvt:ADS_CatImgs_img1;',0)"
onMouseOut="MM_swapImgRestore()">&mvt:ADS_CatImgs_img1_img;</A> |
Please
refer to the product page
examples as a guide. Just
change the token portions
of the code to reflect
the above category image
tokens. In order to use
the onmouseover or onclick
image swap features on
the category pages, you
must have an image somewhere
on the category page named
"myimage".
|
