Bringing page with JQuery into store

Hi,

I was wondering what would be the best way to import a static Xhtml page which has JQuery into Zen Cart. I am hoping I can use EZ pages, but not sure how I bring the JQ in with the Xhtml.

Page to import with JQ

Zen Cart testsite

At the moment they are linked internally (my ZC is in a subfolder), but think it would be better to have it all as one after listening to advice here.

Are there any tutorials on adding JQuery to EZ pages?

Thanks :smile:

OK, so I did some more digging around and found this link from a couple months back:

http://www.zen-cart.com/forum/showthread.php?t=88724

I looked in my includes/templates/CUSTOM TEMPLATE/ but there is no JScript folder there. So how about this for a plan of action:

1 Create a JScript folder in my CUSTOM template folder and put all JScript files inside (adding jscript_ before each file name).

2 Place the HTML inside an EZ page.

3 Hmm.. not sure. Will the ez page pick up the JScript files automatically or do I have to do anything else to link them?

Cheers

Oh, forgot the CSS that comes with the JS slider as well. Should I just create a separate CSS file in my CUSTOM template and put the files in there?

Thanks for any help. :smile:

you need to put them in your html_header file and then your whole site will pick them up including ez pages

ftdc:

you need to put them in your html_header file and then your whole site will pick them up including ez pages

The CSS yeah? Thanks mate, you mean the one found under

templates/template_default/common/html_header.php

So I put CSS in there and do the rest as you said on the other post?

Thanks..

Could someone explain where I put the CSS again please? ftdc could you say whereabouts if you have a sec. I have copied the JS files over and the html is in the EZ page. Just need to sort the CSS.

Thanks again..

Ok, still here lol

Found this:

http://www.zen-cart.com/forum/showthread.php?t=51148

So I added that piece of code to the header, uploaded it along with the two JScript files it needs. Opened a new file for an EZ page, cut/paste my original html file into that.

You can see it here live: test page.

So it looks like the html is there, but the CSS is not linked up yet. Is it something to do with naming the chapter on the EZ page edit?

I want it to eventually look like this : http://www.zentest.net/index.html

:blink:

You can't paste code that belongs OUTSIDE the <body> tags into an EZ-Page. Doing that causes you to end up with invalid HTML, and gives you a false sense of thinking you can just drop anything in without doing appropriate edits to suit the environment you're using.

So, some of the errors you need to fix include:

1. You've added a DOCTYPE inside your ez-page, which is wrong since one is already set by the Zen Cart template. Same with the other stuff you added, including your own extra <body> tag.

2. You've hard-coded additional content to refer to various javascript files. Don't do that. Stuff it into the jscript folder for the pages you want it to load on, and use the prescribed filenaming convention.

ie: if you look at the page source in your browser (yes, "View Source" is a handy tool), you'll see that Zen Cart is already putting this in for you:```

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"> <head> <title>home : Mark Marriott</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

[snip]

<base href="http://www.zentest.net/store/" /> <link rel="stylesheet" type="text/css" href="includes/templates/customstore/css/stylesheet.css" /> <link rel="stylesheet" type="text/css" href="includes/templates/customstore/css/stylesheet_css_buttons.css" /> <link rel="stylesheet" type="text/css" href="includes/templates/customstore/css/page20.css" /> <link rel="stylesheet" type="text/css" media="print" href="includes/templates/customstore/css/print_stylesheet.css" /> <script type="text/javascript" src="includes/templates/customstore/jscript/jscript_jquery.js"></script> <script type="text/javascript" src="includes/templates/customstore/jscript/jscript_jquery.nivo.slider.js"></script> </head> <body id="pageBody"> ```and then you're putting it all in all over again, and with wrong paths to non-existent js and css files:``` <h1 id="ezPagesHeading">home</h1>

<div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>mark marriott</title> <link href="page20.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="jquery.nivo.slider.js" type="text/javascript"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script> </head> <body> and more of your stuff here ....

