Inserting Code into tpl_header.php

Ok, so here is what I did.

I downloaded all the files in the folder template_default.
I then uploaded them to the folder freetemplate1
When asked to override files, I chose to skip all the file rewrites.

So now - Freetemplate1 is a mirror of template_default.

Now all I have to do is add the code to the tpl_header to call the function or whatever.

I looked online for the past 3 hours and I really don't know what to do. I know I have to use this code:

<script language="javascript">var MenuFolderName="../jscript";</script><script charset="UTF-8" language="javascript" src="sftmp6arrays.js"></script><script charset="UTF-8" language="javascript" src="sfmenutmp6ie.js"></script>

And somehow get it to be in PHP. I tried an html to php converter and that did not work. Is there any way possible - any of you know exactly what my php code should say?

Thanks

drymetal:

I downloaded all the files in the folder template_default.
I then uploaded them to the folder freetemplate1
When asked to override files, I chose to skip all the file rewrites.
This compplete copy/mirror will only make things harder later as you do not know what files have been changed

What do you mean by "you choose to skip file rewrites??

kobra:

You ONLY need to copy them to your template IF you change them from default
Otherwise those in template_default are used

I mean I didn't over write any files. I thought the other guy said I needed to have the directories mirror each other. I can edit easily phpnuke, joomla, phpbb and this...this is the most complicated, frustrating and impossible thing I have ever done in my life. This is day seven of not sleeping - I need to get this done so I can get paid for changing the stupid colors of the theme.

I give up. There is no way this is possible or that this will ever make any kind of sense to me. How in the world can adding a stupid popup menu be so complicated? It is things like this that drive people to suicide.

Well hopefully you are a LONG way from drastic action.

I think you need to understand how the override system works, and what the purpose of the custom template is.

In a fresh install of zencart, the system (certainly on the webshop side of the software) will compile the web pages using the PHP files in the TEMPLATE_DEFAULT template.

So... if you have not created your custom template, then zencart will call (FOR EXAMPLE)...

includes/templates/template_default/common/tpl_main_page.php

... when it builds up the main page.

But you then decide you want to make some customizations to the main page, and this will require making some changes to:

includes/templates/template_default/common/tpl_main_page.php

So what you do is make a COPY of tpl_main_page.php

(You would typically do this on your hard drive - because that is where you should do the editing as well)

You then EDIT the file and save it on your hard drive.

Now, that EDITED file must not overwrite the CORE (default) file.

So, you would put it into the corresponding OVER-RIDES folder in your own template.

I don't know what you have called your custom template, so I will refer to it as YOUR_TEMPLATE

The location of your newly edited file will be:

includes/templates/YOUR_TEMPLATE/common/

... but you may not yet have a folder called "common" inside YOUR_TEMPLATE...

... so you create one...

And then you ftp tpl_main_page.php to THAT folder...

includes/templates/YOUR_TEMPLATE/common/tpl_main_page.php

The ORIGINAL file (from which you made a copy) is left untouched in its original location:-

includes/templates/template_default/common/tpl_main_page.php

Now... zencart is quite clever...

It will look FIRST for your override file(s) when it starts to compose a page.

If it finds the overrride, it uses the override file...
includes/templates/YOUR_TEMPLATE/common/tpl_main_page.php

If it does NOT find an override, it uses the CORE file
includes/templates/template_default/common/tpl_main_page.php

All you need do now, is what we explain above, regarding your js files.

Finally, I hope you also realise that having the JS files is meaningless unless there is some PHP code somewhere that uses them...

Ok so...come on laugh...it's funny in a sadistic kind of way...

The templates don't work like other things. So if I edit a core file from the template_default folder (editing on my computer)- then I need to upload that to my custom template folder - in the correct location rather than over writing the original file.

But that doesn't mean I need all the other files from the template_default folder. Only ones that have actually been changed by me. And the ones I've edited somehow on my computer - need to go in the custom template folder.

So that means - if I add a file to the jscript folder - then that file needs to be in my custom template folder because that is different than the core stuff. And I don't need to copy the html_header.php file to my custom template folder - because I haven't done anything to it. So the core one still works?

so then all I need to do - is the JS stuff like mentioned and have some php code that uses it. Hopefully for once I get the picture. lol

Or in other words...just making sure I got it...

So where other programs like phpbb, you need to overwrite files or create new templates based off old ones (and upload the whole thing) - zen-cart is smart enough to let only changed files exist in a new template directory. So this way, the core files are always there and this makes creating new templates much easier once an idiot like me gets it.

