How To Add An Image Rotator In Magento
February 18th, 2010
On one of our recent projects, the client requested an image-rotator to display catalog images on their Magento eCommerce site. Since we wanted a simple-to-update solution, after some diligent searching, we came across a fairly obvious one. This article will discuss how to add an image rotator to a Magento eCommerce store.
Required Files and Tools
1. A working installation of Magento. This is beyond the scope of this article, but once you have it up and running, all the work we will be doing will be under CMS | Manage Pages from the Admin Panel.
2. The Free XML Banner Rotator from Flabell. You will need to register an account on the site, which is strongly encouraged, as Flabell is an excellent source for free and commercial Flash utilities.
3. A combination of text editor and FTP client. Respectively, Notepad++ and FileZilla make a good team for this, since you can navigate to a remote folder, right-click on the file you wish to edit, select “View/Edit”, and have the file open in Notepad++; saving and returning to FileZilla automatically causes FZ to prompt you to upload the changes to the site. To configure your preferred editor, in Notepad++ navigate to Edit | Settings | File Editing, and configure the “Use custom editor” option.
Required Steps
1. Unzip the contents of the Free XML Banner Rotator, and from XML Banner Rotator_update02\project\deploy, upload preview.swf, banner/, and js/, to your Magento site’s root folder. Open the index.html file, and copy the contents of this file between the <body> and </body> (but not including those) tags.
2. Back in the Magento CMS static page editor, edit the Home page, then paste the HTML copied from #1 into the Content text area found under the General Information tab. Save your work.
3. Now that the Home page of the CMS is set up, if you visit your site URL, you should see the stock images and text begin to load.
4. Using your FTP client, navigate to ftp://your-site/xml/, and edit banner.xml to the desired effect. Refer to Flabell’s documentation under the Help section for this topic.
5. Finally, upload your desired images, via FTP, to ftp://your-site/banner/content/images/.
6. Visit your site once more, and you should begin to see your images rotate.
Happy web-mastering!