and more inappropriate tags here:
</body>

</html> ```

3. In the actual HTML you put in your ez-page, the images you mention don't actually exist. Thus, it's not loading them. Thus your slider effect is malfunctioning.

<div id="slider">
<img src="Images/pic1.jpg" width="505" height="345" alt="pic1" />
<img src="Images/pic2.jpg" width="505" height="345" alt="pic2" />
<img src="Images/pic3.jpg" width="505" height="345" alt="pic3" />
</div>

Yes look at.
To explain it ferther your jquerry statement without The <script> tags go in à file legs call it smide.js for example. Then in your html_header file you link it in inside à <script> tag and The css gods inside include/templates/yourtemplate/css/stylesheat.css

Hope that make sens, good luck.
Posted via Mobile Device

No, it doesn't make sense.
And there is no need to touch html_header.php at all.

Thank you very much DrByte. Just the info I was after and gives a much better understanding. Funny, as I use view source all the time but never thought of using it in this instance:blush:

I have done as you said and removed the unnecessary stuff from the head/tags. Added the pics 123 to the images folder of my custom template.

What I don't quite understand is where to place this part that fires up the Js from the head:

<script type="text/javascript">
$(window).load(function() {
	$('#slider').nivoSlider();
});
</script>

You say "Stuff it into the jscript folder for the pages you want it to load on, and use the prescribed filenaming convention."

Do you mean to give it it's own file, and then name it jscript_nivoslider.js ? Or..

Stuff it in the main slider.js file I have in there?

Also, only some of my images are being picked up. The background pic is, but the logo is not for example. The images are sitting in my images folder of my custom template. I know I've made a stupid schoolboy error somewhere:mellow:

OK, the image problem is now sorted as far as I can tell.

Just getting the JScript to fire up now.

blahblah4949:

What I don't quite understand is where to place this part that fires up the Js from the head:

<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script>

> 
> You say "Stuff it into the jscript folder for the pages you want it to load on, and use the prescribed filenaming convention."
> 
> Do you mean to give it it's own file, and then name it jscript_nivoslider.js ?
No, I think I'd put it in the HTML, after closing slider </div>

Well tried it in a few places in the html but no joy yet. I checked the 3 images are in there so it's not that.

I'm thinking maybe a wrong filename is causing this? Can't see anything so far though :huh:

If you look at the source code, it appears the CSS file for the slider is not in the header. I have the file sitting in my CSS folder of my custom template, so how can I link to it in the header? At the moment it is just named ' nivo-slider.css ' .

Thanks for your help with this :clap:

ftdc:

Yes look at.
To explain it ferther your jquerry statement without The <script> tags go in à file legs call it smide.js for example. Then in your html_header file you link it in inside à <script> tag and The css gods inside include/templates/yourtemplate/css/stylesheat.css

Hope that make sens, good luck.
Posted via Mobile Device

Ah, so I just place the nivo-slider.css in with the stylesheet.css? I don't need to keep the two separate?

Or you could rename the file to start with "style" so that Zen Cart will pick it up and use it automatically.
ie: "style_nivo-slider.css"

DrByte:

Or you could rename the file to start with "style" so that Zen Cart will pick it up and use it automatically.
ie: "style_nivo-slider.css"

Great tip, thanks.

Well can't be far from cracking this now. From the source code does it appear like everything should work?

Am triple checking everything but maybe it's too obvious.

OK, last stab before I hit the sack (nearly midnight in UK).

Really appreciate the help so far :smile:

At the top of your jscript_jquery.nivo.slider.js file is a section of code that contains this:

$(window).load(function() {
    $('#slider').jscript_nivo.Slider();
});

and that's throwing this error: > TypeError: Result of expression '$('#slider').jscript_nivo' [undefined] is not an object

I think you added that whole section of the code to the file as a guess, but that was a mistake, and is now causing things to break.