Ok...maybe there is hope. :D

I was able to get a flash file to be the banner rather than the graphic. :D:D:D (I found info on how to do it on the wiki here.)

Ok - so now every file in my custom_template are only files that original author of the template made. (I've only edited his files...none of the core ones.)

I created a jscript folder in my custom_template folder.

I added two JS files to the jscript folder I created:

jscript_sftmp6arrays.js
jscript_sfmenutmp6ie.js

The html_header.php file is in the template_default folder because I have not edited that.

So now...I need to put a call function or whatever in the tpl_header.php file that is located in my custom_template/common/ directory.

Any idea on what that would look like? :)

drymetal:

Ok so...come on laugh...it's funny in a sadistic kind of way...

The templates don't work like other things. So if I edit a core file from the template_default folder (editing on my computer)- then I need to upload that to my custom template folder - in the correct location rather than over writing the original file.

But that doesn't mean I need all the other files from the template_default folder. Only ones that have actually been changed by me. And the ones I've edited somehow on my computer - need to go in the custom template folder.

So that means - if I add a file to the jscript folder - then that file needs to be in my custom template folder because that is different than the core stuff. And I don't need to copy the html_header.php file to my custom template folder - because I haven't done anything to it. So the core one still works?

so then all I need to do - is the JS stuff like mentioned and have some php code that uses it. Hopefully for once I get the picture. lol

Yes... you are on the right track...

bear in mind that there are not over-ride systems for EVERY file in ZC. There are NO overrides in the ADMIN section of zencart, for example.

The best way of knowing if an override is needed, is to look for classic folders.

When you see a classic folder in a directory tree, you can be sure that an override folder of your own template is required.

Typically, overrides apply only in the CATALOG side of the store, and usually in the following main directories' trees:

• languages
• modules
• templates

So just drill down into each folder and sub folder, and when you see classic, create your own template's folder at the same level in the tree.

Even if these new folders are empty to start, they can be there. If you ever need to create an override file, you'll now see where it ought to live. (You may need to put a "blank" index.html file (or .htaccess) inside them to prevent directory listing in a browser... see what's inside a corresponding classic folder and ditto that content

There are other places where you can put ADDITIONAL functional files such as in:
includes/functions/extra_functions... These are not "overrides" though... they are ADDITIONAL files...

I should also clarify the status of ADDITIONAL files, as opposed to OVERRIDE files...

If you store a new/modified file - even a JS file - in a template OVERRIDE folder, that file will ONLY EVER APPLY to that template...

Let's say your custom template is called joe_bloggs ...

In my post above, I show you that a joe_bloggs folder should exist at every level where there is a classic folder.

Edited files and ADDITIONAL files are not the same thing...

Your JS files are not actually overwriting anything - because in a standard install of zencart, there will be NO FILE called:
jscript_sftmp6arrays.js

So, if you put it into:
includes/templates.template_default/jscript ...

... it will not be replacing or modifying anything... it is just an additional bit of JS that you want your site to use.

NOW...

question...

WHY would you put
jscript_sftmp6arrays.js into an override jscript folder, rather than the default jscript folder... ???

answer ...

If it is put into the DEFAULT jscript folder, its application is GLOBAL across ALL templates...

If it is put into the CUSTOM jscript folder, its application is UNIQUE and EXCLUSIVE to that template...

Let's say that in a few months' time, you don't like the look of your site and decide that this horrid joe_bloggs template needs to be replaced with another called jimmy_obama .

If your JS files are located in the joe_bloggs jscript folder, they WILL NOT APPLY OR WORK when you switch to jimmy_obama

... they are SPECIFIC to joe_bloggs only.

HOWEVER...

If they are in the DEFAULT jscript file, their application is GLOBAL across all templates, so you could install template jimmy_obama and the jscripts would continue to function...

Ok that all makes sense. So the override only applies in folders that have a CLASSIC folder.

And the reason I put stuff into the custom_template folder is so that if I change templates - whatever changes I made will only apply to the old template.

So this is useful for me - because there may be some changes that I want to be Global and to put in the template_default folder and there may be changes (like this menu) that I only want to apply to specific templates - in this case joe_bloggs...

...jimmy_obama? lol

Ok that all makes sense now. Thank God. It actually sounds kind of better than template systems I am use to. As it seems like creating new templates would be far less complicated and easier to manage...

