Navigation above my site

Hi,

I'm using Zencart 1.3.9h and I'm using the zj_silver template.

I need to install my site navigation buttons above my Zencart site.

My Zencart;
http://www.teslacorp-rd-inc.com/Zen/

My site;
http://www.teslacorp-rd-inc.com/

The <script> code in the <head> for my buttons;

<style type="text/css"> div#container { width: 994px; position: relative; margin-top: 0px; margin-left: auto; margin-right: auto; text-align: left; } </style> <style type="text/css"> body { text-align: center; margin: 0; background-color: #FFFFFF; color: #000000; scrollbar-face-color: #000000; scrollbar-arrow-color: #000000; scrollbar-3dlight-color: #F0F0F0; scrollbar-darkshadow-color: #696969; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #A0A0A0; scrollbar-track-color: #C8C8C8; } </style> <script type="text/javascript" src="./jquery-1.4.2.min.js"></script> <style type="text/css"> #NavigationBar1 ul.navbar { list-style: none; margin: 0; padding: 0; } #NavigationBar1 ul.navbar li { height: 29px; width: 118px; float: left; margin: 0px 4px 0px 0px; } #NavigationBar1 ul.navbar li a { display: block; position: relative; } #NavigationBar1 ul.navbar li a img { position: absolute; z-index: 1; border-width: 0px; } #NavigationBar1 ul.navbar li span { display: block; height: 29px; width: 118px; position: absolute; z-index: 2; } </style> <style type="text/css"> #NavigationBar2 ul.navbar { list-style: none; margin: 0; padding: 0; } #NavigationBar2 ul.navbar li { height: 29px; width: 118px; float: left; margin: 0px 4px 0px 0px; } #NavigationBar2 ul.navbar li a { display: block; position: relative; } #NavigationBar2 ul.navbar li a img { position: absolute; z-index: 1; border-width: 0px; } #NavigationBar2 ul.navbar li span { display: block; height: 29px; width: 118px; position: absolute; z-index: 2; } </style> <script type="text/javascript"> $(document).ready(function() { $("#NavigationBar1 .navbar a").hover(function() { $(this).children("span").hide(); }, function() { $(this).children("span").show(); }) $("#NavigationBar2 .navbar a").hover(function() { $(this).children("span").hide(); }, function() { $(this).children("span").show(); }) }); </script> <link rel="icon" href="http://teslacorp-rd-inc.com/images/favicon.ico" type="images/favicon.ico"> <link rel="shortcut icon" href="http://teslacorp-rd-inc.com/images/favicon2.ico" type="images/favicon2.ico">

The <body> code;

<div id="container"> <div id="wb_Image1" style="margin:0;padding:0;position:absolute;left:0px;top:0px;width:993px;height:767px;text-align:left;z-index:0;"> <img src="images/wwb_img9.jpg" id="Image1" alt="" border="0" style="width:993px;height:767px;"></div> <div id="NavigationBar1" style="position:absolute;left:194px;top:3px;width:610px;height:29px;z-index:1"> <ul class="navbar"> <li><a href="http://www.teslacorp-rd-inc.com/index.html"><img alt="Welcome to TeslaCorp R&D Inc." title="Welcome to TeslaCorp R&D Inc." src="images/img0011_over.gif"><span><img alt="Welcome to TeslaCorp R&D Inc." title="Welcome to TeslaCorp R&D Inc." src="images/img0011.gif"></span></a></li> <li><a href="http://www.teslacorp-rd-inc.com/about_us.html"><img alt="Who we are and what we're all about." title="Who we are and what we're all about." src="images/img0021_over.gif"><span><img alt="Who we are and what we're all about." title="Who we are and what we're all about." src="images/img0021.gif"></span></a></li> <li><a href="http://www.teslacorp-rd-inc.com/contact_us.html"><img alt="Contact us at anytime." title="Contact us at anytime." src="images/img0023_over.gif"><span><img alt="Contact us at anytime." title="Contact us at anytime." src="images/img0023.gif"></span></a></li> <li><a href="http://www.teslacorp-rd-inc.com/investors.html"><img alt="Invest in a great company with a great team." title="Invest in a great company with a great team." src="images/img0024_over.gif"><span><img alt="Invest in a great company with a great team." title="Invest in a great company with a great team." src="images/img0024.gif"></span></a></li> <li><a href="http://www.teslacorp-rd-inc.com/locate_a_dealer.html"><img alt="Locate one of our dealers near you." title="Locate one of our dealers near you." src="images/img0025_over.gif"><span><img alt="Locate one of our dealers near you." title="Locate one of our dealers near you." src="images/img0025.gif"></span></a></li> </ul> </div> <div id="NavigationBar2" style="position:absolute;left:194px;top:35px;width:610px;height:29px;z-index:2"> <ul class="navbar"> <li><a href="http://www.teslacorp-rd-inc.com/news_and_press.html"><img alt="Lastest news and press relating to anything and eveything we do." title="Lastest news and press relating to anything and eveything we do." src="images/img0026_over.gif"><span><img alt="Lastest news and press relating to anything and eveything we do." title="Lastest news and press relating to anything and eveything we do." src="images/img0026.gif"></span></a></li> <li><a href="http://www.teslacorp-rd-inc.com/Nikola_Tesla.html"><img alt="One of the greatest men of all time." title="One of the greatest men of all time." src="images/img0027_over.gif"><span><img alt="One of the greatest men of all time." title="One of the greatest men of all time." src="images/img0027.gif"></span></a></li> <li><a href="http://www.teslacorp-rd-inc.com/r_and_d.html"><img alt="Research & Development." title="Research & Development." src="images/img0028_over.gif"><span><img alt="Research & Development." title="Research & Development." src="images/img0028.gif"></span></a></li> <li><a href="http://www.teslacorp-rd-inc.com/store.html"><img alt="Purchase one of our great innovative products." title="Purchase one of our great innovative products." src="images/img0029_over.gif"><span><img alt="Purchase one of our great innovative products." title="Purchase one of our great innovative products." src="images/img0029.gif"></span></a></li> <li><a href="http://www.teslacorp-rd-inc.com/support.html"><img alt="Product manuals, installation manuals our catalogue and more" title="Product manuals, installation manuals our catalogue and more" src="images/img0030_over.gif"><span><img alt="Product manuals, installation manuals our catalogue and more" title="Product manuals, installation manuals our catalogue and more" src="images/img0030.gif"></span></a></li> </ul> </div> </div>

