Forums / General Questions / 1.3.8a - Where do i add custom js for home page only?

1.3.8a - Where do i add custom js for home page only?

Locked

Views: 5,760

Results 1 to 20 of 29
This thread is locked. New replies are disabled.
27 Oct 2008, 8:29 PM
#1
stuff4toys avatar

stuff4toys

Totally Zenned

Join Date:
May 2007
Location:
SW Florida
Posts:
1,062
Plugin Contributions:
1

1.3.8a - Where do i add custom js for home page only?

Which file do I edit to load these .js files for the home page only.

What PHP syntax would I use to get it to print:

<script type="text/javascript" src="includes/rockslideshow/rokslideshow.js"></script>
<script type="text/javascript" src="includes/rockslideshow/mootools-release-1.11.js"></script>
```in the header for the home page only?

THANKS
JOhn ><>

Newest Site: ChargerPros - Stuff4Toys

27 Oct 2008, 9:20 PM
#2
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: 1.3.8a - Where do i add custom js for home page only?

You would edit /includes/templates/your_template/tpl_header.php.```php

<?php if ($this_is_home_page) { ?> <script type="text/javascript" src="includes/rockslideshow/rokslideshow.js"></script> <script type="text/javascript" src="includes/rockslideshow/mootools-release-1.11.js"></script> <?php } ?>
27 Oct 2008, 9:30 PM
#3
stuff4toys avatar

stuff4toys

Totally Zenned

Join Date:
May 2007
Location:
SW Florida
Posts:
1,062
Plugin Contributions:
1

Re: 1.3.8a - Where do i add custom js for home page only?

AWESOME I will be able to try this on my test site tonight. If that works, I will create a mod/add-on for Zen-Cart using http://www.rocketwerx.com/products/rokslideshow/overview a really nice little slideshow program.

JOhn ><>

Newest Site: ChargerPros - Stuff4Toys

27 Oct 2008, 10:46 PM
#4
drbyte avatar

drbyte

Sensei

Join Date:
Jan 2004
Posts:
63,513
Plugin Contributions:
176

Re: 1.3.8a - Where do i add custom js for home page only?

If you're going to create a contribution/addon, then do it using overrides, without editing core files:

Don't touch tpl_header.php

Instead, create a new file to put that code into:
/includes/templates/YOUR_TEMPLATE/jscript/jscript_my_special_slideshow.php

You can find more documentation on autoloading javascript in your /docs/ folder and in the wiki.

.
Zen Cart - putting the dream of business ownership within reach of anyone!
Donate to: DrByte directly or to the Zen Cart team as a whole

Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

28 Oct 2008, 12:49 AM
#5
stuff4toys avatar

stuff4toys

Totally Zenned

Join Date:
May 2007
Location:
SW Florida
Posts:
1,062
Plugin Contributions:
1

Re: 1.3.8a - Where do i add custom js for home page only?

That worked COOL DrByte.

My lack of wisdom on this matter is really showing. I created the file like you said, put the code in from gjh42 (THANKS) and it loaded great, I think...

Still not getting the script to work.

Take a look http://www.langeshome.com/KERUSSO/ is there a way to tell if the java scripts are actually loading into memory? :no:

JOhn ><>

Newest Site: ChargerPros - Stuff4Toys

28 Oct 2008, 6:47 AM
#6
canopy avatar

canopy

Totally Zenned

Join Date:
Oct 2006
Posts:
625
Plugin Contributions:
0

Re: 1.3.8a - Where do i add custom js for home page only?

Just rename your javascript files to begin with the word 'jscript_' and place them into the respective directories which you want to load either on a per-page or site-wide basis.

For your case, as you want your javascript to load only for the index/home page, you can do something like this:

  • includes/modules/pages/index/jscript_rokslideshow.js
  • includes/modules/pages/index/jscript_mootools-release-1.11.js

If done correctly, refresh your browser and go to the store's index/home page and view source. You should see the following two lines of code in the head section of the html.

