I have this code in top.phtml which displays my menu items in my Magento store:
<div class="header-nav-container">
<div class="header-nav">
<h4 class="no-display"><?php echo $this->__('Category Navigation:') ?></h4>
<ul id="nav">
<li <?php if(!Mage::registry('current_category')) { echo 'class="level0 active"'; } else { echo 'class="level0"'; } ?>><span><?php echo $this->__('Home') ?></span></li>
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawItem($_category) ?>
<?php endforeach ?>
<li <?php if(!Mage::registry('current_category')) { echo 'class="level0 active"'; } else { echo 'class="level0"'; } ?>><span><?php echo $this->__('Sale Items') ?></span></li>
</ul>
</div>
I have an extra li at the bottom which displays another page. The problem I have occurs when I click the ‘Sales Item’ page: its link becomes active but so does the home page link. How can I prevent the home page link from appearing active?
I’ve added a screenshot to show the problem:
Screenshot
The lines for Home and Sale Items are both outputting an active category link when the current category is not defined, via the code if(!Mage::registry('current_category')). Instead of checking the category, check the current controller/action.
Here's a list of URL functions (for getting the controller/action):
http://docs.magentocommerce.com/Mage_Core/Mage_Core_Model_Url.html
Code like this should work. It depends on whether or not catalogsale is the identifier for a custom controller or action, which depends on your setup:
if ($this->getRequest()->getControllerName() == 'catalogsale')
// Output active class declaration
/* Otherwise, try looking at the action name. */
if ($this->getRequest()->getActionName() == 'catalogsale')
// Output active class declaration
I ended up fixing this using some javascript. I added this to the new page:
<script type="text/javascript">
Event.observe(window, 'load', function() {
$$('li.active').invoke('removeClassName','active');
$$('li.newmenu').invoke('addClassName','active');
});
</script>
The new menu item should have a class of 'newmenu' for the above code to work.
Related
My situation:
I have several pages like home.php, about.php, gallery.php ...
In all these pages i include the menu with the anchors with php. so the menu is not in the pages. In all the pages i have the line: include('includes/menu.php');
What i want to achieve: if url is mydomain.com /gallery.php the anchor in the menu should have an extra class like "active" so i can style it different (current page is open).
I tried it with jquery:
I gave all the anchors a class "clickable" like below:
<ul class="main-menu">
<li><a class="clickable" href="index.php">Home</a></li>
<li><a class="clickable" href="gallery.php">Gallery</a></li>
<li><a class="clickable" href="openingtimes.php">Openingtimes</a></li>
</ul>
And load this jquery code:
$(document).ready(function()
{
$(function() { //run when the DOM is ready
$(".clickable").click(function() {
$(this).addClass("active"); //add the class to the clicked element
});
});
});
But the problem that appears: when click on the anchor, lets say gallery.php, it gets the class "active' shortly but the gallery.php is loading and the menu is again included via php. Ofcourse, this works only if you stay on the same page.
What can i do best with this situation to make an anchor active when the specific page is loaded?
Maybe read the url and then on basis of this url add a class to the anchor?
Use $_SERVER['PHP_SELF'] or $_SERVER['REQUEST_URI']
Try using:
<ul class="main-menu">
<li><a class="clickable <?php if($_SERVER['PHP_SELF'] == '/index.php') { echo "active"; } ?>" href="index.php">Home</a></li>
<li><a class="clickable <?php if($_SERVER['PHP_SELF'] == '/gallery.php') { echo "active"; } ?>" href="gallery.php">Gallery</a></li>
<li><a class="clickable <?php if($_SERVER['PHP_SELF'] == '/openingtimes.php') { echo "active"; } ?>" href="openingtimes.php">Openingtimes</a></li>
</ul>
Also make sure if the file is in another directory to add the name ex. if($_SERVER['PHP_SELF'] == '/folder/index.php')
Documentation: http://php.net/manual/en/reserved.variables.server.php
The following displays several tabs with UnitName labels. When an associated tab is clicked it causes a table associated with that tab to be displayed (javascript).
How would I change this so a particular UnitName is treated as the active one and display the associated table automatically as opposed to have to click the desired UnitName tab first?
foreach($unit_list as $unit)
{
echo '<li>'.$unit['UnitName'].'</li>';
}?>
//the following doesn't happen until the javascript knows which tab is active
<div class="tab-content">
<?php $j=0;$i=0;
foreach($unit_list as $unit)
{?>
<div class="tab-pane" id="unit<?php echo $j;?>">
<ul class="nav nav-tabs tab-color" id="deptTabs">
<?php $userDept = 0; $k=$i; foreach($dept_list[$j] as $dept)
{?>
<li
<?php
if($dept['Department']==$user_info[0]['Department'])
{
$userDept=$i;
echo "class=\"active\"";
}?>
>
<a href="#dept
<?php echo $i;?>
" data-toggle="tab">
<?php echo $dept['Description'];?></a></li>
<?php $i++;
}
$i=$k #put i back to the value it started at?>
</ul>
Just use .trigger() with jquery.
$(document).ready(function(){
$('#dept_tabs li').each(function(i,v){
if(i.hasClass('active')){
i.trigger('click');
}
});
});
This will loop through all the li elements, find the one thats active,
And trigger a 'click' event on it.
This is assuming that you have a predefined 'click' event assigned to these tabs.
Ie...
$('#deptTabs li').click(function(){
// Show table here based on which tab was clicked
});
I'm trying to figure out how to add a css class to a <li> tag in my menu navigation. I'm using a template that gets included on every page of site. In the template is the menu navigation code. I need to set the css class on the <li> for the corresponding active page using PHP_SELF I presume?
Navigation looks like this
And this is what it should look like when the page is displayed that corresponds to the page that was clicked in the navigation menu.
Here is the navigation menu code
<!-- MENU BEGIN -->
<div id="menu">
<ul id="nav">
<li>Home</li>
<li <?php echo $class_current; ?>>Technician</li>
<li <?php echo $class_current; ?>>Programming</li>
</ul>
</div>
<!-- MENU END -->
Here is the PHP function I am trying to create
function classCurrent(){
if(dirname($_SERVER['PHP_SELF']) == true) {
echo ' class="current"';
}
else {
echo '';
}
$current = classCurrent();
return $current;
}
I know this is possible, I just can't figure it all out yet.
You may try specifying some base class that has variables for the corresponding menus. So like if you are requesting the technician page:
Class Activmenu {
public $technician = true;}
alternatively you may use superglobal variables but this is safer. And in the menu you can check for the true item
if(Activemenu->technician)? echo'class="activeclass"' : 0;
Checking urls you will run into problems, if later on you have to modify your url structure.
So it is really simple actually to do this. All that needs to be done is have a variable set on the active page above the <html> tag preferably.
Example:
<?php $currentPage = 'technician';
<html>
So now we have this variable set on the technician page above the html tag. Now to call it in the template page on the navigation menu <li> all that needs to be done is the following.
<?php if ($currentPage=="technician") echo " class=\"current\""; ?>
Now just need to repeat this step for each page of the website.
This was also answered here PHP navigation menu
and a real good tutorial on how to do it is here http://alistapart.com/article/keepingcurrent
As a result the navigation code will end up looking something like this
<!-- MENU BEGIN -->
<div id="menu">
<ul id="nav">
<li<?php if ($currentPage=="home") echo " class=\"current\""; ?>>Home</li>
<li<?php if ($currentPage=="technician") echo " class=\"current\""; ?>>Technician</li>
<li<?php if ($currentPage=="programming") echo " class=\"current\""; ?>>Programming</li>
</ul>
</div>
<!-- MENU END -->
I have a div that includes shoutbox posts. I'm using jQuery and ajax to change the pages within the div. However, when the page changes, it loses the link to the javascript file so that the next time I try to change the page it actually continues with the link action instead of doing the ajax in the background. Then after that it's back to normal and it alternates back and forth between being linked to the file and not.
Also before, it was rendering the whole page so that my layout was being displayed on the refresh instead of just the shoutbox posts. I'm guessing that finally getting it to refresh without re displaying the whole layout again is what's causing it to lose the connection to the javascript file.
This is the code for the posts. The shoutbox_arrows contains the links to change the page. refresh_me is what I'm loading into my div to refresh the content.
<div id="shoutbox_arrows">
<?php $current_page=s tr_replace( '?', '#', getURI(fullURL())); ?>
<ul class="no_dots">
<li id="first_page"><<
</li>
<li id="previous_page"><
</li>
<li><strong>Pg#<?php if ($page > $last_page) {echo $last_page;} else {echo $_SESSION['shoutbox_page'];} ?></strong>
</li>
<li id="next_page">>
</li>
<li id="last_page">>>
</li>
</ul>
</div>
<div id="shoutbox" class="custom_scrollbar">
<div id="refresh_me">
<?php if (sizeof($shouts)==0 ) { ?>
<p>There are no posts.</p>
<?php } foreach ($shouts as $shout) { foreach ($shout as $k=>$v) { $shout[$k] = utf8_encode($v); if ($k == 'guest') { $shout[$k] = ucwords($v); } } ?>
<div class="post_info">
<div class="left">
<?php if ($shout[ 'user_id']==n ull) {echo $shout[ 'guest'];} else { ?><?php echo ucwords(userinfo($shout['user_id'])->username); ?>
<?php } ?>
</div>
<div class="right">
<?php time_format($shout[ 'created_at']); ?>
</div>
</div>
<p class="post_comment" id="shoutbox_comment_<?php echo $shout['id']; ?>">
<?php echo $shout[ 'comment']; ?>
</p>
<?php if (!$shout[ 'last_edited_by']==n ull) { ?>
<p class="last_edited">Edited by
<?php echo ucwords(userinfo($shout[ 'last_edited_by'])->username); ?>
<?php time_prefix($shout[ 'updated_at']); ?>
<?php time_format($shout[ 'updated_at']); ?>.</p>
<?php } ?>
<?php if (current_user()) { if (current_user()->user_id == $shout['user_id'] or current_user()->is_mod) { ?>
<p class="post_edit"> <span class="edit" id="<?php echo $page; ?>">
<a id="<?php echo $shout['id']; ?>" href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
edit
</a>
</span> | <span class="delete" id="<?php echo $page; ?>">
<a href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
delete
</a>
</span>
<span class="hide" id="<?php echo $page; ?>">
<?php if (current_user()->is_mod) { ?> | <a href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
hide
</a><?php } ?>
</span>
</p>
<?php }} ?>
<?php } ?>
</div>
</div>
This is the page that my ajax request is going to.
<?php
if (isset($data['page'])) {
$_SESSION['shoutbox_page'] = intval($data['page']);
}
$redirect = ltrim(str_replace('#', '?', $data['redirect']), '/');
redirect_to($redirect);
Div that contains the content to be refreshed.
<div id="shoutbox_container">
<?php relativeInclude( 'views/shoutbox/shoutbox'); ?>
</div>
jQuery
$('#shoutbox_arrows ul li a').click(function (event) {
event.preventDefault();
$.post('views/shoutbox/' + $(this).attr('href'), function (data) {
$('#refresh_me').load(location.href + " #refresh_me>", "");
$('#shoutbox_arrows').load(location.href + " #shoutbox_arrows>", "");
});
});
So I guess to clarify the issue:
The shoutbox_container displays posts for the shoutbox. The page is controller by a session that gets passed as a variable to get the correct chunk of posts to show. Clicking on the links in shoutbox_arrows sends an ajax request to a page which changes the session variable. The div that contains the post itself (refresh_me) as well as the arrows (for the links) get refreshed. After changing the page once, the shoutbox is no longer connected to the javascript file so when you click to change the page again, instead of an ajax request, the page itself actually changes to the link.
Any ideas how I can fix this? I've spent a lot of time on this and it's getting rather frustrating. I feel like I could just settle for it as it is now but it's bugging me too much that it's not working exactly how I intend (although generally it works in terms of changing the pages).
Also just a note, I used jsfiddle to tidy up the code but it looks like it did some funky stuff (looking just at $current_page=s tr_replace). lol. So there aren't any syntax errors if that's what you're thinking. ><
Also I was going to set up a fiddle but I don't really know how to handle links in it so it would have been useless.
The issue is that you bind the click handler to the a tags on document ready (the jQuery code you provided). So when you replace the content of #shoutbox_arrows you remove the click handler you previously attached since those original handlers are removed from the DOM along with the original elements.
You need to use the jQuery .on() method and event bubbling. This will attach the handler on a parent element that will not be removed in your content replace and can continue to "watch" for the event to bubble up from it children elements.
Try replacing your jQuery code with this:
$('#shoutbox_arrows').on('click', 'ul li a', function (event) {
event.preventDefault();
$.post('views/shoutbox/' + $(this).attr('href'), function (data) {
$('#refresh_me').load(location.href + " #refresh_me>", "");
$('#shoutbox_arrows').load(location.href + " #shoutbox_arrows>", "");
});
});
For performance, you should add a class to the a, and targeting it directly with $('a.aClass')
Good ways to improve jQuery selector performance?
I have an opencart category page that I am trying to hide the title DIV for. Out of all the categories and sub cats there is (for now) only one that I am trying to hide.
The following code I have used does not work:
<?php if ($categories && $heading_title!="HEADING TITLE HERE") { ?>
<?php elseif : ?>
<div id="headerhide" style="width:800px;">
<h1><?php echo $heading_title; ?></h1>
</div>
<?php } ?>
<?php endif ?>
<?php if ($categories && $heading_title!="HEADING TITLE HERE") { ?>
<?php }
else {
?>
<div id="headerhide" style="width:800px;">
<h1><?php echo $heading_title; ?></h1>
</div>
<?php } ?>
<?php if ($categories && $heading_title!="HEADING TITLE HERE") { } else { ?>
<div id="headerhide" style="width:800px;">
<h1><?=$heading_title?></h1>
</div>
<?php } ?>
I have this setup on my OpenCart information.tpl page:
<?
// If FAQs page or content show AJAX
// We check for case sensitive titles - the title is case sensitive
if($heading_title=="FAQs" || $heading_title=="Faqs") { ?>
<script type="text/javascript">
$(document).ready(function(){
// ETC
});
</script>
<?
// Not the FAQs page so do nothing
}
?>
I've recently made a commercial vQmod that will be of use to you for this. It's called Custom Templates and will allow you to assign it to as many individual category pages as you want. It works for more than just categories too (manufacturer, product and info pages). While it may be a bit overkill for one page, if you plan on using it for multiple pages in the future it will be better in the long run in my opinion