OpenCart Community

OpenCart Community Forum - Discuss shopping cart and e-commerce solutions.
https://forum.opencart.com/

Making a new tab next to home?

https://forum.opencart.com/viewtopic.php?t=21560

Page 1 of 1

Making a new tab next to home?

Posted: Mon Oct 18, 2010 10:37 pm
by Digital Sushi
Hi all! This is my first post here :)

I did find another topic on this, but got stuck.

Basically, what I want to do is create another tab next to Home, but before Specials. It's called Forum and I want it to link to a Forum subdomain I'll be creating.

Any help?

EDIT: At the same time is it possible to remove the country and currency selectors?

Re: Making a new tab next to home?

Posted: Tue Oct 19, 2010 12:54 pm
by jones
Find:

Code: Select all

<a href="<?php echo str_replace('&', '&', $home); ?>" id="tab_home"><?php echo $text_home; ?></a>
after add:

Code: Select all

<a href="//yourdomain.com/forum/" class="nav">FORUM</a >
or

Find:

Code: Select all

<a href="<?php echo str_replace('&', '&', $special); ?>" style="background-image: url('catalog/view/theme/default/image/special.png');"><?php echo $text_special; ?></a>
before add:

Code: Select all

<a href="//yourdomain.com/forum/" style="background-image: url('catalog/view/theme/default/image/your_image_forum.png');">Forum</a>
EDIT: At the same time is it possible to remove the country and currency selectors?
Yes it is.

Re: Making a new tab next to home?

Posted: Tue Oct 19, 2010 2:27 pm
by Digital Sushi
jones wrote:Find:

Code: Select all

<a href="<?php echo str_replace('&', '&', $home); ?>" id="tab_home"><?php echo $text_home; ?></a>
after add:

Code: Select all

<a href="//yourdomain.com/forum/" class="nav">FORUM</a >
This one worked, but pushed Checkout into a new line
jones wrote:Find:

Code: Select all

<a href="<?php echo str_replace('&', '&', $special); ?>" style="background-image: url('catalog/view/theme/default/image/special.png');"><?php echo $text_special; ?></a>
before add:

Code: Select all

<a href="//yourdomain.com/forum/" style="background-image: url('catalog/view/theme/default/image/your_image_forum.png');">Forum</a>
This wasn't exactly what I'd pictured, but itworked perfectly. Thanks!
jones wrote:
EDIT: At the same time is it possible to remove the country and currency selectors?
Yes it is.
[/quote]
Thanks. Managed to mod it myself :)

Re: Making a new tab next to home?

Posted: Tue Oct 19, 2010 3:06 pm
by jones
Digital Sushi wrote:
jones wrote:Find:

Code: Select all

<a href="<?php echo str_replace('&', '&', $home); ?>" id="tab_home"><?php echo $text_home; ?></a>
after add:

Code: Select all

<a href="//yourdomain.com/forum/" class="nav">FORUM</a >
This one worked, but pushed Checkout into a new line
You just need to reduce the width of your header menu in stylesheet.css place in stylesheet folder
Digital Sushi wrote:
jones wrote:Find:

Code: Select all

<a href="<?php echo str_replace('&', '&', $special); ?>" style="background-image: url('catalog/view/theme/default/image/special.png');"><?php echo $text_special; ?></a>
before add:

Code: Select all

<a href="//yourdomain.com/forum/" style="background-image: url('catalog/view/theme/default/image/your_image_forum.png');">Forum</a>
This wasn't exactly what I'd pictured, but itworked perfectly. Thanks!
the new small picture that describe your forum as similar to special offfers. boomarks etc then put the picture in catalog\view\theme\default\image\ folder
Digital Sushi wrote:
jones wrote:
EDIT: At the same time is it possible to remove the country and currency selectors?
Yes it is.
Thanks. Managed to mod it myself :)
Anytime, hope you get luck of senses

Re: Making a new tab next to home?