<script type="text/javascript" src="includes/modules/pages/index/jscript_rokslideshow.js"></script>
<script type="text/javascript" src="includes/modules/pages/index/jscript_mootools-release-1.11.js"></script>
```As DrByte suggests, you can read more about this in the following file of your Zen Cart installation.


- docs/read_me_jscript.html

Goh Koon Hoek, author of "e-Start Your Web Store with Zen Cart".
Printed book: www.lulu.com/content/10576284
Electronic book and Errata: www.cucumbermedia.com/store

28 Oct 2008, 7:53 AM
#7
drbyte avatar

drbyte

Sensei

Join Date:
Jan 2004
Posts:
63,513
Plugin Contributions:
176

Re: 1.3.8a - Where do i add custom js for home page only?

canopy's suggestion works as well ... naming the files correctly and in the right folder. Note that using canopy's suggestion will cause the JS to load whenever "main_page=index" ... which includes all your category pages as well as the home page. That may or may not be what you wanted to accomplish.

.
Zen Cart - putting the dream of business ownership within reach of anyone!
Donate to: DrByte directly or to the Zen Cart team as a whole

Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

28 Oct 2008, 7:56 AM
#8
drbyte avatar

drbyte

Sensei

Join Date:
Jan 2004
Posts:
63,513
Plugin Contributions:
176

Re: 1.3.8a - Where do i add custom js for home page only?

Stuff4Toys:

That worked COOL DrByte.

My lack of wisdom on this matter is really showing. I created the file like you said, put the code in from gjh42 (THANKS) and it loaded great, I think...

Still not getting the script to work.

Take a look http://www.langeshome.com/KERUSSO/ is there a way to tell if the java scripts are actually loading into memory? :no:

JOhn ><>
It seems the files are loading properly.

However, if they're not "doing" anything for you, what are you missing that's supposed to "trigger" something to start some sort of effect?

.
Zen Cart - putting the dream of business ownership within reach of anyone!
Donate to: DrByte directly or to the Zen Cart team as a whole

Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

28 Oct 2008, 1:42 PM
#9
stuff4toys avatar

stuff4toys

Totally Zenned

Join Date:
May 2007
Location:
SW Florida
Posts:
1,062
Plugin Contributions:
1

Re: 1.3.8a - Where do i add custom js for home page only?

The site is still in dev, so I have not created my own images yet, so it should load the sample images shown on this link:
http://www.langeshome.com/KERUSSO/includes/rokslideshow/examples/

As you can see the effects and images show, so it is not a server or O/S issue.

You can also see why I am eager to make this work and share it for other Zen-Cart users.

JOhn ><>

Newest Site: ChargerPros - Stuff4Toys

28 Oct 2008, 1:46 PM
#10
stuff4toys avatar

stuff4toys

Totally Zenned

Join Date:
May 2007
Location:
SW Florida
Posts:
1,062
Plugin Contributions:
1

Re: 1.3.8a - Where do i add custom js for home page only?

canopy:

the following file of your Zen Cart installation.

  • docs/read_me_jscript.html

I didn't see a link from the docs/ index page, so I didn't look any further. I own your book too, and didn't use that either.

:oops:Live and Learn
JOhn ><>

Newest Site: ChargerPros - Stuff4Toys

28 Oct 2008, 3:20 PM
#11
stuff4toys avatar

stuff4toys

Totally Zenned

Join Date:
May 2007
Location:
SW Florida
Posts:
1,062
Plugin Contributions:
1

Re: 1.3.8a - Where do i add custom js for home page only?

This is messing with my mind. I have exactly the same code from the example page:
http://www.langeshome.com/KERUSSO/includes/rokslideshow/examples/
pasted into the define_main_page.php using the text editor instead of FCKeditor. The only difference is the path to the images.
http://www.langeshome.com/KERUSSO/

Is the version of mootools conflicting with something Zen-Cart does?

I created a stylesheet for the slideshow and that loads correctly too!

Template IC_Academe
IC's Hooverbox 3
IH2
Zen-Cart 1.3.8a (fresh install)
PHP 5
MySQL 5

No other mods or patches installed.

If someone else wants to play with this slideshow applet, goto http://www.rocketwerx.com/
I know it was designed for Joomla, but this is also a standalone release too!
JOhn ><>

Newest Site: ChargerPros - Stuff4Toys

28 Oct 2008, 3:24 PM
#12
clydejones avatar

clydejones

Deceased

Join Date:
Nov 2005
Location:
Colorado Springs, CO USA
Posts:
7,017
Plugin Contributions:
12

Re: 1.3.8a - Where do i add custom js for home page only?

Stuff4Toys:

This is messing with my mind. I have exactly the same code from the example page:
http://www.langeshome.com/KERUSSO/includes/rokslideshow/examples/
pasted into the define_main_page.php using the text editor instead of FCKeditor. The only difference is the path to the images.
http://www.langeshome.com/KERUSSO/

Is the version of mootools conflicting with something Zen-Cart does?

I created a stylesheet for the slideshow and that loads correctly too!

Template IC_Academe
IC's Hooverbox 3
IH2
Zen-Cart 1.3.8a (fresh install)
PHP 5
MySQL 5

No other mods or patches installed.

If someone else wants to play with this slideshow applet, goto http://www.rocketwerx.com/
I know it was designed for Joomla, but this is also a standalone release too!
JOhn ><>

You can see it working here

NOTE: We are sorry that Clyde is no longer with us.
We are grateful for all his contributions to the Zen Cart community.

28 Oct 2008, 4:10 PM
#13
stuff4toys avatar

stuff4toys

Totally Zenned

Join Date:
May 2007
Location:
SW Florida
Posts:
1,062
Plugin Contributions:
1

Re: 1.3.8a - Where do i add custom js for home page only?

So you have the script loading before your /HEAD

Ratz, I was hoping I could keep all the code in the define_main_page.php so it could be changed easily.

What file did you put the script in? can I put it in the same file that loads the .js for the homepage only?

Like:

<?php
if ($this_is_home_page) { ?>
<script type="text/javascript" src="includes/rockslideshow/rokslideshow.js"></script>
<script type="text/javascript" src="includes/rockslideshow/mootools-release-1.11.js"></script>
<script type="text/javascript">
    window.RokSlideshowPath = '';

    var myshow;
    window.addEvent('load', function(){
        var imgs = [];

        imgs.push({
            file: 'shop_new.jpg',
            title: 'New Products',
            desc: 'New Products from Johns Kerusso Store.',
            url: 'http://www.langeshome.com/KERUSSO/index.php?main_page=products_new'
        });
        imgs.push({
            file: 'pray_vote.jpg',
            title: 'Pray Vote Pray',
            desc: 'Think About It',
            url: 'http://www.langeshome.com/KERUSSO/index.php?main_page=index&cPath=6'
        });
        imgs.push({
            file: 'running_empty.jpg',
            title: 'Running on Empty',
            desc: 'There is no bigger topic that the price of gas.',
            url: 'http://www.langeshome.com/KERUSSO/'
        });
        imgs.push({
            file: 'fireproof.jpg',
            title: 'Fireproof - the movie',
            desc: 'Never Leave Your Partner Behind, opens in theaters September 26, 2008.',
            url: 'http://www.fireproofthemovie.com/'
        });

        myshow = new Slideshow('slideshow', {
            type: 'combo',
            showTitleCaption: 1,
            captionHeight: 45,
            width: 640,
            height: 375,
            pan: 20,
            zoom: 30,
            loadingDiv: 1,
            resize: true,
            duration: [2000, 9000],
            transition: Fx.Transitions.Expo.easeOut,
            images: imgs,
            path: 'images/homepage/'
        });

        myshow.caps.h2.setStyles({
            color: '#fff',
            fontSize: '13px'
        });
        myshow.caps.p.setStyles({
            color: '#ccc',
            fontSize: '11px'
        });
    });
</script>
<?php 
} ?>  

Newest Site: ChargerPros - Stuff4Toys

28 Oct 2008, 4:19 PM
#14
clydejones avatar

clydejones

Deceased

Join Date:
Nov 2005
Location:
Colorado Springs, CO USA
Posts:
7,017
Plugin Contributions:
12

Re: 1.3.8a - Where do i add custom js for home page only?

Stuff4Toys:

So you have the script loading before your /HEAD

Ratz, I was hoping I could keep all the code in the define_main_page.php so it could be changed easily.

What file did you put the script in? can I put it in the same file that loads the .js for the homepage only?

Like:

<?php if ($this_is_home_page) { ?> <script type="text/javascript" src="includes/rockslideshow/rokslideshow.js"></script> <script type="text/javascript" src="includes/rockslideshow/mootools-release-1.11.js"></script> <script type="text/javascript"> window.RokSlideshowPath = ''; var myshow; window.addEvent('load', function(){ var imgs = []; imgs.push({ file: 'shop_new.jpg', title: 'New Products', desc: 'New Products from Johns Kerusso Store.', url: 'http://www.langeshome.com/KERUSSO/index.php?main_page=products_new' }); imgs.push({ file: 'pray_vote.jpg', title: 'Pray Vote Pray', desc: 'Think About It', url: 'http://www.langeshome.com/KERUSSO/index.php?main_page=index&cPath=6' }); imgs.push({ file: 'running_empty.jpg', title: 'Running on Empty', desc: 'There is no bigger topic that the price of gas.', url: 'http://www.langeshome.com/KERUSSO/' }); imgs.push({ file: 'fireproof.jpg', title: 'Fireproof - the movie', desc: 'Never Leave Your Partner Behind, opens in theaters September 26, 2008.', url: 'http://www.fireproofthemovie.com/' }); myshow = new Slideshow('slideshow', { type: 'combo', showTitleCaption: 1, captionHeight: 45, width: 640, height: 375, pan: 20, zoom: 30, loadingDiv: 1, resize: true, duration: [2000, 9000], transition: Fx.Transitions.Expo.easeOut, images: imgs, path: 'images/homepage/' }); myshow.caps.h2.setStyles({ color: '#fff', fontSize: '13px' }); myshow.caps.p.setStyles({ color: '#ccc', fontSize: '11px' }); }); </script> <?php } ?>

Yes, that's where it goes.
The instructions at the demo site for the slideshow are not very clear on this point (at least for the standalone version).

Also, don't forget the placeholder in define_main_page.php

<!-- BOF place holder for slide show -->
      <div id="slidewrap">
      <div id="slideshow"></div>
      <div id="loadingDiv"></div>
      </div>
<!-- EOF place holder for slide show -->

NOTE: We are sorry that Clyde is no longer with us.
We are grateful for all his contributions to the Zen Cart community.

28 Oct 2008, 4:28 PM
#15
stuff4toys avatar

stuff4toys

Totally Zenned

Join Date:
May 2007
Location:
SW Florida
Posts:
1,062
Plugin Contributions:
1

Re: 1.3.8a - Where do i add custom js for home page only?

Clyde, I believe that I duplicated what your source code has. One change from the code that I posted was to add the path to rokslideshow.js

window.RokSlideshowPath = 'includes/rokslideshow/rokslideshow.js';
```I am still not having any success.