Thanks for your help folks, i tried really hard to make this happen but no go. :(

I don't know the answer to your question, but I want to warn you that navigating in and out of Zen Cart can cause session issues and if someone had items in the shopping cart, they could be lost if the user goes back to your "main" site and reenters Zen Cart.

afo:

I don't know the answer to your question, but I want to warn you that navigating in and out of Zen Cart can cause session issues and if someone had items in the shopping cart, they could be lost if the user goes back to your "main" site and reenters Zen Cart.

Thanks for you input.

When someone leaves the site by clicking my store button to shop and check out, I have Paypal as a payment gateway. I have the confirm the order button in the cart set to target:blank. When the new browser opens to purchase and they complete that purchase, Paypal will do its business and end in that window by returning to my site. All in the meantime the last page they were on in my zencart site will remain in the background. Everything is retained in the cart in the first window.

The person will be able to return to my site from either window, meaning they have two places from which to re-enter my site. My navigation buttons will be in both windows.

Do you think this will stop or at least help with the session issues?

I think what the point here is that if they go through checkout etc they can come back either way it wont matter but if somebody is in your store and adds something to their cart and then follows a link to your main store expecting to come back and complete the purchase they will run into problems and prob lose the contents of the cart and need to start again. The ideal solution would be to bring you excisting main site into zen rather than the otherway round as zencart is designed to do.
I see you have tried the iframe route but this is known to cause problems to.

IFrames doesn't play well with Zen Cart and can cause issues with payment gateways.

I don't know about the sessions, but opening a new browser window for Paypal isn't standard Paypal behavior, and may scare some customers away from your site. A bad idea, I think.

Great feedback!

OK, I guess I can remove the target:blank for Paypal and have the checkout process happen in the same window.

I frame was a disaster, so I won't be using that.

Now the idea to have my site within Zencart sounds appealing.
How would I go about doing something like that? :shocking:

About Us and Contact Us are easily done in Zen Cart.

You could use EZ-Pages to create other pages.

afo:

About Us and Contact Us are easily done in Zen Cart.

You could use EZ-Pages to create other pages.

I used EZ pages in another cart I had once, I'll look into that and try it out.

First though, I would like to definitely try the original plan I had of adding the navigation bar above the cart.
Can anyone help me with getting them there?

I want to test the waters on the session problems that might occur.

Thank you for your help fellow zenners. :wink:

Put the style rules into the ZC stylesheet, and the js into a jscript_whatever.js file in the appropriate ZC folder. There is plenty of info on integrating js without pasting it into PHP files, in the wiki and forum and probably the tutorials.

And you don't want any bare "body{}" rule, as that will apply to the entire ZC page. You will have to refigure what applies where.

Wow, I tried something and almost got it!

I need to lower the logo.gif though or something, I'm trying folks!

http://teslacorp-rd-inc.com/Zen

Holly cow!

I managed. lol

Not quite above where I wanted it to be but hey, what the heck, I'll settle for this.

Your main site is really only a nice shell with navigation menus at this point, no actual pages. It would not be a big deal to bring it into Zen Cart. You can use various ez-page menu mods to get the same navigation look/layout/function without having to use javascript at all.

gjh42:

Your main site is really only a nice shell with navigation menus at this point, no actual pages. It would not be a big deal to bring it into Zen Cart. You can use various ez-page menu mods to get the same navigation look/layout/function without having to use javascript at all.

Not to mention it'll likely make maintaining the site much easier.

Yes, maintaining many dozens of individual HTML pages as you appear to be heading toward will become a big job.

I also note that there is a lot of content planned for "outside" the store, and I would expect a large number of visitors to wander around reading stuff, possibly while the items in their cart sit and the session times out. This is asking for trouble and lost sales, in my opinion.

I've checked out things and thus far everything is retained in the cart even after logging out, let alone going in and out of the site.

I am definitely listening to your feedback but I really need to test my theories on this.

Give it a try and see if what I need is working!

Thanks

I could also increase the time for sessions in the cart as well right?

I guess I can do this through the admin section?

No, the session timeout is set to about 24 minutes, and for safety it is not recommended to try to change it. If someone leaves their browsing session in a public place, someone else could theoretically see what they were buying, or mess with their account if they were logged in.

gjh42:

No, the session timeout is set to about 24 minutes, and for safety it is not recommended to try to change it. If someone leaves their browsing session in a public place, someone else could theoretically see what they were buying, or mess with their account if they were logged in.

Will do.

So far everything is working perfectly. I couldn't ask for more really!

The cart seems to retain the last cart items even after logging out.

Do I get an A for figuring out the navigation bar and making it fit into the top? lol

tesla1:

Do I get an A for figuring out the navigation bar and making it fit into the top? lol

No, but you could share your solution. :P