Post by sully210 » Tue Jul 20, 2010 8:36 pm

Hello again. I am trying to change the url link for the home button in the header. I have a "traditional" site built for a client and his store at a subdomain: store.villagecigaremporium.com. I would like the home button to take users back to the home page of the "traditional" site at www.villagecigaremporium.com. How can I do this? I have looked at the header.tpl file and am confused as to how to accomplish this task.

Thank you and Best on You :)

Thank you,
Sully :)


User avatar
Active Member

Posts

Joined
Tue Jul 13, 2010 4:46 am
Location - USA

Post by mystifier » Tue Jul 20, 2010 9:11 pm

If I understand your request, to change the 'Home Tab' link, you simply need to edit template/common/header.tpl and change:

Code: Select all

<div class="div4"><a href="<?php echo str_replace('&', '&', $home); ?>" id="tab_home"><?php echo $text_home; ?></a>
to:

Code: Select all

<div class="div4"><a href="http://www.yourdomain.com"><?php echo $text_home; ?></a>
(... you will need the http://)

Free v1.4.9 Extensions: Default Specials | Improved Search | Customer Activity Report | Customer Groups | Royal Mail With Handling | Improved Product Page | Random Products | Stock Report | All Products


User avatar
Active Member

Posts

Joined
Tue May 18, 2010 5:15 pm

Post by sully210 » Wed Jul 28, 2010 6:53 pm

Awesome :) Thank you so much. Now I have another question...what if I wanted to add a button to that navigation bar? This guy has a main website that he wants to connect to his shopping cart site so I would like to change the home button to "products" and add a button called "home" that will navigate to the main site's home page. I guess ideally i would like to have buttons for location and gallery as well. You can take a look at the mess I have going on if you like and possibly send me in the right direction. I just want to thank all of you again for this amazing product and the support that goes along with it. When I get better at all of this I would love to help out as well. :)

Good on You-

Sully

Thank you,
Sully :)


User avatar
Active Member

Posts

Joined
Tue Jul 13, 2010 4:46 am
Location - USA

Post by mystifier » Wed Jul 28, 2010 7:23 pm

You would have to add a new tab in <div4> and add an entry to make the tab change when active in:
catalog/view/theme/YOURTHEME/template/common/header.tpl

...but the slightly tricky part would be changing:
catalog/view/theme/YOURTHEME/stylesheet/stylesheet.css
so that six tabs are resized to occupy the same space as the five current ones; otherwise, you will have to widen <div4> and change your template header design.

In the former case, you would also have to prepare new images:
catalog/view/theme/YOURTHEME/image/tab_1.png
catalog/view/theme/YOURTHEME/image/tab_2.png

which show the two states of the tab.

Free v1.4.9 Extensions: Default Specials | Improved Search | Customer Activity Report | Customer Groups | Royal Mail With Handling | Improved Product Page | Random Products | Stock Report | All Products


User avatar
Active Member

Posts

Joined
Tue May 18, 2010 5:15 pm

Post by shopwherever » Tue Oct 26, 2010 9:22 am

Hi there,

I've been doing simmilar thing, I have managed to change the name of the tag and its hyperlink (which is a specific category in the catalogue), but the problem is that the tag image is not changing to tab_2.png.

I can see that other unchanged tags get ---class="selected"--- part in the <a href> but the ones I changed don't get this.

To be more precise, I changed:

<a href="<?php echo str_replace('&', '&', $account); ?>" id="tab_cart"><?php echo $text_account; ?></a>

to:

<a href="http://www.mydomainname.com/index.php?r ... ry&path=36" id="tab_cart">Holiday</a>

How do I fix this?

Thanks

Newbie

Posts

Joined
Tue Oct 26, 2010 9:15 am

Post by mystifier » Tue Oct 26, 2010 3:08 pm

Everything happens in header.tpl.

There are #header .div4 a { and #header .div4 a.selected { entries in the stylesheet, so tabs simply need to be <a> within <div4>

The state is set in javascript at the bottom of header.tpl

On the website I prepared, I have just also added different tab images on a particular tab just because I am learning css ;D

This simply (although it took me more than half an hour to figure out) uses #header .div4 a#tab_account.selected { and #header .div4 a#tab_account.selected {

Free v1.4.9 Extensions: Default Specials | Improved Search | Customer Activity Report | Customer Groups | Royal Mail With Handling | Improved Product Page | Random Products | Stock Report | All Products


User avatar
Active Member

Posts

Joined
Tue May 18, 2010 5:15 pm

Post by shopwherever » Tue Oct 26, 2010 6:20 pm

Thanks very much for the reply, but I'm still struggling.

Of 5 tabs, I wanted to have:

Home (leave as is)
Login (leave as is)
Account (leave as is)

Cart (link to a category – but keep the name #tab_cart)
Checkout (link to a category - but keep the name #tab_checkout)

I can see now as you pointed out to me, the whole thing is happening in the java script at the bottom of header.tpl

And I am now stuck there. Any ideas how to change the java script so the 2 tags change background image when selected? Or do I need to create 2 new:

#tab_category1, and
#tab_category2?

But if I do, that will change quite a few other things?

Many thanks

Newbie

Posts

Joined
Tue Oct 26, 2010 9:15 am

Post by mystifier » Tue Oct 26, 2010 7:57 pm

.div4 a {} and .div4 a.selected {} in the stylesheet define the two states of the tabs. The normal state is to show tab_1.png, when the class is changed to 'selected', it shows tab_2.png.

The javascript in header.tpl simply looks at the current path and sets the class of the appropriate tab so you don't need any new images or stylesheet changes, you simply need to amend the script to include:

Code: Select all

if (route == 'YourFolder/YourModule') {
    $('#tab_YourTab').addClass('selected');
}

Free v1.4.9 Extensions: Default Specials | Improved Search | Customer Activity Report | Customer Groups | Royal Mail With Handling | Improved Product Page | Random Products | Stock Report | All Products


User avatar
Active Member

Posts

Joined
Tue May 18, 2010 5:15 pm

Post by shopwherever » Tue Oct 26, 2010 8:14 pm

Many thanks.

My problem is that I have 2 different tabs, but they both pointing to the same 'product/category' route but to 2 different category ID's

Not sure how to set (route == 'MyFolder/MyModule') for each separate category as they currently clash with each other ?

Newbie

Posts

Joined
Tue Oct 26, 2010 9:15 am

Post by billyggla » Wed Oct 27, 2010 7:00 am

Add this

Code: Select all

path = getURLVar('path');

        if (path == '36_47') {
    $('#tab_account').addClass('selected');
    
        } else { 
directly after

Code: Select all

$(document).ready(function() {
    route = getURLVar('route'); 
Then add this

Code: Select all

Directly above this

Code: Select all

});
//--></script>   
Change 36_47 to the path id of your category
and change #tab_account to the tab you want selected

You can use any of the url vars by changing the word path to the var you want to use
so for information change path to information_id and for products change path to products_id etc.

hope that helps

Active Member

Posts

Joined
Mon Sep 20, 2010 7:05 am

Post by shopwherever » Thu Oct 28, 2010 7:06 am

Thanks so much ! It is something I couldn’t do myself. Brilliant – it works now !!!

Newbie

Posts

Joined
Tue Oct 26, 2010 9:15 am

Post by billyggla » Thu Oct 28, 2010 8:31 am

your welcome.. glad I could help..

Active Member

Posts

Joined
Mon Sep 20, 2010 7:05 am
Who is online

Users browsing this forum: Google [Bot] and 16 guests