Posted: Sat Nov 27, 2010 6:02 am
by lith07
Hello,

How do I make it so that when I am on my new page, it shows the tab as selected, and displayes the selected state of the tab? Right now when I am on my new tab, it just has my home tab selected.

Thanks!

Re: Making a new tab next to home?

Posted: Sat Nov 27, 2010 2:20 pm
by dennisBaskin
lith07 wrote:Hello,

How do I make it so that when I am on my new page, it shows the tab as selected, and displayes the selected state of the tab? Right now when I am on my new tab, it just has my home tab selected.

Thanks!
find this jQuery code in your header.tpl inside your view files:

Code: Select all

$(document).ready(function() {
	route = getURLVar('route');
	
	if (!route) {
		$('#tab_home').addClass('selected');
	} else {
		part = route.split('/');
		if (route == 'common/home') {
			$('#tab_home').addClass('selected');
		} else if (route == 'account/login') {
			$('#tab_login').addClass('selected');	
		} else if (part[0] == 'account') {
			$('#tab_account').addClass('selected');
		} else if (route == 'checkout/cart') {
			$('#tab_cart').addClass('selected');
		} else if (part[0] == 'checkout') {
			$('#tab_checkout').addClass('selected');
		} else {
			$('#tab_home').addClass('selected');
		}
	}
});
Then add this line before the if statement:

Code: Select all

	var loc = window.location;
});
within the if statement add the following:

Code: Select all

if (loc == 'http://www.aandjjewels.com/wp/shop/events') {
			$('#tab_events').addClass('selected');
		}
The full version should look like this (remember to move $('#tab_home').addClass('selected'); into another else statement):

Code: Select all

$(document).ready(function() {
	route = getURLVar('route');
	var loc = window.location;
	
	if (!route) {
		 if (loc == 'http://www.YOURSITE.com/YOUR_SUB_DIR/SEO_PAGE_NAME') {
			$('#YOUR_TAB_ID').addClass('selected');
		} else {
			$('#tab_home').addClass('selected');
		}
	} else {
		part = route.split('/');
		
		if (route == 'common/home') {
			$('#tab_home').addClass('selected');
		} else if (route == 'account/login') {
			$('#tab_login').addClass('selected');	
		} else if (part[0] == 'account') {
			$('#tab_account').addClass('selected');
		} else if (route == 'checkout/cart') {
			$('#tab_cart').addClass('selected');
		} else if (part[0] == 'checkout') {
			$('#tab_checkout').addClass('selected');
		} else {
			$('#tab_home').addClass('selected');
		}
	}
});
All we are doing here is using javaScript to locate which url you are at when the page loads and if it matches we add the class "selected" to the tab you created. Of coarse don't forget to rename all the areas written in caps so that they match with what you are trying to do.

That probably should have been under a different post, but oh well. Hopefully this will help somebody. :D

Re: Making a new tab next to home?

Posted: Sat Nov 27, 2010 5:23 pm
by lith07
Hey Dennis,

I cant seem to get it to work. I copy and pasted your code, changed parts with caps, and it just showing the home tab selected. My link is...

<a href="index.php?route=information/information&information_id=6" id="tab_articles">Articles</a>

and my code is....

$(document).ready(function() {
route = getURLVar('route');
var loc = window.location;

if (!route) {
if (loc == 'http://freetrition.com/opencart/index.p ... ation_id=6') {
$('#tab_articles').addClass('selected');
} else {
$('#tab_home').addClass('selected');
}
} else {
part = route.split('/');

if (route == 'common/home') {
$('#tab_home').addClass('selected');
} else if (route == 'account/login') {
$('#tab_login').addClass('selected');
} else if (part[0] == 'account') {
$('#tab_account').addClass('selected');
} else if (route == 'checkout/cart') {
$('#tab_cart').addClass('selected');
} else if (part[0] == 'checkout') {
$('#tab_checkout').addClass('selected');
} else {
$('#tab_home').addClass('selected');
}
}
});

