PHP Magento Tips

Add Active Class to Top Links in Magento

Rate this posting:
{[['']]}

In this post, you will learned about how to add active class in Top Links in Magento.

Modify app/design/frontend/rwd/default/template/page/template/links.phtml with below code:

<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magento.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magento.com for more information.
 *
 * @category    design
 * @package     rwd_default
 * @copyright   Copyright (c) 2006-2016 X.commerce, Inc. and affiliates (http://www.magento.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>
<?php
/**
 * @see Mage_Page_Block_Template_Links
 */
?>
<?php $_links = $this->getLinks(); ?>
<?php $_currentUrl = Mage::helper('core/url')->getCurrentUrl(); ?>
<?php if(count($_links)>0): ?>
<ul class="links"<?php if($this->getName()): ?> id="<?php echo $this->getName() ?>"<?php endif;?>>
    <?php foreach($_links as $_link): ?>
        <?php if ($_link instanceof Mage_Core_Block_Abstract):?>
            <?php echo $_link->toHtml() ?>
        <?php else: ?>
            <?php 
                $pageLink = $_link->getUrl();
                $pageUri = $_SERVER['REQUEST_URI'];
                $activeClass = false;
                switch (true){
                    case strpos($pageLink,'/customer/account/login') !== false:
                        $activeID = "top-login";
                        if (strstr($pageUri,'/customer/account/login')) {
                            $activeClass = true;
                        }
                        break;
                    case strpos($pageLink,'/customer/account/logout') !== false:
                        $activeID = "top-logout";                   
                        break;                    
                    case strpos($pageLink,'/customer/account/') !== false:
                        $activeID = "top-account";
                        if ((strstr($pageUri,'/customer/') && strstr($pageUri,'/customer/account/login')===false && strstr($pageUri,'/customer/account/logoutSuccess/')===false) || strstr($pageUri,'/sales/order/history/') || strstr($pageUri,'/sales/billing_agreement/') || strstr($pageUri,'/sales/recurring_profile/') || strstr($pageUri,'/oauth/customer_token/') || strstr($pageUri,'/newsletter/manage/')) {
                            $activeClass = true;
                        }        
                        break;                   
                    case strpos($pageLink,'/checkout/cart/') !== false:
                        $activeID = "top-cart";
                        if (strstr($pageUri,'/checkout/cart/')) {
                            $activeClass = true;
                        }                    
                        break;
                    case strpos($pageLink,'/checkout/') !== false:
                        $activeID = "top-checkout";
                        if (strstr($pageUri,'/checkout/') && strstr($pageUri,'/checkout/cart/')===false) {
                            $activeClass = true;
                        }                    
                        break; 
                    default:
                        $activeID = "";
                        $activeClass = false;
                }
                
            ?>
            <li id="<?php echo $activeID; ?>" class="<?php echo ($activeClass ? 'active' : ''); ?> <?php echo $_link->getLiParams() ?>"><?php echo $_link->getBeforeText() ?>
                <div class="medium metro rounded btn">
                    <a href="<?php echo $_link->getUrl() ?>" title="<?php echo $_link->getTitle() ?>" <?php echo $_link->getAParams() ?>><?php echo $_link->getLabel() ?></a><?php echo $_link->getAfterText() ?>
                </div>
            </li>
        <?php endif;?>
    <?php endforeach; ?>
</ul>
<?php endif; ?>

With this code you can add a class to the default top links when the user is on one of those pages. For example if the user is on My Cart then this will add the class 'top-cart' and 'active' class for that page.

In addition, you can also add additional class to "wishlist" links, by adding below code to your layout local.xml file.

 <?xml version="1.0"?>
<layout version="0.1.0">
<default>
<reference name="wishlist_link">
    <action method="setAParams">
        <param><![CDATA[class="wishlistclass"]]></param>
    </action>
</reference>
</default>
</layout>

Tag : Magento
0 Comments On "Add Active Class to Top Links in Magento"

Back To Top