I didn't think that this would be rocket science.
JOhn ><>

Newest Site: ChargerPros - Stuff4Toys

28 Oct 2008, 4:38 PM
#16
stuff4toys avatar

stuff4toys

Totally Zenned

Join Date:
May 2007
Location:
SW Florida
Posts:
1,062
Plugin Contributions:
1

Re: 1.3.8a - Where do i add custom js for home page only?

clydejones:

Yes, that's where it goes.
The instructions at the demo site for the slideshow are not very clear on this point (at least for the standalone version).

Also, don't forget the placeholder in define_main_page.php

<!-- BOF place holder for slide show -->
  <div id="slidewrap">
  <div id="slideshow"></div>
  <div id="loadingDiv"></div>
  </div>
<!-- EOF place holder for slide show -->

Did that, Got that (getting a little frustrated) and it is still not loading. It's got to be something simple, what am I missing?
JOhn ><>

Newest Site: ChargerPros - Stuff4Toys

28 Oct 2008, 4:58 PM
#17
clydejones avatar

clydejones

Deceased

Join Date:
Nov 2005
Location:
Colorado Springs, CO USA
Posts:
7,017
Plugin Contributions:
12

Re: 1.3.8a - Where do i add custom js for home page only?

Stuff4Toys:

Did that, Got that (getting a little frustrated) and it is still not loading. It's got to be something simple, what am I missing?
JOhn ><>

