I wanted to add a small selection of products to the Magento homepage, and I thought I’d quickly write up how I did it, because it brings together a few little tidbits from around the net. This solution will use a specific category which can either be an actual category with a few products in it (e.g. specials), or one you created specifically for displaying on the home page (let’s call it ‘home page featured’). It takes only 3 simple steps as shown below.
Step 1:
First add this to your CMS page where you want the products to appear (I’ll assume from here on out that it’s your cms home page):
{{block type="catalog/product_list" category_id="YOUR_CATEGORY" template="catalog/product/list.phtml"}}
Notice you have to put your chosen category id in the code where I have YOUR_CATEGORY as a placeholder.
This will make the products show up but you’ll notice two annoying things probably. The first is the category you made for featuring showed up in your navigation menu and second the toolbar for paging and sorting may show up, which you won’t want if you just have 3-6 products featured on your home page.
Step 2:
So the second step is to hide away those toolbars on the cms homepage. We are using a standard magento template to display the prodcts (that’s the template="catalog/product/list.phtml" from above) so it’s cleaner and better for upgrading/template maintenance if we do not go and edit it just to remove the toolbars. Instead let’s just throw a display:none in just for this page on the two css classes that matter, the .pager and .sorter.
That will look like this, notice it is specifically the cms-home page that is being styled, you’d do the same for your page:
.cms-home .pager, .cms-home .sorter {
display: none;
}
So this hides them away, the html is still there, but no one will see it. The template is unchanged, and easily upgradeable.
Now the last issue is the nav menu, if you chose to use a new category especially for home page featured products then you won’t probably want that showing up in the nav menu.
Step 3:
The 3rd and final step is a simple config option to disable categories from showing in the menu. It will allow you to have categories that can be used for display in parts of the store, but that will not show on the menu. The Is Active option is what you need to set to ‘no’ in order to hide the faux category.
Hi! Please explain in what file do you write CSS changes?
ReplyDelete