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>
Related
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 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);
basicly magento generate menu html:
<ul id="nav">
<li class="level0 nav-1 first level-top">
<span>Home</span>
</li>
<li class="level0 nav-1 first level-top parent">
<span>Category</span>
<ul class="level0">
<li class="level1 nav-2-1 first">
<span>Sub Category</span>
</li>
<li class="level1 nav-2-1">
<span>Sub Category</span>
</li>
<li class="level1 nav-2-1 last">
<span>Sub Category</span>
</li>
</ul>
</li>
</ul>
now, i want custom change output html menu (add more class html, add more element html...) somebody can help me?
There's different tutorials for doing this, but here's what I did:
Save /app/code/frontend/design/default/default/template/page/html/topmenu.phtml to /app/code/frontend/design/yourpackagename/yourthemename/template/page/html/topmenu.phtml and edit as follows:
<?php $_menu = $this->getHtml('level-top') ?>
<?php if($_menu): ?>
<div class="nav-container">
<ul id="nav">
<li class="level0 nav-1 first level-top"><a href="/" class="level-top" ><span>Home</span></a></li>
<?php echo $_menu ?>
</ul>
</div>
<?php endif ?>
To get yourpackagename and yourthemename, use System - Configuration - Design
hth, sconnie
I use for a menu-item the style "List All Categories".
I want to edit the code, however I cannot find this file anywhere!
I supposed it should be in components/com_content/views/category but no file I find there seems to be related to the html output.
This is an example of the HTML output:
<div class="categories-list">
<div class="category-item first">
<h3 class="page-header item-title"><a
href="/joomla/index.php/browse/8-eat-meet">
EAT&MEET</a>
</h3>
<img src="/joomla/images/cat1.jpg"/>
</div>
<div class="category-item">
<h3 class="page-header item-title"><a
href="/joomla/index.php/browse/9-dreaming">
DREAMING</a>
</h3>
<img src="/joomla/images/cat2.jpg"/>
</div>
Does anyone know where I can find this file?
Thank you.
That's because categories are generally attached to existing extensions, the majority use case being articles. My assumption here is these are the categories you are referring to. If you selected the "List all categories" menu option from the Articles sub-group, then the assumption is correct. The path is:
components/com_content/views/categories/tmpl
If you would like to change these files, I HIGHLY recommend not editing the core files but using template overrides to customize. See link below for specifics.
http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core
If it is the categorIES layout that you want that will be in the components/com_content/views/categories/tmpl categories folder (I'm assuming you are talking about in the front end).
The layout files are in the tmpl folder.
In Joomla 3.2 you will find that these files reference the files layouts/content/categories_default.php and layouts/content/categories_default_items.php.
This is because the core layouts are the same for all categories (and they can be used by any component that uses categories).
You can override both the tmpl files and the layouts in the html folder of your template.
Update
Here is the code block in the categories_default_items layout that produces the title, image and description HTML
<h3 class="page-header item-title">
<a href="<?php echo JRoute::_(ContentHelperRoute::getCategoryRoute($item->id));?>">
<?php echo $this->escape($item->title); ?></a>
<?php if ($this->params->get('show_cat_num_articles_cat') == 1) :?>
<span class="badge badge-info tip hasTooltip" title="<?php echo JHtml::tooltipText('COM_CONTENT_NUM_ITEMS'); ?>">
<?php echo $item->numitems; ?>
</span>
<?php endif; ?>
<?php if (count($item->getChildren()) > 0) : ?>
<span class="icon-plus"></span>
<?php endif;?>
</h3>
<?php if ($this->params->get('show_description_image') && $item->getParams()->get('image')) : ?>
<img src="<?php echo $item->getParams()->get('image'); ?>"/>
<?php endif; ?>
<?php if ($this->params->get('show_subcat_desc_cat') == 1) :?>
<?php if ($item->description) : ?>
<div class="category-desc">
<?php echo JHtml::_('content.prepare', $item->description, '', 'com_content.categories'); ?>
</div>
<?php endif; ?>
<?php endif; ?>