upload these scripts to the root of your site.

rokslideshow.js
mootools-release-1.11.js

then change these in the main script

<script type="text/javascript" src="includes/rockslideshow/rokslideshow.js"></script> <script type="text/javascript" src="includes/rockslideshow/mootools-release-1.11.js"></script>

TO

<script type="text/javascript" src="rokslideshow.js"></script> <script type="text/javascript" src="mootools-release-1.11.js"></script>

NOTE: We are sorry that Clyde is no longer with us.
We are grateful for all his contributions to the Zen Cart community.

28 Oct 2008, 5:42 PM
#18
stuff4toys avatar

stuff4toys

Totally Zenned

Join Date:
May 2007
Location:
SW Florida
Posts:
1,062
Plugin Contributions:
1

Re: 1.3.8a - Where do i add custom js for home page only?

The only difference I can see between Your installation and mine is
#1) Template
#2) When I try and load http://www.mysticmountainnaturals.com/demotest/images/slideshow/2.jpg your server prevents me from seeing this image and redirects me to an error page.
#3) When I load http://www.langeshome.com/KERUSSO/images/homepage/fireproof.jpg i get to see the image.
#4) I thought about changing the filename to 1.jpg but the filenames work for my example page.

:cry: JOhn ><>

Newest Site: ChargerPros - Stuff4Toys