Any ideas? Thanks for the help btw

Re: Making a new tab next to home?

Posted: Sun Nov 28, 2010 10:50 am
by lith07
Bump: anyone? I know it has to be a simple fix, but I just can't figure it out =[

Re: Making a new tab next to home?

Posted: Sun Nov 28, 2010 1:41 pm
by openmycart.com
for

Code: Select all

http://freetrition.com/opencart/index.php?route=information/information&information_id=6
I thinks You just need to add

Code: Select all

index.php?route=information/information&information_id=<?php echo $information_id; ?>/
but i'm not tested it yet

Re: Making a new tab next to home?

Posted: Sun Nov 28, 2010 4:51 pm
by lith07
No that doesn't work. I'm not trying to make the link dynamic, I am just trying to say that when the tab that is linked to information_id=6 is selected, the tab changes to its selected state. But thanks for the help anyways. Have any other suggestions?

Re: Making a new tab next to home?

Posted: Sun Nov 28, 2010 5:05 pm
by justinv
if this is the same site I helped you with your anythingSlider() before, try this in your header.tpl:

REPLACE THIS:

if (route == 'common/home') {
$('#tab_home').addClass('selected');
} else if (route == 'account/login') {
$('#tab_login').addClass('selected');
} else if (part[0] == 'account') {
$('#tab_account').addClass('selected');
} else if (route == 'checkout/cart') {
$('#tab_cart').addClass('selected');
} else if (part[0] == 'checkout') {
$('#tab_checkout').addClass('selected');
} else {
$('#tab_home').addClass('selected');
}

WITH THIS:

if (route == 'common/home') {
$('#tab_home').addClass('selected');
} else if (route == 'account/login') {
$('#tab_login').addClass('selected');
} else if (route == 'information/information') {
$('#tab_articles').addClass('selected');
} else if (part[0] == 'account') {
$('#tab_account').addClass('selected');
} else if (route == 'checkout/cart') {
$('#tab_cart').addClass('selected');
} else if (part[0] == 'checkout') {
$('#tab_checkout').addClass('selected');
} else {
$('#tab_home').addClass('selected');
}

Re: Making a new tab next to home?

Posted: Sun Nov 28, 2010 5:18 pm
by lith07
Justin you did it again! Thanks!

I've also figured out that I can change information/information to the 'loc' variable and set it to the URL. This allows me to set different information pages to different tabs, and still allow the selected effect to work. This is exactly what I've been trying to learn.

Thanks again Justin, and you really need a donate button!

Re: Making a new tab next to home?

Posted: Mon Nov 29, 2010 4:58 am
by dennisBaskin
lith07 wrote:Justin you did it again! Thanks!

I've also figured out that I can change information/information to the 'loc' variable and set it to the URL. This allows me to set different information pages to different tabs, and still allow the selected effect to work. This is exactly what I've been trying to learn.

Thanks again Justin, and you really need a donate button!

If you have a route that you are going through then you can directly put in the the route logic like the others, but remember to take out the window.location variable out also, as it is only helpful when you don't have route information specified.

Glad it worked for you! :D

Re: Making a new tab next to home?

Posted: Mon Feb 28, 2011 1:09 am
by afendio
lith07 wrote:Justin you did it again! Thanks!

I've also figured out that I can change information/information to the 'loc' variable and set it to the URL. This allows me to set different information pages to different tabs, and still allow the selected effect to work. This is exactly what I've been trying to learn.

Thanks again Justin, and you really need a donate button!
hello lith07, can u teach me how to do that "to set different information pages to different tabs, and still allow the selected effect to work" ? or anybody who know how to code that? please help.

thanks.

Re: Making a new tab next to home?

Posted: Tue Oct 11, 2011 7:49 am
by FraZeks
The solution is in this tread. :)
All times are UTC+08:00
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/