Search This Blog

May 5, 2011

Magento: Custom Template Update for Product and Category View

Another great feature of Magento platform is the ability to customize category and product view template using the custom template update section. Template are easily modified, altered and removed through custom layout update with any hardcode stuff to make. It also easy to implement as long as you got basic knowledge of XML and Magento.

To start with, custom update option is located in two different section:

a. For the Category Section
Navigate to: Catalog > Categories > Manage Categories
b. Product Section
Navigate to: Catalog > Manage Product > Click the Product to Edit > Design Tab

Stop and Look first!

Magento layout is defined through an XML format. Every block of magento phtml file has its own corresponding block name. In the same way, group of blocks has its own reference name. You need to familiarize these names so you can update the layout of your product and category page using the custom update option.
Here is an example of an XML file.

<?xml version="1.0"?>
<layout version="0.1.0">
 
<default>
 
 <reference name="header">
        <!-- This adds a CMS block that can be called from the template file
        associated with the header block. -->
 <block type="cms/block" name="cms_quick_help">
 <action method="setBlockId"><block_id>quick_help</block_id></action>
 </block><!-- The remove tag removes the blocks with the specified name from the layout -->
  <remove name="top.menu"/>
  <remove name="store_language"/>
  <remove name="breadcrumbs"/>
 </reference>
 
 <reference name="top.nav">
  <remove name="catalog.topnav"/>
 </reference>
 
 <reference name="left">
  <remove name="left.newsletter"/>
  <remove name="left.permanent.callout"/>
  <remove name="catalogsearch.leftnav"/>
 
        <!-- When you use the remove tag, it removes any blocks with the specified name from
            the entire layout, regardless of the context. So, if I remove right.newsletter in
            the <default> context and that name is used in say the <catalog_product_view> context,
            then both blocks will be removed.  Because remove operates on the global context,
            you can only remove an element once.  Since <remove name="right.newsletter" /> is
            being called in catalogsearch.xml, we have to unset it, or else we'll get an error.
 
   The line below only unsets the block from the parent's context, not the global
            layout context -->
 <action method="unsetChild"><name>right.newsletter</name></action>
 </reference>
 
 <reference name="right">
        <!-- Some blocks have to be removed using remove, others via unsetChild.
            I've not spent the time digging into the code to figure out why -->
  <remove name="right.permanent.callout"/>
  <remove name="catalog.compare.sidebar"/>
  <remove name="left.reports.product.viewed"/>
  <action method="unsetChild"><name>sale.reorder.sidebar</name></action>
  <action method="unsetChild"><name>wishlist_sidebar</name></action>
  <action method="unsetChild"><name>right.reports.product.viewed</name></action>
  <remove name="cart_sidebar"/>
 </reference>
 
</default>
 
<!-- CATALOG PAGES -->
 <catalog_product_view><!-- 2columns-right -->
  <reference name="root">
   <action method="setTemplate"><template>page/2columns-left.phtml</template></action>
  </reference>
  <reference name="content">
   <reference name="product.info">
    <block type="cms/block" name="cms_product_info_tabs">
     <action method="setBlockId"><block_id>product_info_tabs</block_id></action>
    </block>
    <block type="catalog/product_view" name="product.clone_prices" as="prices" template="catalog/product/view/price_clone.phtml"/>
    <action method="unsetChild"><name>tierprices</name></action>
    <action method="unsetChild"><name>addto</name></action>
    <remove name="addto"/>
    <reference name="product.info.options.wrapper.bottom">
     <action method="unsetChild"><name>product.tierprices</name></action>
    </reference>
   </reference>
  </reference>
 </catalog_product_view>
 
</layout>

It's only for reference. 

Hints:
As you notice, the reference name and block name are descriptive which we can easily understood. Location of XML file is in your Layout folder
 /app/design/frontend/[your package name]/[your theme]/layout/

Both category and product page share the same xml file which is "catalog.xml".

Let's Try!

Let say, We have a scenario that we need to get rid the addtocart buttons in the product view page. Lets assume that the product is only for reference (so it is not saleable and we don't need the addtocart button.)


To make the product view page with out the add to cart button, price and availability.


Here are the steps.

1. Login to your store account.
2. Navigate to : Catalog > Manage Product.
3. In the product list, choose the product you want to edit the custom layout update.
4. Once you are in the edit page, click on Design tab.
5. On the custom layout update text area, enter the following code.

<reference name=”content”>
 <remove name=”product.info.addtocart”/>
 <remove name=”product.description”/>
 <remove name=”product.info.simple”/>
</reference>


The purpose of the above code is to remove the addtocart button  price and availability information block in that specific product.

6. Save the configuration, clear cache and refresh the product page and that’s it.

If you have any questions. Please feel free to comment below. Please don't forget to subscribe in our RSS Feed or Follow us on Facebook and Twitter

7 comments:

Kristina said...

 I've been working on some layout update stuff and I'm finding that on Product pages, my layout updates won't take. remove name="breadcrumbs" for instance, which removes the breadcrumbs like a dream on CMS pages, doesn't do a thing on product pages. Can't figure out why. Have you ever noticed anything like that?

Janzell Jurilla said...

Hi Kristina,
 Thanks for dropping by, I love to help you but It would help if you provide a screenshot or something.  OK, here's my first assumption to what you've said, you want to remove the breadcrumbs block in your product pages? If you need to remove it for individual product pages, you can simply follow the above instructions.  If it is for the whole product view page. You can edit your catalog.xml and comment the breadcrumbs block include. 

Let me know if that works. 

Best,

Janzell

KnuckleSalad said...

 Fair enough, and thanks for replying. I suppose I was too specific. What's really happening, basically, is that Custom Layout Updates on Product pages and catalog.xml modifications to the product view pages just aren't affecting the site frontend as they should. No effect whatsoever. I wondered if you'd ever had any trouble with Magento caching the hell out of stuff so your changes wouldn't render. (I've disabled the cache every which way, but still nothing, and I cannot figure out what I'm missing.)

Janzell Jurilla said...

Magento is a monster caching CMS so even you disable the cache, refresh the caching still once. Make sure also that you're editing the catalog.xml under the theme folder that you were using. You can use developers toolbar extension to see the debug your theme. http://www.magentocommerce.com/module/2271/developer-toolbar

And one thing, don't forget to clear your browser cache too. 

Let me know if it helps you.

Anonymous said...

i'm trying to rename the addtocart button using layout update xml, any idea how i can do this?

Brandon Maynard said...

For 1.7.0.0 all I did to remove the add to cart button on the product page:

For both of these I disabled cache and refreshed before and enable cache and refreshed after.

1. Catalog->Manage Products->Select Product
2. Design->Custom Layout Update
3.
-I did not add anything before or after this line
-no or
4. Save and Continue Edit
5. look at your product page -> add to cart gone!!!

To Remove from an entire category's product view page.
1. Catalog->Manage Categories->Select Category
2. Custom Design Tab->Custom Layout Update
3.
-I did not add anything before or after this line
-no or
4. Change Apply to Products to YES
5. Save Category

PROBLEM: The remove add to cart works for removing the add to cart button on the product view page but does not remove the add to cart button on the catalog product list/grid page, HOW TO PLEASE?

Janzell Jurilla said...

Hey Brandon,

Are you using a custom template or the default one?

- Janzell