Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Active CSS tag/class for menu
 
BishopMartin
Jr. Member
 
Total Posts:  2
Joined:  2008-04-01
 

Hello All,

I am working on my first skin/template for Magento.  I can’t say that I love the template system, but it does start to make more sense the longer you suffer through it.  Recently I have been making some really good progress, and I hope to have a site to show off in the next few days.

I am trying to add some extra CSS to the menus.  I notice that the shop-access menu automatically adds tags for first and last, and even specific ones for cart, and checkout:

<div class="shop-access">
<ul>
<li class="first “ ><a href="http://squareonecoffee.com/customer/account/">My Account</a></li>
<li ><a class="top-link-cart" href="http://squareonecoffee.com/checkout/cart/">My Cart</a></li>
<li ><a class="top-link-checkout" href="http://squareonecoffee.com/checkout/">Checkout</a></li>
<li class="last “ ><a href="http://squareonecoffee.com/customer/account/login/">Log In</a></li>
</ul>
</div>

Unfortunately there is no tag added to identify the active page [ class="active" ] so I can not create a style class that only apply to the selected page.  Other CMS systems I have used (Drupal for example) automatically add this tag if it notices that the current URL match the link URL. 

Any one have any ideas how I can work around this problem, and add CSS specifically to the active page link?  Any plans to add this feature/function in an upcoming release or fix?

Thanks for your response and time!

BM

 
Magento Community Magento Community
Magento Community
Magento Community
 
alistek
Sr. Member
 
Total Posts:  293
Joined:  2008-04-02
Normal, IL
 

Since we are using PHP we can use some server-side logic to figure out the current page and change the CSS class of the button to make it active or not.  There is probably a better way to do this but try something like this (note I haven’t tested this so you might need to tweak it a bit).

<div class="shop-access">
<?php
echo '<ul>';

echo ($PHP_SELF == '/customer/account/') ?
'<li class="first"><a class="active" href="http://squareonecoffee.com/customer/account/">My Account</a></li>' :
'<li class="first"><a class="none" href="http://squareonecoffee.com/customer/account/">My Account</a></li>';

echo ($PHP_SELF == '/checkout/cart') ?
'<li><a class="active-top-link-cart" href="http://squareonecoffee.com/checkout/cart/">My Cart</a></li>' :
'<li><a class="none-top-link-cart" href="http://squareonecoffee.com/checkout/cart/">My Cart</a></li>';

echo ($PHP_SELF == '/checkout/') ?
'<li><a class="active-top-link-checkout" href="http://squareonecoffee.com/checkout/">Checkout</a></li>' :
'<li><a class="none-top-link-checkout" href="http://squareonecoffee.com/checkout/">Checkout</a></li>';

echo ($PHP_SELF == '/page4.php') ?
'<li class="last"><a class="active" href="http://squareonecoffee.com/customer/account/login/">Log In</a></li>' :
'<li class="last"><a class="nonet" href="http://squareonecoffee.com/customer/account/login/">Log In</a></li>';

echo '</ul>';
?>
</div>

 
Magento Community Magento Community
Magento Community
Magento Community
 
alistek
Sr. Member
 
Total Posts:  293
Joined:  2008-04-02
Normal, IL
 

Note that I am using ternary operators for the logic so it’s like condition ? true : false; (question mark, colon, semi-colon).  I also would make the classes on the A element a combination of the top-link-checkout (etc) and an active vs. non-active class to style them accordingly.

-Adam

 
Magento Community Magento Community
Magento Community
Magento Community
 
BishopMartin
Jr. Member
 
Total Posts:  2
Joined:  2008-04-01
 

Thanks for the response Adam.

This would certainly solve the problem, and I know just enough PHP to understand what your doing.  The downside is that I would need to manually code in each link I want in the nav, instead of using the existing code that spits out the links automatically:

<?php if($toplinks && is_array($toplinks)): ?>
<ul>
<?php echo $this->getChildHtml() ?>
<?php foreach($toplinks as $_toplink): ?>
<li<?php if($_toplink['first']||$_toplink['last']): ?> class="<?php if($_toplink['first']): ?>first <?php endif; ?><?php if($_toplink['last']): ?>last <?php endif; ?>"<?php endif; ?> <?php echo $_toplink['liParams'] ?>> <?php echo $_toplink['beforeText'] ?><a <?php echo $_toplink['aParams'] ?>><?php echo $_toplink['innerText'] ?></a><?php echo $_toplink['afterText'] ?></li>
<?php endforeach; ?>
</ul>

