Magic Zoom™ for NetSuite
 |
Hover over the image! Download it for your NetSuite website. |
Install now
- Download the Magic Zoom™ demo or buy the full version.
- Upload magiczoom.js and magiczoom.css to your file cabinet, at:
"Documents > Files > File Cabinet > Web Site Hosting Files > Staging Hosting Files > site" - Point your domain name's test URL to your NetSuite site e.g. http://test.example.com.
- Register your test URL in the Domains section like so:
“Hosted As=Web Store”, “Web Site=yourdomainname”, and “HTML Hosting Root=Staging Hosting Files”. - Upload your product images to this location: “Lists > Web Site > Images” and set your desired image sizes for the small image and large: “Setup > Web Site > Image Resizing”.
- Reference the CSS and JS files via the “Addition to <head>” section of the “General” tab, at: “Setup > Web Site > Themes”. Alternatively, reference these two files in each of your lower level Item/Category Templates, in the “Addition to <head>” section, at: “Setup > Web Site > Item/Category Templates”.
- The code added to your <head> should look something like this:
<meta http-equiv="imagetoolbar" content="no" />
<link rel="stylesheet" href="/site/magiczoom.css" type="text/css" media="screen" />
<script src="/site/magiczoom.js" type="text/javascript"></script>
The code added to your <body> should look something like this:
<a href="<%=getCurrentAttribute('item','storeDisplayImage')%>" class="MagicZoom">
<img src="<%=getCurrentAttribute('item','storeDisplayImage')%>" alt="" height="300" width="300">
Multiple images
Instructions for adding zooming to multiple product images on the same page:
- Add custom fields, to hold the images in the template, within NetSuite at:
“Setup > Customization > Item Fields” - Create new custom fields, enough to hold the maximum number of alternate images for any one item in your inventory. Your parameters should look something like this:
Label: Alternate Image01 (use 2 digit numbers starting with 01)
ID: _alternateimage01 (when saved, NetSuite adds the prefix “custitem”)
Owner: select from dropdown menu
Type: Image
Store Value: check
Applies To: check appropriate item type, e.g. Inventory Item
Display: Subtab: Select Inventory from the dropdown menu - Add alternate images to each of your items at:
“List > Website > Items”
“Inventory” tab> list all appropriate Alternate Images for each item here - Find the appropriate place in your Item/Category Template code, and add the following code. For example, you need to add an additional row, and span across 3 columns, in the Products (item drilldown) Item/Category Template. Add your desired height and width parameters for your alternate images. Hint: click on the outside of the NetSuite code window, before clicking Save, and NetSuite will automatically do a background syntax check.
- Your code should look something like this:
<TR><TD colspan=3>
<script type="text/javascript">
<!--
var altimages = new Array(
"<%=getCurrentAttribute('item','custitem_alternateimage01')%>" ,
"<%=getCurrentAttribute('item','custitem_alternateimage02')%>" ,
"<%=getCurrentAttribute('item','custitem_alternateimage03')%>" ,
"<%=getCurrentAttribute('item','custitem_alternateimage04')%>" ,
"<%=getCurrentAttribute('item','custitem_alternateimage05')%>" ,
"<%=getCurrentAttribute('item','custitem_alternateimage06')%>" ,
"<%=getCurrentAttribute('item','custitem_alternateimage07')%>" ,
"<%=getCurrentAttribute('item','custitem_alternateimage08')%>" ,
"<%=getCurrentAttribute('item','custitem_alternateimage09')%>"
);
for (var i = 0; i < altimages.length; i++) {
if (altimages[i] == "" || altimages[i].substr(0,6) == "[Error") {
}
else {
if (i == 0) {
document.write("<BR><BR>Alternate images:<BR><BR>");
}
document.write(
"<a href=\"" + altimages[i] + "\" " +
"rel=\"mainImage\" " +
"rev=\"" + altimages[i] + "\" " +
">" +
"<img src=\"" + altimages[i] + "\" " +
"height=\"80\" width=\"80\" alt=\"\"/>" +
"</a>"
);
document.write(" ");
}
}
//-->
</script>
</TD></TR>
- Add id=”mainImage” to your code, which now should look like this:
<body>
<!-- Default image sizes set in Image Resizing; Returns URL (Big Image) and IMG Tag HTML (Small Image) respectively -->
<!-- IMG Tag and attributes, instead of attribute “storedisplayimagehtml”, required here for Alternate Image process -->
<!-- Set your desired height & width parameters -->
<a href="<%=getCurrentAttribute('item','storeDisplayImage')%>" id=”mainImage” class="MagicZoom">
<img src="<%=getCurrentAttribute('item','storeDisplayImage')%>" alt="" height="300" width="300">
</body>
Notes
- NetSuite requires only one image for a product and resizes it dynamically as it is used across your site. NetSuite does not require you to upload different sizes for the same image. Images uploaded can have a width or length of up to 5000 pixels.
- For help pointing your domain name to your NetSuite website, see: Pointing Domain Names at NetSuite.
- When you test your changes, force refresh the page so that all files are downloaded again and not from your browser cache. If your changes do not readily appear, use “Setup > Web Site > Preview Web Site” to test your changes instead.
- Further information about the NetSuite web store.
- Special thanks to Gary Johnson for his help in integrating the tools for NetSuite.
Other NetSuite
Modules and Plugins
- CS-Cart module for Magic Zoom
- Magento module for Magic Zoom
- VirtueMart module for Magic Zoom
- Joomla 1.5 module for Magic Zoom
- PrestaShop module for Magic Zoom
- osCommerce 3 module for Magic Zoom
- Zen Cart module for Magic Zoom
- WordPress plugin for Magic Zoom
- WordPress e-Commerce plugin for Magic Zoom
- CRE Loaded module for Magic Zoom
- CubeCart module for Magic Zoom
- xt:Commerce module for Magic Zoom
- NetSuite for Magic Zoom
- Drupal 6 module for Magic Zoom
- X-Cart module for Magic Zoom
- Gallery module for Magic Zoom
- WYSIWYG extension for Magic Zoom
- OXID module for Magic Zoom
- eBay for Magic Zoom
- osCMax module for Magic Zoom
Guarantee
30 day money-back guarantee.
100% Support
30 minutes free technical support.