Bringing page with JQuery into store

**blahblah4949** · 8 Aug 2010, 11:56 AM

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

**blahblah4949** · 9 Aug 2010, 11:20 AM

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

**blahblah4949** · 9 Aug 2010, 01:44 PM

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.

**ftdc** · 9 Aug 2010, 01:44 PM

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

**blahblah4949** · 9 Aug 2010, 03:10 PM

Originally Posted by 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..

**blahblah4949** · 9 Aug 2010, 04:30 PM

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..

**blahblah4949** · 9 Aug 2010, 05:13 PM

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

**DrByte** · 14 Aug 2010, 02:31 AM

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:

Code:

<!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:

Code:

<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.

Code:

<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>

**ftdc** · 14 Aug 2010, 10:03 AM

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

**DrByte** · 14 Aug 2010, 05:45 PM

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

Thread: Bringing page with JQuery into store

Thread Tools

Search Thread

Display

Bringing page with JQuery into store

Re: Bringing page with JQuery intoZen Cart

Re: Bringing page with JQuery intoZen Cart

Re: Bringing page with JQuery intoZen Cart

Re: Bringing page with JQuery intoZen Cart

Re: Bringing page with JQuery intoZen Cart

Re: Bringing page with JQuery intoZen Cart

Re: Bringing page with JQuery intoZen Cart

Re: Bringing page with JQuery intoZen Cart

Re: Bringing page with JQuery intoZen Cart

Similar Threads

Integrate Amazon Store Into Ezy Page?

Error bringing up the admin page

Bringing Recent Forum / Blog Posts Into My ZC?

Bookmarks

Bookmarks

Posting Permissions