Customizing Magento Catalog Page
If you are like most web developers, you are never happy with the defaults. And so almost every eCommerce shop needs to be customized beyond the defaults. Magento, does an awesome job, by given you flexibility to alter templates without touching the core files. However, to accomplish customizing the category page with your own attributes, it “WILL” require you to modify one core directory with a new file.
In the following examples, I will show you how to sell shoes, no just kidding! I will show you how to display the custom shoe type and sizes available on the category page.
Step 1. Create the xml
The Mage Core Mod
Inside your /magento_install/app/etc/modules/ directory, create a new file and call it whatever you want; I called mine custom_attributes.xml.
- 1.2.x and Similar
- Ubuntu Server (Linux)
- Moderate
- Core files and template files.
- Don’t use a live site for testing.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?xml version="1.0"?>
<config>
<frontend>
<product>
<collection>
<attributes>
<custom_shoe_type/>
<custom_shoe_sizes/>
</attributes>
</collection>
</product>
</frontend>
</config>
|
You can add many more custom attributes to this xml, like ; can_be_trailered, weight_of_shoe, etc…
Step 2. Customize the catalog page.
The Template Mod
First, go to your backend and create the attributes, custom_shoe_type and custom_shoe_sizes. Then assign the attributes to your attribute set according to the product(s) you want to customize. After, this you want to edit your products, and add your text to the input, for each custom attribute. Now go, inside your /magento_install/app/…/template/catalog/product/list.phtml page, apply any of the following codes from the examples to both or one of the layouts; Grid Mode or List Mode to get the following desired results.
Example 1:
In this how to example, I will show you how to display custom shoe type above all the product images within this attribute set:
Optional: You can add style by enclosing the php with divs and assigning my_personal_style class.
1 2 3 4 5 6 7 8 9 10 | <li class="item">
<!--insert custom attribute-->
<?php if($_product->getcustom_shoe_type()): ?>
<div class="my_personal_style">
<?php echo $this->htmlEscape($_product->getAttributeText('custom_shoe_type')); ?>
</div>
<?php endif; ?>
<!--//end insert custom attribute-->
<p class="product-image"> |
So, in this example we used a getAttributeText, which will do just that. It will get the the custom_shoe_type attribute text, which in this case is either sandals, dress shoes, or sneakers. It will display one of these shoe types above the image.
Example 2:
In this how to example, I will show you how to display all the shoe sizes available for that particular product below all the product information, i.e. Add to Wishlist, Add to Compare..
Optional: I have added a, ul, li style by enclosing the php with ul, li and assigning my_personal_style2 class, with list-style:none, and styling a bit.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <a href="<?php echo $_compareUrl ?>"><?php echo $this->__('Add to Compare') ?></a> <?php endif; ?> <!--insert custom attribute--> <?php if($_product->getcustom_shoe_sizes()): ?> <ul class="my_personal_style2"> <li><?php echo $this->htmlEscape($_product->getData('custom_shoe_sizes')); ?></li> </ul> <?php endif; ?> <!--//end insert custom attribute--> </li> <?php if($i%3==0 || $i==$_collectionSize): ?> |
So, in this example we used a getData, which will do just that. It will get the the custom_shoe_sizes data text, which in this case is any of the following, size 8, size 9, size 10, and so on. It will display all the available shoe sizes for that particular product.
Summary
Help Links to AWStats and WAMP
So with these examples, you can pretty much create your own custom catalog with your own attributes or use an existing magento attribute.
Note: Keep a local log of the files you modify, especially core files. What I do is keep folders and log each change accordingly. By naming one file to /mods/core, and the other to /mods/template and placing each mod into the corresponding folder.
" Customize Magento Catalog Page, list.phtml "
Customizing Magento Catalog Page article has been very helpful. You seem to know what you are doing. Good to have people like you willing to give free information.
" Customize Magento Catalog Page, list.phtml "
Also thanks for the other articles you posted with the WAMP integration.
" Customize Magento Catalog Page, list.phtml "
This is exactly what I needed for my Magento site. Thanks.
" Customize Magento Catalog Page, list.phtml "
[...] Changing catalog page [...]
" Customize Magento Catalog Page, list.phtml "
Im not a programmer, so mind if I ask what is the role of the xml file…(i noticed it has a tag and there is a $_product reference in your code and the attribute….are they tied up together?)
" Customize Magento Catalog Page, list.phtml "
I cannot seem to find this directory: what is the …
Now go, inside your /magento_install/app/…/template/catalog/product/list.phtml
" Customize Magento Catalog Page, list.phtml "
magento_install> app> design> frontend >yourtemplate >yourtheme >template >catalog >product >list.phtml
Magento Install is the root of your Magento installation files. Your template is named ‘default’ when you install Magento. Your theme is named ‘default’ when you install Magento.
Hope this helps.
" Customize Magento Catalog Page, list.phtml "
Yes they are tied together, dependent how you code list.phml and you must have an assigned attribute that matches, or else it will produce a php error. Please note, as far as my testing goes, it does work with up to 1.3 but in 1.4 versions of Magneto some “get PHP codes” have to be changed to achieve the same result. Regardless, the concept is still the same; they are tied together, and so you can customize the catalog view and list page in all versions.
" Customize Magento Catalog Page, list.phtml "
CJ, I have Magento 1.4.1.1 on ubuntu server 10.04–now on development stage. Let me know how much do you charge for consulting…there are 2 most important mods I need right now: a) place some attributes on the list page, which is covered by this tutorial but not for 1.4.1.1, and b) putting a custom advanced search block on the top of the page, by custom i mean just using 3 or 4 searchable fields in dropdown boxes.
I have done the required back end config, all i need is the code tweaks. I am online as vinsanity68 on yahoo messenger.
" Customize Magento Catalog Page, list.phtml "
I figured out how to place attributes on listing for 1.4.1.1, no more XML involved, just insert the right php in list.phtml….i am now on to the next challenge of customizing the advanced search!
" Customize Magento Catalog Page, list.phtml "
I need to know the correct PHP to place in list.phtml for version 1.4.1.1
Thanks!
" Customize Magento Catalog Page, list.phtml "
@ vince
‘I figured out how to place attributes on listing for 1.4.1.1, no more XML involved, just insert the right php in list.phtml….i am now on to the next challenge of customizing the advanced search!’
what php code did you use, because I try many things but can’t make it work.
This is an example:
getVierkantemeterppvan(); ?>
But that didn’t work…