This tutorial has come out of necessity for a homepage featured product slider, I had tried quite a few different tutorials but never achieved what I was looking for. Magento is a great open-source ecommerce package, but Im a little surprised that featured products isn’t a feature built-in. Hopefully this tutorial will help. Help support open source!
Requirements:
Step 1: Create a Feature Products Category.
Make sure the category is directly under your root category, or this will not work.
(see screenshot). Take note of the category ID, you will need this later.
Make sure the category is directly under your root category, or this will not work.
(see screenshot). Take note of the category ID, you will need this later.
Step 2: Create a feature products block
You will need to create featured-products.phtml and place it in /app/design/frontend/yourtheme/template/catalog/product/
You will need to create featured-products.phtml and place it in /app/design/frontend/yourtheme/template/catalog/product/
Use the following code in featured-products.phtml:
========================================
Step 3: Add necessary files to /js directory which is located at the root.
If it doesnt already exist, create a /jquery directory within the /js directory. So your path will look like this: root/js/jquery. Add the following files to the new directory.
If it doesnt already exist, create a /jquery directory within the /js directory. So your path will look like this: root/js/jquery. Add the following files to the new directory.
- easySlider1.7.js
- jquery.1.2.3.js
- add jquery no conflict which prevents jQuery from screwing up prototype which is built into Magento. Make sure that it is added to the very end of the jQuery library file.
===========================
Step 4: Update page.xml to reflect new /js files that were added. The path to page.xml is: /app/design/frontend/yourtheme/layout/page.xml
===============================
Step 5: Update header.phtml to call Slider function. The path to header.phtml is: /app/design/frontend/yourtheme/template/page/html/header.phtml
=========================
Step 6: Add the featured products block to your homepage using the Magento CMS. The category ID can be obtained from the category ID of the featured products category that you setup in Step 1.
===============
Voila! You now should have a featured products slider powered by jQuery and Easy Slider on your homepage. Any products that you add to the featured products category, will show up in this slider. And each subsequent product that is added, will increase the numbered navigation along the bottom.
