April 23, 2011

Magento Tutorial practical use of the footer template

If the same information on your Magento website is repeated over and over, like contact information, internal / external SEO links or a copyright block, it might be a good idea to put these in the footer template. Within the magento frontend template this file can be found at:
\app\design\frontend\default\default\template\page\html\footer.phtml
In my case, again on my equestrian project website http://www.paardcare.nl the idea was to edit the footer and add a nice trusted logo, the copyright line and some information regarding the company, FAQ, sitemap, etc, etc. This is how it turned out:

Paardcare - footer

Pretty neat! But what? And how? Let's check it out:
  1. A block containing all brands from this website.
  2. Remove Newsletter box from Side Box to Footer
  3. Add footer links on the right
  4. Add footer links on the left
  5. Add an image on the right
  6. Expand the copyright line
A block containing all brands from this website

A block containing all brands from the website has its use for either usability and SEO, while you don't have maintain the block as every link is generated automatically.

Within the <div class="footer-container"> - the outer DIV container - I have placed another DIV container:
<div class="footer-container">
    <div class="footer-brand">
        <?php echo $this->getChildHtml('footer_brand_callout') ?> <!-- cms > static page-->
    </div>
As you can see in the above code, it just echoes the content from the CMS Static Block "footer_brand_callout" (identifier), made in Magento Admin. This is the code from the CMS Static Block:
{{block type="catalog/product" template="catalog/product/brand.phtml"}}
I have decided to place this code in a Static Block because I now have control in what Shop View this code will be shown.
Ok, all the real coding happens in file (create file if it does not exist):
\app\design\frontend\default\default\template\catalog\product\brand.html
Copy and paste the code:


<?php
    $product = Mage::getModel('catalog/product');
    $attributes = Mage::getResourceModel('eav/entity_attribute_collection')
->setEntityTypeFilter($product->getResource()->getTypeId())
->addFieldToFilter('attribute_code', 'manufacturer');
    $attribute = $attributes->getFirstItem()->setEntity($product->getResource());
    $manufacturers = $attribute->getSource()->getAllOptions(false);

   $array_size = count($manufacturers);
?>

<div>
    <div>
        <h4><span><?php echo $this->__('Our Brands:') ?></span></h4>
    </div>
    <div style="padding-left:8px;">
        <ul id="manufacturer_list">
    <?php for ($i = 0; $i < $array_size; ++$i): ?>
            <li <?php if($i == ($array_size-1)){ print "class=\"last\""; }?>>
                <a href="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB)?>catalogsearch/advanced/result/?manufacturer[]=<?php echo $manufacturers[$i]['value']; ?>">
<?php echo $manufacturers[$i]['label'] ?></a>
            </li>
<?php endfor; ?>
    </ul>
</div>
<div>
</div></div>

NOTE: not all of the above code is ours. Please contact me for credits if you care.

Remove Newsletter box from Side Box to Footer

This step is pretty basic. After removing the Newsletter from the Side Box, or disabling the Side Box, just put the following code in a DIV block:
<?php echo $this->getChildHtml('footer.newsletter') ?>
Add footer links on the right 
Get default Magento Footer links:
<?php echo $this->getChildHtml('cms_footer_links') ?>
Get contents from a Static CMS Block:
<?php echo $this->getChildHtml('footer_links') ?>
The above snippet refers to a Static CMS Block called by its identifier "footer_links". The contents of this block:

<ul>
    <li><a href="{{store direct_url="over-paardcare"}}">Over Paardcare.nl</a></li>
    <li><a href="{{store direct_url="klantenservice"}}">Klantenservice</a></li>
</ul>
As you can see. All ahrefs refer to their CMS Page and are called by default HTML code where "store direct_url" will print the Website Domain with a slash (/).

Add footer links on the left
For diversity sakes, instead of a Static CMS Block I will show you how to code this in the footer.phtml directly:


<div class="footer-voorwaarden">
    <a href="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB);?>klantenservice/algemene-voorwaarden/">Algemene Voorwaarden</a>&nbsp|&nbsp
    <a href="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB);?>disclaimer/">Disclaimer</a>&nbsp|&nbsp
    <a href="<?php echo Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB);?>privacy-verklaring/">Privacy Verklaring</a>
</div>
 To get the Website Domain I have used the built in Magento Core snippet.:
Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB);


Add an image on the right

Again, hardcoded only in the footer.phtml:

<div class="standards">
    <img src="<?php echo $this->getSkinUrl('images/exad-trading-geotrust-ssl.png'); ?>" />
</div>
The function $this->getSkinUrl retrieves the first part of the URL (Website Domain & Path to configured skin package): http://DOMAIN/skin/frontend/default/default/ and concatenates the patch given as variable in the function.

Expand the copyright line