28 Oct 2008, 6:10 PM
#19
clydejones avatar

clydejones

Deceased

Join Date:
Nov 2005
Location:
Colorado Springs, CO USA
Posts:
7,017
Plugin Contributions:
12

Re: 1.3.8a - Where do i add custom js for home page only?

Stuff4Toys:

The only difference I can see between Your installation and mine is
#1) Template
#2) When I try and load http://www.mysticmountainnaturals.com/demotest/images/slideshow/2.jpg your server prevents me from seeing this image and redirects me to an error page.
#3) When I load http://www.langeshome.com/KERUSSO/images/homepage/fireproof.jpg i get to see the image.
#4) I thought about changing the filename to 1.jpg but the filenames work for my example page.

:cry: JOhn ><>

Here's an outline of my installation:

mootools-release-1.11.js
rokslideshow.js
(these two files are in the root of my site)

images/slideshow

includes/languages/english/html_includes/cold_steel/define_main_page.php (this contains the slideshow placeholder)

includes/templates/cold_steel/jscript/jscript_slideshow.php
The first 4 lines of the script are as follows:

  <script type="text/javascript" src="mootools-release-1.11.js"></script>
  <script type="text/javascript" src="rokslideshow.js"></script>

      <script type="text/javascript">
       
      window.RokSlideshowPath = 'rokslideshow.js';

The path to the images is as follows:

      path: 'images/slideshow/'

The image names work either way (1.jpg or image_name.jpg)

NOTE: We are sorry that Clyde is no longer with us.
We are grateful for all his contributions to the Zen Cart community.

28 Oct 2008, 6:51 PM
#20
stuff4toys avatar

stuff4toys

Totally Zenned

Join Date:
May 2007
Location:
SW Florida
Posts:
1,062
Plugin Contributions:
1

Re: 1.3.8a - Where do i add custom js for home page only?

THANKS so much for your help.

Then there are NO differences between your install and mine except Hooverbox and the ic_Atheme template.

I changed the image names to 1, 2, 3 etc and it didn't help.

I am going to scope out one of your templates tonight and play with that. I tried changing to the classic template and that didn't help either.

Oddly enough if you look at the example pages, the <script> is in the page <body>, not in the <head>. This IS going out work even if I have to :frusty: a few times.

JOhn ><>

Newest Site: ChargerPros - Stuff4Toys