I want to make my topmenu link active when clicked on it.It contains Home, Specials(category name),About Us(cms page),FAQ(cms page) and Contact us.I want that when i clicked on any of the upper link,that link will be active.I used one class "active-1" for that.I want any condition to make the toplink active when clicked on it.
the code used in topmenu.phtml page whick make you easy to understand.
<style>
.nav-container ul.somelink li.active-1 a{ background:#fa9c04;}
</style>
<?php $_menu = $this->getHtml('level-top') ?>
<?php $page_route=Mage::app()->getRequest()->getRouteName(); ?>
<?php $pageID = Mage::getBlockSingleton('cms/page')->getPage()->getIdentifier();?>
<div class="nav-container">
<ul class="somelink">
<li <?php if($pageID=="home") echo 'class="active-1"';?> ><a href="
<?php echo Mage::getBaseUrl();?>">Home</a></li>
<li <?php if($pageID=="specials.html") echo 'class="active-1"';?>><a href="
<?php echo $this->getUrl('specials.html') ?>">Specials</a></li>
<li <?php if($pageID=="about-us") echo 'class="active-1"';?>><a href="
<?php echo $this->getUrl('about-us') ?>">About Us</a></li>
<li <?php if($pageID=="faq") echo 'class="active-1"';?>><a href="
<?php echo $this->getUrl('faq') ?>">FAQ</a></li>
<li <?php if($page_route=="contacts") echo 'class="active-1"';?>><a href="
<?php echo Mage::getBaseUrl();?>contacts">contact Us</a></li>
</ul>
</div>
the above code works but when i am clearing the cache,then the menu will be active,it is not active at that time i have to clear the cache again and again for making the menu active
I usually do it from css.
So have the menu like you have it, but add some classes to each item:
<?php $_menu = $this->getHtml('level-top') ?>
<div class="nav-container">
<ul class="somelink">
<li><a class="home-link" href="<?php echo $this->getUrl('') ?>">Home</a></li>
<li><a class="specials-link" href="<?php echo $this->getUrl('specials.html') ?>">Specials</a></li>
<li><a class="about-link" href="<?php echo $this->getUrl('about-us') ?>">About Us</a></li>
<li><a class="faq-link" href="<?php echo $this->getUrl('faq') ?>">FAQ</a></li>
<li><a class="contact-link" href="<?php echo $this->getUrl('contacts') ?>">Contact Us</a></li>
</ul>
</div>
Since every magento page has a different class on the <body> element you can use that.
Add the following to your css file. (replace color:red with the properties that highlight your menu item)
.cms-index-index .home-link { /* for homepage*/
color:red;
}
.cms-specials .specials-link { /*for specials page */
color:red
}
....
As a general rule, visit every page in your menu, get the specific class from the body and add a line like this to the css
.[body-class-here] .[link-to-be-selected-class-here] {
color:red
}
An alternative for the 1.7+ version would be to add the menu items directly in the top menu using the page_block_html_topmenu_gethtml_before event. When adding a menu item, the item supports an 'active' property, where you can put the code to make the link active.
See this for more info
Hi I think this will help's u, try this,
<?php $_menu = $this->getHtml('level-top') ?>
<?php $page_route=Mage::app()->getRequest()->getRouteName(); ?>
<?php $pageID = Mage::getBlockSingleton('cms/page')->getPage()->getIdentifier();?>
<div class="nav-container">
<ul class="somelink">
<li <?php if($pageID=="home") echo 'class="active"';?> ><a href="
<?php echo Mage::getBaseUrl();?>">Home</a></li>
<li <?php if($pageID=="specials.html") echo 'class="active"';?>><a href="
<?php echo $this->getUrl('specials.html') ?>">Specials</a></li>
<li <?php if($pageID=="about-us") echo 'class="active"';?>><a href="
<?php echo $this->getUrl('about-us') ?>">About Us</a></li>
<li <?php if($pageID=="faq") echo 'class="active"';?>><a href="
<?php echo $this->getUrl('faq') ?>">FAQ</a></li>
<li <?php if($page_route=="contacts") echo 'class="active"';?>><a href="
<?php echo Mage::getBaseUrl();?>contacts">contact Us</a></li>
</ul>
</div>
And add active class like this .nav-container ul li.active(color:red);
Related
I am currently making a template in Joomla using Materialize CSS as the framework. I get stuck with the part where I make a dropdown menu in Joomla. The HTML should go as followed (as explained on the documentation page of Materialize)
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
</ul>
<li>
<a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a>
</li>
My index.php goes as follows:
<!-- Start Navbar -->
<nav class="indigo" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="index.php" class="brand-logo">
<?php echo $logo; ?>
<?php if ($this->params->get('sitedescription')) : ?>
<?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
<?php endif; ?>
</a>
<ul class="right hide-on-med-and-down">
<jdoc:include type="modules" name="position-1" style="none" />
</ul>
<ul id="nav-mobile" class="side-nav">
<li class="material-menu">
<a href="index.php">
<?php echo $logo; ?>
<?php if ($this->params->get('sitedescription')) : ?>
<?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
<?php endif; ?>
</a>
</li>
<jdoc:include type="modules" name="position-1" style="none" />
</ul>
<i class="mdi mdi-menu"></i>
</div><!-- /nav-wrapper container -->
</nav>
<!-- End Navbar -->
The problem is that I use the menu module twice because of the mobile menu. An ID tag can only be used once so the dropdown doesn't work.
Does anyone know how I can fix this?
Its not a good idea to have the same module position duplicated in the template multiple times as it will render the same markup every time.
Instead, the best approach is to create a copy of the menu module and publish it to your mobile menu position.
In Joomla Admin, duplicate the current menu module
Publish the duplicated menu module to a new position e.g. "mobile-nav". All other settings for this duplicated module can be identical to the original (desktop) menu module.
Update your template code to include position for "mobile-nav" where the mobile navigation should be displayed.
Update template code for new module position (just swap out position-1 with mobile-nav):
<ul id="nav-mobile" class="side-nav">
<li class="material-menu">
<a href="index.php">
<?php echo $logo; ?>
<?php if ($this->params->get('sitedescription')) : ?>
<?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
<?php endif; ?>
</a>
</li>
<jdoc:include type="modules" name="mobile-nav" style="none" />
</ul>
I have this code in template to make a static home button. On the home button on hover over I would like to have a blog button underneath.
<?php $_menu = $this->getHtml('level-top') ?>
<?php if($_menu): ?>
<div class="nav-container">
<div class="container_24">
<div class="grid_24">
<div id="menu-icon">Categories</div>
<ul id="nav" class="sf-menu">
<li class="level0 level-top<?php if (Mage::helper('core/url')->getCurrentUrl() === Mage::helper('core/url')->getHomeUrl()) echo ' active'; ?>">
<a class="level-top" href="<?php echo $this->getUrl('')?>">
<span>Home</span>
</a>
</li>
<?php echo $_menu ?>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<?php endif ?>
I have created a new1.phtml file in catalog/product with following content
<?php
//getting new product collection
$product=Mage::getModel("catalog/product")->getCollection();
$filtered_prodduct=$product->addAttributeToSelect("*")
->setOrder("created_at","desc")
->addPriceData();
echo "<ul>
<li>";
$i=0;
$row=3;
foreach($filtered_prodduct as $prod){
$i++;
if($i>$row*3){
break;
}
?>
<div class="prod_box">
<div class="center_prod_box">
<div class="product_title">
<a href="<?php echo $prod->getProductUrl()?>">
<?php echo $prod->getName() ?>
</a>
</div>
<div class="product_img">
<a href="<?php echo $prod->getproductUrl()?>">
<img src="<?php echo $prod->getImageUrl()?>" alt="" border="0" height="100" width="100">
</a>
</div>
<div class="prod_price">
<span class="reduce"><?php echo $prod->getSpecialPrice()?></span>
<span class="price"><?php echo $prod->getPrice()?></span><br/>
</div>
</div>
<div class="prod_details_tab">
<?php if($prod->isSaleable()): ?>
<a href="<?php echo $this->getUrl()?>checkout/cart/add? product=<?php echo $prod->getId(); ?>&qty=1" class="prod_buy">
<?php echo $this->__('Add') ?>
</a>
<?php else: ?>
<p class="availability out-of-stock"><span>
<?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
<a href="<?php echo $prod->getProductUrl()?>" class="prod_details">
Details
</a>
</div>
</div>
<?php }
?>
Every thing is ok ,but 'Add' button (means add to cart) is not working .It just opens checkout/cart.
i have added this phtml file in layout xml of home page. what is wrong in the code ?
You can do this my using below code ,which generated add to cart url.
Mage::helper('checkout/cart')->getAddUrl(($prod);
If product type is configurable and group or if product type is simple and it have customoption ,then it did not cart directly without selecting any options
The controller's action validates request therefore you should send formKey
public function addAction()
{
if (!$this->_validateFormKey()) {
$this->_goBack();
return;
}
...
{
Mage::helper('checkout/cart')->getAddUrl(($prod);
I am really newbie to Magento. I have this piece of code to show top menus.
<?php $_menu = $this->renderCategoriesMenuHtml(0,'level-top') ?>
<div class="nav-container">
<ul id="nav">
<li class="level0 first homelink"><span><?php echo $this->__('Home') ?></span></li>
<?php if($_menu): ?>
<?php echo $_menu ?>
<?php endif ?>
<?php $additionalLink = themeOptions('additionalLink'); ?>
<?php $additionalLinkUrl = themeOptions('additionalLinkUrl'); ?>
<?php if($additionalLinkUrl && $additionalLink): ?>
<li class="level0 clearence"><span><?php echo $additionalLink ?></span></li>
<?php endif ?>
</ul>
</div>
Now this is showing only Home as menu. I want to show other menus like about us,contacts,
and there will be also some categories with sub categories. I want my menu should look like this
http://8theme.com/demo/decostore/ . So can someone kindly tell me how to do this? Any help and suggestions will be really appreciable. Thanks
Here you have use the Top Menu (already created) in theme Folder /template/page/html/topMenu.phtml file
here includes the Categories and also the Custome url set using with blocks
We have a currency drop down selector in the top right of our header.
I would like to replace that with currency symbols to click on.
i.e.:
$ £ €
Check this link. This may be helpful.
Change currency dropdown
Currency symbol
Currency selector
If you dont want dropdown menu use this code in your themes "directory/currency.phtml"
<ul>
<?php foreach ($this->getCurrencies() as $_code => $_name): ?>
<li>
<a onclick="setLocation('<?php echo $this->getSwitchCurrencyUrl($_code) ?>')"><?php echo Mage::app()->getLocale()->currency($_code)->getSymbol()?> - <?php echo $_code ?></a>
</li>
<?php endforeach; ?>
</ul>
In your Themes template/directory/currency.phtml change the code to this (this is based on the RWD theme):
<?php if($this->getCurrencyCount()>1): ?>
<div>
<ul class="in_currency">
<?php foreach ($this->getCurrencies() as $_code => $_name): ?>
<li style="float:left;padding:0px 5px 0px 0px;">
<a href="<?php echo $this->getSwitchCurrencyUrl($_code) ?>" onclick="setLocation(this.value);">
<?php echo $_code ?>
<?php
$currencySymbol = Mage::app()->getLocale()->currency($_code)->getSymbol();
?>
<?php //echo $currencySymbol; ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>