The Copyright message was a bit on the light side so we decided to expand the line with additional information. To make the code reusable for other Shop Views, it is necessary to generate the Shop Name instead of putting the Shop Name as a static. This can be done by the following snippet:
<?php echo  Mage::app()->getStore()->getGroup()->getName(); ?>
With this I conclude the tutorial. If you feel this was helpful, click on a banner or +1 to spread the word.


January 21, 2011

Magento Add Home button to horizontal Top Navigation

In this post I will show you how to add a Home button to your Horizontal Top Navigation like on this website www.ruitersport-discounter.nl

Ruitersport-Discounter - Home button
Home button on the left side of the Horizontal Top Navigation Bar














We are going to edit the following file:
\app\design\frontend\default\default\template\catalog\navigation\top.phtml
 Within the <div class="nav-container"><ul id="nav">, but above the <?php echo $_menu ?>, paste the following code snippet:

<?php $_anyActive = false; foreach ($this->getStoreCategories() as $_category) { $_anyActive = $_anyActive || $this->isCategoryActive($_category); } ?>
<li class="<?php echo !$_anyActive ? 'active' : '' ?>"><a href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Home') ?></a></li>

January 18, 2011

Magento hide Callouts from every page in catalog.xml

To hide the Callout blocks from every page on your website, we are going to edit the following file:
\app\design\frontend\default\default\layout\catalog.xml
In this file the behaviour of various default blocks are handled.
To hide the Callouts we have to comment or delete the whole code block:
<block type="core/template"> ... </block>
Now you are all set. You may have to Flush Cache from Magento Admin.

Magento hide Recently Compared Products Block and Recently Viewed Products Block

To hide the Recently Viewed Products Block and Recently Compared Products Block on ALL pages on the website, we are going to edit the file:
\app\design\frontend\default\default\layout\reports.xml
Comment out the two block types within the <reference> tag like:

<!-- <block type="reports/product_viewed" before="right.permanent.callout" name="right.reports.product.viewed" template="reports/product_viewed.phtml" /> -->
<!-- <block type="reports/product_compared" before="right.permanent.callout" name="right.reports.product.compared" template="reports/product_compared.phtml" /> -->

Now you are all set. You may have to Flush Cache from Magento Admin.

Magento show custom static block only on homepage

In this post I will show how to create a custom static block in Magento and show the contents from this block on the Homepage. So in short, show a Static Block in a CMS Page.

The easy part is that we can do this in Magento Admin only. This is an example taken from one of my e-commerce websites www.paardcare.nl :

Content from the Static Block is highlighted. 

















  1. First, create a Static Block: CMS > Static Block > Create new Static Block. The Block identifier is important as we are going to call this block by this ID. You can put anything in the contents from this Block. We've created a <div> container with a <a href><img> construction.
  2. Next, edit the Homepage in CMS > Pages > [Homepage] > Custom Design > Layout update XML. Within the <reference name="left"> ... </reference> tag paste the following syntax/snippet:

    <block type="cms/block" name="[RANDOMNAME]" before="-">
        <action method="setBlockId"><block_id>[YOUR_BLOCK_IDENTIFIER]</block_id></action>
    </block>
That is all to it. Feel free to +1 this post to spread the word or click on a random banner on this site.

January 13, 2011

Magento add sku or product number to shopping cart item in the checkout page

It is not difficult in Magento to add a sku, product number or any other product attribute to the shopping cart item on the checkout page. On our e-commerce website, http://www.paardcare.nl , our wish was to add the Sku number to the shopping cart. This can be done using:

$this->getChildProduct()->getAttribute();













The following file must be edited:
\app\design\frontend\default\default\template\checkout\cart\item\default.phtml

Around Line 36 place the this block:
<span style="color: #AAAAAA; font-weight: normal; font-style: italic;">- Art.
<?php
    if(is_object($this->getChildProduct())): 
        echo $this->getChildProduct()->getSku();
    else: 
        echo $_item->getSku();
    endif; ?>
</span>

This will look like:
Our snipped within the default code

January 8, 2011

Magento remove Paypal logo or other things from static page

A basic Magento template comes with default blocks you probably do not want. For my project at http://www.paardcare.nl (an equestrian horseriding e-commerce website) I had to remove all standard blocks.

To remove the Paypal logo from a static page (hompage) no programming is required. Simply login the admin panel and browse to:

CMS > Static Pages > Home Page > Design

In the layout update XML just paste within <reference> tags:
<reference name="left">
    <remove name="paypal.partner.right.logo"/>
</reference>

This trick works for the following as well:

  • Popular Tags block
  • Sidebar Cart block
  • Sidebar Compare block
  • Viewed Products block

Remove the blocks by putting them within the <reference> tag like:

<reference name="left">
    <remove name="paypal.partner.right.logo"/>
    <remove name="tags_popular"></remove>
    <remove name="cart_sidebar"></remove>
    <remove name="catalog.compare.sidebar"></remove>
    <remove name="right.reports.product.viewed"></remove>
    <remove name="sale.reorder.sidebar"></remove>
</reference>