get template php

[keneso]

Hi,

I am trying to reference a resource (specific folder/files) in my custom template in html_header.php, but I can't get it to work, being my php knowledge next to 0.

I need to get the template path in the followings

<script src="CUSTOM_TEMPLATE/slider/js/libs/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="CUSTOM_TEMPLATE/slider/js/slider.js" type="text/javascript"></script>
<link rel="stylesheet" href="CUSTOM_TEMPLATE/slider/css/slider.css" type="text/css" />

I tried
<link rel="stylesheet" href="<?php ($template->get_template_dir(DIR_WS_TEMPLATE)?>/slider/css/slider.css" type="text/css" />
and
<link rel="stylesheet" href="<?php echo ($template->get_template_dir(DIR_WS_TEMPLATE)?>/slider/css/slider.css" type="text/css" />
but obviously I am not doing it right, as the site goes blank.

Thank you

[gjh42]

You don't need to edit PHP files to load js and CSS files; Zen Cart has autoloader functions that do that for you if you name the files right and put them in the right place.

For general purposes (all pages), add jscript_ to the front of the js filenames and save them in /includes/templates/your_template/jscript/; add stylesheet_ to the front of the stylesheet name and save it in /includes/templates/your_template/css/.

For loading these files in only specific situations, there are various methods (folder locations or filenames) depending on what you want to do.
See the wiki for details:
http://www.zen-cart.com/wiki/index.p...on_-_Templates
http://www.zen-cart.com/wiki/index.p...s_-_Javascript
http://www.zen-cart.com/wiki/index.p...Per-Page-Rules
http://www.zen-cart.com/wiki/index.p...dividual_Pages

[keneso]

Thank you for the reply, please bear with me as I believe this is going to be some how hard, like my head.
I think, though I ain't sure, I did all, but I have messed up somewhere, as I see all the jquery-1.6.2.min.js on top of my page, and no slider where it's supposed to be.

I have the following scenario;

A slider script structured like this (I am using it outside Zen Cart ok)

slider / css / basic_slider.css
slider / img / all_the_images_used
slider / js / basic_slider.js
slider / js / libs / jquery-1.6.2.min.js

and on the tpl_header.php file I put this

<!-- START slider -->

<div id="banner">

	<ul class="bannerImgs">
		<li><a href=""><img src="/slider/slider_01-en.jpg" alt="" title="" /></a></li>
		<li><a href=""><img src="/slider/slider_02-en.jpg" alt="" title="" /></a></li>
		<li><a href=""><img src="/slider/slider_03-en.jpg" alt="" title="" /></a></li>
		<li><a href=""><img src="/slider/slider_04-en.jpg" alt="" title="" /></a></li>
	</ul>
</div>

<!-- Load jQuery and the plug-in -->

<script src="js/libs/jquery-1.6.2.min.js"></script>
<script src="js/basic_slider.js"></script>
	
	<!--  Attach the plug-in to the slider parent element and adjust the settings as required -->
    <script>
      $(document).ready(function() {
        
        $('#banner').bannerImgs({
          'animation' : 'slide',
          'width' : 332,
          'height' : 177
        });
        
      });
    </script>

<!-- END slider -->

Following your suggestion - my understanding of it - I did this:

templates / MY_TEMPLATE / jscript / jscript_basic_slider.js
templates / MY_TEMPLATE / jscript / on_load /on_load_jquery-1.6.2.min.js
templates / MY_TEMPLATE / css / stylesheet_basic_slider.css
templates / MY_TEMPLATE / images / slider / all_the_images_used

and in the tpl_header,php file I put the above code, with, and without the
<script src="on_load_jquery-1.6.2.min.js"></script>
<script src="jscript_basic_slider.js"></script>

What did I mess up?

[gjh42]

You definitely don't want to have the <!-- Load jQuery and the plug-in --> section in the tpl_ file, as that is duplicating the autoload function.
You should probably save the <!-- Attach the plug-in to the slider parent element script as a new jscript_ file to be autoloaded. Beyond that, I don't write javascript so can't help much more.

[keneso]

Thank you for your patience, and effort.

I tried various combinations, and still no joy, I do see the files in the <head> section of the page, but no slider ...

I just saw a thread discussing the same issue, I'll try to post there, and get DrByte to stop by.

Right now I have the js files in the jscript folder, and removed the sections you suggested, and put the

<!-- Attach the plug-in to the slider parent element and adjust the settings as required -->
<script>
$(document).ready(function() {

$('#banner').bannerImgs({
'animation' : 'slide',
'width' : 332,
'height' : 177
});

});
</script>

in a jscript_slider.php file in the jsript folder, and it does too show in the <head>

[DrByte]

The files in the "onload" folder NEVER contain HTML. They're rarely used, and probably should NOT be used for jQuery scripts, since you're likely using document.ready instead.

What is the URL of the site where you say this isn't working?

[keneso]

Thanks for the prompt reply.

The site is haloterapia dot biz /shop

[DrByte]

If you use Firebug to look at the javascript errors that are appearing on the page, you'll see that it's looking for a bjqs function on your site, but the code you pasted in this thread is talking about bannerImgs instead.
Which one is correct, and why is it different on the site?

Also the images don't appear to be loading properly, probably because it's looking for them in /images/ folder and not the folder where you've placed them.

What's the URL to the site where you say it's working fine?

[keneso]

If you use Firebug to look at the javascript errors that are appearing on the page, you'll see that it's looking for a bjqs function on your site, but the code you pasted in this thread is talking about bannerImgs instead.
Which one is correct, and why is it different on the site?

Yes, sorry for the discrepancy, I had changed it to follow my naming pattern, and I posted that, but I reverted to the original, and loaded that, to make sure I hadn't missed something; thus the file, and names are correct.

Also the images don't appear to be loading properly, probably because it's looking for them in /images/ folder and not the folder where you've placed them.

I think I've put it correctly (for all the images)
<img src="/images/slider/slider_ad_01-en.jpg" alt="ad" title="ad" />
I also tried
<img src="/templates/azf_zc_mulk/images/slider/slider_ad_01-en.jpg" alt="ad" title="ad" />
and on both of the above I tried without the starting "/" as well

What's the URL to the site where you say it's working fine?

http:// www ambranativo com/

[DrByte]

I think I've put it correctly (for all the images)
<img src="/images/slider/slider_ad_01-en.jpg" alt="ad" title="ad" />
I also tried
<img src="/templates/azf_zc_mulk/images/slider/slider_ad_01-en.jpg" alt="ad" title="ad" />
and on both of the above I tried without the starting "/" as well

Wouldn't /shop/includes/templates/azf_zc_mulk/images/slider/xxxxx.jpg be a more accurate path?