When I select one of the product categories from my catalog nav, Magento is automatically adding the ‘active’ tag in:

<li class="level0 active">
<a href="http://squareonecoffee.com/catalog/category/view/s/coffee/id/3/"><span>Coffee</span></a>
</li>

<li class="level0">
<a href="http://squareonecoffee.com/catalog/category/view/s/merchandise/id/4/"><span>Merchandise</span></a>
</li>

Any way to modify the above toplinks code to do something similar?

Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
alistek
Sr. Member
 
Total Posts:  293
Joined:  2008-04-02
Normal, IL
 

Well there is the top.links.phtml file that we could modify to do that.  It would have to use the example that I am giving to assign the proper CSS to the link much like it determines what link is first and last.  We need some way to identity what page it is on and we either try to pull the filename that is given (although that could be a problem once we get into the catalog) or we have to create some sort of page identifier we can look for in each page.  Maybe assign a general class to the body or to a specific element we can look for?  Otherwise to actually code in a solution within the core of Magento to do it, i.e. if Magento encounters the <addLink> tag in the XML look to see what current page it is in and then assign the proper CSS tag.  That would require a bit more effort to do as I am not sure what class to override to do that, but I am sure it is possible.  The quickest way would seem to be to modify the top.links.phtml file to look for the page but I will keep looking and maybe there is an easier way.

-Adam

 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

Where are you guys finding the links to modify them?  I can’t find where it tells it the actual links.

 
Magento Community Magento Community
Magento Community
Magento Community
 
laurent
Member
 
Total Posts:  75
Joined:  2007-08-31
Paris, France
 
BishopMartin - 01 April 2008 05:12 AM

Unfortunately there is no tag added to identify the active page [ class="active" ] so I can not create a style class that only apply to the selected page.  Other CMS systems I have used (Drupal for example) automatically add this tag if it notices that the current URL match the link URL. 
Any one have any ideas how I can work around this problem, and add CSS specifically to the active page link?  Any plans to add this feature/function in an upcoming release or fix?

Here is the solution I’ve found to add ‘class="active" to links li (just like first and last):

first copy Links.php from app/code/core/Mage/Page/Block/Template/ to app/code/local/Mage/Page/Block/Template/.
Edit the new file.
A new function is needed to get the requested URL. So add this new function inside the class:

/**
     * Get prepared requested URL
     *
     * @return string
     */
    public function getPreparedRequestedUrl()
    
{
        $requestedUrl 
$this->getUrl(substr($this->getRequest()->getRequestUri(), 1));        
        return 
preg_replace('/(index\/|index\/index\/)$/'''$requestedUrl);
    
}

Edit your links template. By default, it’s app/design/frontend/.../.../template/page/template/links.php
by default the content is:

<?php $_links $this->getLinks(); ?>
<?php 
if(count($_links)>0): ?>
    
<div>
        <
ul<?php if($this->getName()): ?>):?> id="<?php echo $this->getName() ?>"<?php endif;?>>
            
<?php foreach($_links as $_link): ?>
                
<li <?php if($_link->getIsFirst()): ?> class="first"<?php elseif($_link->getIsLast()): ?> class="last"<?php endif; ?><?php echo $_link->getLiParams() ?>><?php echo $_link->getBeforeText() ?><a href="<?php echo $_link->getUrl() ?>" title="<?php echo $_link->getTitle() ?>" <?php echo $_link->getAParams() ?>><?php echo $_link->getLabel() ?><?php echo $_link->getAfterText() ?></a></li>
            
<?php endforeach; ?>
        
</ul>
   </
div>
<?php endif; ?>
Replace with :
<?php $_links $this->getLinks() ?>
<?php
// get the prepared requested url
$_requestedUrl $this->getPreparedRequestedUrl();
?>
<?php 
if(count($_links)>0): ?>
        
<ul<?php if($this->getName()): ?>):?> id="<?php echo $this->getName() ?>"<?php endif;?> class="top-links">
            
<?php foreach($_links as $_link): ?>
                <?php 
// compare the requested url with the link url and add class="active" if matching ?>
               
