Magento Tips: Exploring Magento Frontend & BackEnd

Magento Customization Tips, Tricks
There are several cool things which you can do with Magento. Here are few Magento problem statements and their solution.

How to display the list of categories in Magento theme’s footer

This is pretty simple, all you have to do is call this neat little function in you footer file

1
2
3
<?php helper('catalog/category') ;
getStoreCategories() as $_category):
getName() ?>

How to fix the error on category page if category has more than 9 products?

Basically you need to edit the core file found here app/code/core/Mage/Catalog/Block/Product/List/Toolbar.php

Change from

1
class Mage_Catalog_Block_Product_List_Toolbar extends Mage_Core_Block_Template

To

1
class Mage_Catalog_Block_Product_List_Toolbar extends Mage_Page_Block_Html_Pager

Remove white border upon resizing images in Magento

To remove the white border around the images, we need to add the keepFrame(false) method call before calling the resize() method. Replace the following default Magento image resize code

1
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />

with the following code

1
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />

How to show cart quantity and total price in header

To show cart quantity and total price add the following code to app/design/frontend/default/[Your Theme]/template/page/html/header.phtml

1
2
3
4
<a href="<?php echo $this->getUrl('')."checkout/cart/";?>" >Your Basket<strong>(<?php if(Mage::helper('checkout/cart')->getSummaryCount() > 0) { echo Mage::helper('checkout/cart')->getSummaryCount(); } else { echo "0"; }?>)</strong> Total: <?php echo $this->helper('checkout')->formatPrice(Mage::getSingleton('checkout/cart')->getQuote()->getGrandTotal()); ?>
<?php if ($_subtotalInclTax = $this->getSubtotalInclTax()): ?>
    (<?php echo Mage::helper('checkout')->formatPrice($_subtotalInclTax) ?><?php echo Mage::helper('tax')->getIncExcText(true) ?>)
<?php endif; ?>

How To Change Default Magento Theme

You can start with your own magento custom theme development and also put your name instead of using default or else, and also copy all the templates files and layout XML files and save it in your theme folder. same way repeat the things with the Skin folder also.

Default folder structure Template and XML files => magento => app => design => front-end ?? base or default => theme-name SKIN – CSS and JS files => magento => skin => front-end => base or default => theme name now just copy and paste the theme files from above structure and paste it to the same place and just change the name to base or default to you favorite name.

Now go to admin => system => design => and Add custom magento theme => here you will see the theme which you have created in folder structure, just select and save the theme and then just delete or refresh the cache and refresh your web page that’s all.

According to the hierarchy, from lowest priority to highest-

default – this theme must be called default. I will be planning on using the magento default theme untouched as this theme. This cannot be currently overwritten.

your custom default theme – specified in configuration => design => theme =>default I will be using the Magento blank theme as base for developing an everyday store theme.

your custom non-default theme – specified in configuration => design => theme =>(layout, templates and skin) I will be using this to create special occasion themes, e.g. Christmas or sale, that will override only a subset of the default theme.

How to enable path hints in your Magento theme?

Sometimes, it’s difficult to know from which of the more than 100 files, are the elements (blocks, modules, buttons, callouts, sections, etc) of your theme coming.

Just go to your Admin Panel (backend):
System > Configuration > Select your store from the Current Configuration Scope: dropdown menu

Then under Advanced options at the top bottom of the options column, select
Developer> now under Debug options, change Template Path Hints to YES.

Go to your frontend, and you will see the root of each module of your theme.

Product Images are not showing up in theme

Whenever you are uploading the image of a product you have to set it as base image.
Go to Admin panel->Catalog-> Manage Products-> Select the product which you need to edit
There is radio button in the image tab from that you can choose any image as base image.

How to remove Paypal logo which appears on the right column in the theme?

You can remove the default “Now Accepting Paypal” logo from the backend. Just login to Admin Panel , and go to
System -> Configuration -> PayPal -> Frontend Experience Settings -> PayPal Product Logo.
Select “No Logo” from the drop-down list of options to remove the logo.

How to add new page layout for your Magento theme?

Following are the steps to create new page layout -

1. Open the file: app/etc/modules/Mage_All.xml
Edit the tag to ‘local’ such that it looks like:

1
2
3
4
5
6
7
8
<mage_page>
          <active>true</active>
          <codepool>local</codepool>
          <depends>
           <mage_core>
           </mage_core>
          </depends>
</mage_page>

2. Copy config.xml
from app/code/core/Mage/Page/etc/config.xml
to app/code/local/Mage/Page/etc/config.xml

3. The file can be edited: app/code/local/Mage/Page/etc/config.xml
Add new lines between .. along with other layouts.

1
2
3
4
5
6
7
8
9
10
11
12
13
<page>
		<layouts>
.
.
		<home module="page" translate="label">
			<label>Home</label>
			<template>page/home.phtml</template>
			<layout_handle>page_home</layout_handle>
		</home>
.
.
		</layouts>
</page>

4. Create new file : template/page/home.phtml along with 1column.phtml, 2columns-left.phtml etc.. You can just copy the existing code of one of the column layout phtml inside the home.phtml. Modify the code inside home.phtml as per your need.

5. Clear your magento "var/cache"

6. On the Admin, Go To CMS -> Manage Pages. Edit the home page. Change the Layout to ‘Home’ under the ‘Design’ Tab.

How to modify or reorder top links in Magento theme?

Default Magento installation, have following top links:

My Account | My Wishlist | My Cart | Checkout | Log In

In order to Modify / Remove or Reorder them need to do some changes in layout files.

You can find -
My Account, Log Out, and Log In In customer.xml file.

My Cart and Checkout In checkout.xml

See for the following code in checkout.xml

1
2
<action method="addCartLink"></action>
<action method="addCheckoutLink"></action>

My Wishlist In wishlist.xml

Search for the following code:

1
<action method="addWishlistLink"></action>

Stay tuned for our next post where we will come up more Magento tips. Subscribe our RSS to receive latest Magento updates, tips and tricks.