How to edit head section HTML of main page?

Greetings,

I'm helping a friend develop a ZC 1.5 site, and need to insert some code for a slideshow module into the HTML in the head section of the main page. I know this feature has been disabled in text editors for version 1.5. Nevertheless I've spent hours trying to find an alternative solution since the folks who developed the module will happily set it up for a fee my friend can't afford at the moment. If they can do it I would think I should also be able to do it.

The main_page.php file on the server doesn't show the head section, only the HTML for the page content. Can anyone advise me as to where I can access the complete code? I'm comfortable with editing HTML - I just need a way to get to it.

Thanks in advance to any Zen masters out there who can enlighten me.

Marc

What EXACTLY is this code you need to add?

Chances are it's javascript, and you should be using the built-in autoinsertion-of-javascript-scripts stuff as described here: http://www.zen-cart.com/wiki/index.php/Customisation_-_Templates_-_Javascript

In VERY RARE cases it may be necessary to directly edit the html_header.php file of your template. Again, that should be RARE.

Thanks, DrByte, for your blazingly fast response!

Yes, the code calls javascript, and a CSS file. There's more CSS for the head section, it depends on the slideshow configuration. There are many more settings in Admin. Here's the example code I'm looking at:

<html>
    <head>
        <title>Page Title</title>
       
        <!-- link to magicslideshow.css file -->      
        <link rel="stylesheet" type="text/css" href="magicslideshow/magicslideshow.css" media="screen"/>      
        <!-- link to magicslideshow.js file -->
        <script src="magicslideshow/magicslideshow.js" type="text/javascript"></script>
        <!-- set slide show params -->
        <script type="text/javascript">
            MagicSlideshow.options = {
                'arrows': false, // you can use 'no' or 0 here
                'thumbnails': 'inside',
                'container-size': 80,
                'container-padding': 5,
                'container-position': 'bottom',
                'container-opacity': 0,
                'preloadInOrder': true,
                'start': 2,
                'loadingText': 'Please wait...',
                'speed': 5,
                'effectJump': 'scroll',
                'loop-type': 'first'
            }
        </script>
        <style type="text/css">
            img.MagicSlideshowThumbnail {
                border: 2px solid #696969;
                margin: 1px 4px;
            }
            img.MagicSlideshowThumbnail.highlight {
                border: 2px solid #FFFFFF;
            }
        </style>
       
    </head>
    <body>
       
        <!-- define Magic Slideshow -->
        <div class="MagicSlideshow">
            <a rel="images/supercar6.jpg"><img src="images/supercar6-small.jpg" /></a>
            <a rel="images/supercar7.jpg"><img src="images/supercar7-small.jpg" /></a>
            <a rel="images/supercar8.jpg"><img src="images/supercar8-small.jpg" /></a>
            <a rel="images/supercar9.jpg"><img src="images/supercar9-small.jpg" /></a>
        </div>
       
    </body>
</html>

It seems that the fastest and easiest way would be to edit the page code? I have a fair amount of HTML and CSS experience, but I'm no Zen Cart expert, that's for sure. However it's a very nice slideshow, and we'd really like to use it. This little challenge helps me become more familiar with Zen Cart and that's a plus.

Any more advice you care to share is greatly appreciated!

Marc

I can't begin to count the number of times the same sort of scenario has been posted about.

It boils down to:

1. for the <head>, put all your necessary stylesheets into the stylesheet folder, using the prescribed format.
2. for the <head>, put all your necessary javascripts into the jscript folder, using the prescribed format.
3. for the rest ie: all the on-page <script> stuff, put it into the template tpl_whatever_page_it_is.php or define_main_page.php file directly.

So...

1. magicslideshow.css - copy that to** /includes/templates/NAME_OF_YOUR_TEMPLATE_HERE/css/styles_magicslideshow.css**
2. magicslideshow.js - copy that to /includes/templates/NAME_OF_YOUR_TEMPLATE_HERE/jscript/jscript_magicslideshow.js
3. for the inline <script> and <style> stuff, you have two choices:
   a) just embed it directly into the template, along with the div, as mentioned in 4 below, or
   b) stuff it into a new file like this;
   /includes/templates/NAME_OF_YOUR_TEMPLATE_HERE/jscript/jscript_mymagicsssettings.php```
   <!-- set slide show params -->
   <script type="text/javascript">
   MagicSlideshow.options = {
   'arrows': false, // you can use 'no' or 0 here
   'thumbnails': 'inside',
   'container-size': 80,
   'container-padding': 5,
   'container-position': 'bottom',
   'container-opacity': 0,
   'preloadInOrder': true,
   'start': 2,
   'loadingText': 'Please wait...',
   'speed': 5,
   'effectJump': 'scroll',
   'loop-type': 'first'
   }
   </script>
   <style type="text/css">
   img.MagicSlideshowThumbnail {
   border: 2px solid #696969;
   margin: 1px 4px;
   }
   img.MagicSlideshowThumbnail.highlight {
   border: 2px solid #FFFFFF;
   }
   </style>

4. and the rest (the <div> etc) goes into whatever template piece you need, wherever you intend it to display

Sorry if I'm covering ground that's already been covered, but I really did search for this and couldn't find any pertinent results. I literally spent hours searching the forum and on Google. However I was searching under terms like "edit html head section" and "Zen Cart 1.5 HTML editor."

Thanks, DrByte, I'll do as you suggested. It's Fri night and the natives here are restless, but I'll get on it tomorrow.

Thanks again,
Marc

Is this something that's intended to show on every page? Or just one page of the site?

The javascript file and CSS need to be called only from the main page.

Thanks for giving this more thought!

Marc

Then you could skip everything I mentioned earlier and stuff ALL of it into the define_main_page.php file.

The .css and .js file do not need to be in the <head>. It's just common to put it there. Things will load fine if it's all put inline into the place where it's all needed, especially since you only want it on one page.

Sorry, DrByte, for taking a couple days to get back to you.

Your advice is absolutely, 100% correct, and the slideshow is working now.

Much gratitude for your help,
Marc