Red Duck Studios

Friday, February 27, 2009

Custom Designs For Amazon.com Webstore's

My latest project has been implementing a clients custom eCommerce design into the Amazon.com WebStore platform. Anyone who has ever had to do this I am sure share's my frustration with who ever at Amazon built these templates. The lack of ID tags in the template makes re-styling the parts outside the widget panels using only CSS an arduous process. So that leaves us with a few options, Try to adapt the design to the generic amazon template, or hide the original template and then build our own using javascript and CSS. Changing a clients design because of constraints with the platform usually don't go over well, so i went with the 2nd option. Luckily Amazon expected this and makes information you need available in JavaScript variables on each page (you will need to turn this on for each page in the page settings). They also provide some handy javascript functions to make use of, though i have not seen them documented anywhere. I found them with firebug , which will be your main development tool for this type of work.

The 2nd problem i ran into with working with the Webstore platform was my development environment and where i would host the files used on the site. Amazon provides a file browser that you can upload files to for use in your webstore. But these files just get thrown into an images/ folder with no organization. On a large website that could have thousands of images, CSS, and JavaScript files this is not a good way of doing things. My client already had a linux server so i decided to make use of that as an external repository for files i used in the webstore. I set this server up as static.domain.com (domain.com points to the webstore) and created my file structure for images, CSS, and js files there. The major benefit to this is that now you can work with the files via FTP with your favorite text editor instead of having to constantly work inside the Template Manager of the webstore UI. It also allows me to host custom scripts and databases (accessed via AJAX) on the static server that can can not be hosted on the webstore platform. My client eventually plans to move off the webstore platform to his own shopping cart system, so this way also allows me to build the site in a way that can be moved to a new location/system when the time comes without loosing to much work or having to redo everything.

Speaking of the Template Manager UI for Webstore, I have a few tricks for working with it as well. First make sure you have a copy of the code in you HTML widgets on your computer. I have had them bug out on me before and i lost changes i had made. What i do is for each page in the webstore i modify i create a folder on my system for it. then i make a file call head.htm and put anything i plan to put in the <head> section of that page (using the page settings) in that file. Then i create a file for each widget i may use on that page. I do all my coding in my text editor on my computer and when im ready to see the changes in the webstore i just copy the code into the widget. If anything should ever happen to your webstore template you should then have all the code to rebuild it just with copy/paste and because all your content files are stored on an external server you will never loose them because of a problem with Amazon.

In Short:
  • Host your css, images, javascript, and external scripts on a external webserver if available. You should try and put this server under a subdomain like static.domain.com but it could be any type of web hosting.
  • Keep a file for each section/widget of your webstore you modify in the template manager. Do your coding in your text editor and then copy the code into the widget when you ready. never modify the code directly in the widget editor or you risk loosing your changes.
  • Javascript is your friend. Their will be parts of the amazon template you do not want and can not remove with CSS alone due to the lack of ID tags in the HTML. This is where you will need to perform a little DOM magic and remove these elements with javascript when the page loads. My system has been to write an initPage() function for each page i need to do this on which does all the processing and edits. Then in a widget on the page i use an addLoadEvent(initPage()) call. When the page is loaded the initPage function gets called and renders the page.