<li class="<?php echo $_requestedUrl == $_link->getUrl()? 'active ': '' ?><?php if($_link->getIsFirst()): ?>first<?php elseif($_link->getIsLast()): ?>last<?php endif; ?>" <?php echo $_link->getLiParams() ?>><a href="<?php echo $_link->getUrl() ?>" title="<?php echo $_link->getTitle() ?>" <?php echo $_link->getAParams() ?>><span></span><?php echo $_link->getBeforeText() ?><?php echo $_link->getLabel() ?><?php echo $_link->getAfterText() ?></a></li>
            
<?php endforeach; ?>
        
</ul>
<?php endif; ?>

Now if you want to add a link to a CMS page (like home page), you can add links in the catalog.xml like that:

<reference name="top.links">
            <!-- 
don't remove prepare = true -->
            <action method="addLink" translate="label title"><label>Home</label><url></url><title>Home</title><prepare>true</prepare><urlParams/><position>1</position></action>
            <action method="addLink" translate="label title"><label>test link</label><url>test_link</url><title>Test Link</title><prepare>true</prepare><urlParams/><position>2</position></action>
        </reference>

Tell me if that solution is working great for all your links.

 
Magento Community Magento Community
Magento Community
Magento Community
 
naujasdizainas
Sr. Member
 
Avatar
Total Posts:  128
Joined:  2007-11-04
Lithuania, Vilnius
 

Why not link generate inline, but paste from custom code?

Your all clients have hight skill for programing? smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
v2uk
Member
 
Total Posts:  64
Joined:  2008-03-23
 

Hi guys,
I’ve tried the first method, but it just produces a report error url, assuming its catching on something.

I dont have much php knowledge but asking about,

<li class="<?=(strpos('contacts',$PHP_SELF))?'active':'';?>">Contact Us</li>

Is apparently more efficient, but I can’t seem to get either working, any ideas?

I’m after a method of manually inputting the normal navigation around the product navigation that the system generates (e.g. Products > Product Category > Product Item) to render something along the lines of:

| Home | Products | About Us | Contact Us | Some other link |

Utilising the active tag, this appears to be the only method at the moment untill the admin categories are changed so that you can just create a category and link, but not let it create a page at the same time.

Any ideas what I’m doing wrong?

Cheers

 
Magento Community Magento Community
Magento Community
Magento Community
 
Scott
Guru
 
Avatar
Total Posts:  333
Joined:  2007-08-31
Northwest Ohio
 

Also, if you’re looking to add the class for the account and login/logout links (e.g. class="top-link-account") ...which don’t have classes applied by default… I have figured out a way to do that.

Simply add: <li/><a>class="top-link-account"</a> after <position>

More Details Here: http://www.magentocommerce.com/boards/viewthread/11515/

 
Magento Community Magento Community
Magento Community
Magento Community
 
atlasit
Member
 
Avatar
Total Posts:  40
Joined:  2008-06-03
Los Angeles, CA
 

<action method="addLink" translate="label title"><label>test link</label><url>test_link</url><title>Test Link</title><prepare>true</prepare><urlParams/><position>2</position></action>

Thank you Laurent for this code snippet!  I was trying to figure out how to link to a cms page via top links.  This was exactly the answer i was looking for!

 
Magento Community Magento Community
Magento Community
Magento Community
 
pcartist
Jr. Member
 
Total Posts:  26
Joined:  2012-06-12
 

Hello,

i had to insert the “active” class for one of our customers. I solved the problem without editing the core-files.

This is my templatefile /app/design/frontend/myTemplate/default/template/page/template

<?php $_links $this->getLinks(); ?>
<?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 $_classes 
'';
            if(
$_link->getUrl() == $this->getRequest()->getRequestUri()) $_classes .= 'active ';
            if(
$_link->getIsFirst()) $_classes .= 'first';
            if(
$_link->getIsLast()) $_classes .= 'last';
        
?>
        
            
<li <?php if($_classes !='') echo "class='$_classes'"?> <?php echo $_link->getLiParams() ?>><?php echo $_link->getBeforeText() ?><a href="<?php echo $_link->getUrl() ?>" title="<?php echo $_link->getTitle() ?>" <?php echo $_link->getAParams() ?>><?php echo $_link->getLabel() ?></a><?php echo $_link->getAfterText() ?></li>
        
<?php endif;?>

Not beautyfull, but it works.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top