I'm not clear on one last thing though. You said I need to put a call function in the tpl_header file. And I opened the:

jscript_sftmp6arrays.js file and that doesn't have any functions in it.

The other one:

jscript_sfmenutmp6ie.js has over 20 occurrences of the word "Function (*)" *meaning there may be text in the parenthesis or not.

Do I need to have a call function in the tpl_header that calls everyone of those functions? Or do I just have it call the two JS files?

Lastly - how do I make it? There are about 500 different call function types online. :(

jimmy_obama? lol

Ok, after about 10.2 years of trying to figure out how to call a function in the header I gave up. However - there is good news. :D

I started to wonder if it was possible to make a popup menu just using css and not javascript. I searched online and a bunch of sites said you could not do this. However, thanks to an angel that appeared in my room, I was told how to do this. So - for anyone who wants a popup menu in their store - here is the EASIEST way to do it.

(I am going to list what I did.)

1. First I created the menu code. If you are going to create a popup menu - you will want to use this code as a template as I had to tinker around with it (formatting) for awhile to get it to work: (the code has 4 spaces between each parent menu item so it is easier to see what is what.)

Also - after you are done - just paste the code into your tpl_header.php file wherever you need the menu to be.

<ul id='menu'> 
 <li><a class='sub' href='#.html'><b>Access Control</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Biometric Readers</a></li>
 <li><a href=''>Keyless Entry</a></li>
 <li><a href=''>Keypads & Readers</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 
 
 
 
 <li class='current'><a class='sub' href=''><b>Equipment</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a class='fly' href='#url'>Equipment<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Modules</a></li>
 <li><a href=''>Glass Breaks</a></li>
 <li><a href=''>Hold-Up & Panic</a></li>
 <li><a href=''>Motion Sensors</a></li>
 <li><a href=''>Photo Electric Beams</a></li>
 <li><a href=''>Relays & More</a></li>
 <li><a href=''>RF Receivers</a></li>
 <li><a href=''>Siren Speakers/Strobes</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a class='fly' href='#url'>Doors / Windows<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Door Alarms</a></li>
 <li><a href=''>Hardwire Sensors</a></li>
  <li><a href=''>Wireless Sensors</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a class='fly' href='#url'>Control<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Keyfobs</a></li>
 <li><a href=''>Keypads</a></li>
  <li><a href=''>Remotes</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a class='fly' href='#url'>Fire Protection<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Smoke Detectors</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a class='fly' href='#url'>Power Supplies<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Alarm Batteries</a></li>
 <li><a href=''>Battery Chargers</a></li>
  <li><a href=''>Zone/Power</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a href=''>Driveway Alarms</a></li>
 <li><a href=''>Enclosures</a></li>
 <li><a href=''>Life Safety</a></li>
 <li><a href=''>Signs & Decals</a></li>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a class='fly' href='#url'>Communications<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Cellular</a></li>
  <li><a href=''>Cellular Backup</a></li>
 <li><a href=''>Dialers</a></li>
 <li><a href=''>iP</a></li>
  </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 </ul>
 
 
 
 
 <li><a class='sub' href='#.html'><b>Alarm Systems</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Control Panels</a></li>
 <li><a href=''>Hardwired Alarms</a></li>
 <li><a href=''>Hybrid Alarms</a></li>
 <li><a href=''>Wireless Alarms</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 
 
 
 
 <li><a class='sub' href='#.html'><b>Commercial</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Alarm Accessories</a></li>
 <li><a href=''>Fire Alarm Panels</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 
 
 
 
 <li><a class='sub' href=''><b>Automation</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Central Vacuum</a></li>
 <li><a href=''>Envir. Controls</a></li>
  <li><a href=''>Garage Controls</a></li>
 <li><a href=''>Gate Controls</a></li>
  <li><a href=''>Intercoms</a></li>
 <li><a href=''>Power Supplies</a></li>
  <li><a href=''>Structure Wiring</a></li>
 <li><a href=''>X10 Automation</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 
 
 
 
 <li><a class='sub' href=''><b>Surveillance</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Camera Acc.</a></li>
 <li><a href=''>Camera Kits</a></li>
  <li><a href=''>Cameras</a></li>
  <li><a href=''>Video Recorders</a></li>
  <li><a href=''>Security Monitors</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li> 
 
 
 
 
  <li><a class='sub' href=''><b>Wire / Cable</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
 <ul>
 <li><a href=''>Alarms</a></li>
 <li><a href=''>Audio/Video</a></li>
  <li><a href=''>Firewire</a></li>
  <li><a href=''>networking</a></li>
  <li><a href=''>Surveillance</a></li>
 </ul>
 <!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 </ul>

2. Then the CSS code:

#menu {padding:0; margin:0; list-style:none; float:center; height:25px; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#menu li {float:left; margin-right:1px;}
#menu li a {display:block; float:left; height:25px; line-height:25px; background:#000000; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 30px 0 20px;}


#menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#menu li a:hover {z-index:200; position:relative;color:#ffffff; background-color:#000000;}
#menu li:hover {position:relative; z-index:200;}

#menu li:hover > a {color:#ffffff; background:#000000;}
#menu li:hover > a.sub {color:#ffffff; background-color:#000000;}

#menu li.current a {color:#ffffff; background:#000000;}

#menu li a.sub {background: #000000 url(/down-arrow.gif) no-repeat right center;}
#menu li.current a.sub {color:#ffffff; background:#000000 url(down-arrow.gif) no-repeat right center;;}

#menu :hover ul {left:0; top:25px; width:160px; background:#000000;}

/* keep the 'next' level invisible by placing it off screen. */
#menu ul, 
#menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#menu :hover ul :hover ul
{left:120px; top:-1px; background:#000000; white-space:nowrap; width:100px; z-index:200; height:auto;}

#menu :hover ul li {margin:0; border-top:1px solid #000000;}
#menu :hover ul li a {width:160px; padding:0; text-indent:10px; background:#000000; color:#ccc; height:30px; line-height:30px;}
#menu :hover ul li a.fly {background:#000000 url(/right-arrow.gif) no-repeat right center;}

#menu :hover ul :hover {background-color:#000000; color:#ffffff;}
#menu :hover ul :hover a.fly {background-color:#000000; color:#ffffff;}

#menu :hover ul li.currentsub a {background:#000000; color:#ffffff;}
#menu :hover ul li.currentsub a.fly {background:#000000 url(right-arrow.gif) no-repeat right center; color:#ffffff;}

#menu :hover ul :hover ul li a {width:140px; padding:0; text-indent:10px; background:#000000; color:#ffffff;}
#menu :hover ul :hover ul :hover {background-color:#000000; color:#ffffff;}

#menu :hover ul :hover ul li.currentfly a,
#menu :hover ul :hover ul li.currentfly a:hover {background:#000000; color:#ffffff;}

3. Then I pasted the CSS code at the bottom of the stylesheet.css file that is being used by my custom_template in custom_template/css/

4. That is it. No weird call functions or anything else.

If anyone is wondering how I inserted a flash file into the tpl_header.php file - I uploaded the SWF file to custom_template/media/ and wrote and pasted this code into the tpl_header.php file: (If you use it, you'll only have to change the file path and file name, background color and height)

<object type="application/x-shockwave-flash" data="includes/templates/custom_template/media/banner.swf" width="100%" height="250">
<param name="movie" value="includes/templates/custom_template/media/banner.swf" />
<param name="quality" value="high"><param name="BGCOLOR" value="#000000">
<param name="menu" value="false">
</object>

Interesting code, but would help to see an example of what it actually produces... i.e URL?

Did you know that Jade True (creator of Apple Zen Template) has already developed a "popup" header menu?

I use it on several sites : eg- HERE

It is here:

Page with Menu

No I did not know that schoolboy. You coulda told me! lol

To be honest, before a week ago I never even touched zencart before. Now it makes sense but I just don't know anything about calling functions and stuff for javascript.

I still have a little bit of tweaking to do on the menu such as messing with the colors and stuff. But there it is at the link above under the flash banner (The banner isn't done yet. That is my next job. Yippee.)

Is that menu on that site sb using javascript?

drymetal:

You coulda told me! lol

None of us were aware of what you were trying to do until post #31 of this thread.

If you had said in Post #1

"I am interested in having a pop-out menu in the header"*
*
I would have put this into Post #2

http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=479

kicks self

Dangit. All that.

Oh well. At least I learned a lot of new stuff though. :) I guess that makes it all worthwhile really. Because I certainly know a lot more about zencart now than I did at post 1. :)

We were all there at some point...

It's a good idea to browse around the free add-ons - perhaps even set up a test install of ZC in a subfolder on your site (hide it away with a .htaccess login on that subfolder) and then use that to do all your experimenting.

In that way you dont put your live store at risk when you try things out.