Jump to content

How to integrate js and jquery files with Smarty?


Recommended Posts

Hello!

 

I'm new on the forum and am French. I tried to post the same topic on the french forum, but nobody answered me :(, therefore I'm hoping to have a little more help from the English one :)..

I'm creating a website which only shows the products without selling them for the moment. I'm modifying the prestashop_alt template, but I am stuck and need some help.

I would like to add a lightbox when the home page appears. I tried to modify the "Facebox" code (founded on the internet), which I modified and tested in an HTML file on my own personal ftp, which worked perfectly well. (I add the html code I created at the end of the topic if needed :) ).

Therefore I placed my image in the theme's image folder, my external javascript file in www/themes/prestashop_alt/js/ and my jquery files in the folder I created: www/themes/prestashop_alt/js/jquery/ . I added the div and id I needed in the header.tpl of the theme and tried to call my js, jquery and css files in this same header.tpl, but it didn't worked! I've tried several syntax sentences I founded on forums, but it just made the website stop working by showing only a blank page :/... I've never used Smarty before, so if someone could help me call these files, I'll be more than glad!! Do I need to declare somewhere the js and jquery files I created?? Or am I just wrong with the calling line?? By the way, did I placed my files in the correct folders?

Could someone give me a hand please?? I'm beginning to despair with Smarty ^^'..

 

 

Thanks a lot in advance!!! :)

 

 

 

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

<html xmlns="Content-Type" content="description" content="stylesheet" type="css/css_facebox.css"/>

<script type="jquery/jquery-1.4.2.min.js"></script>

 

<script type="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="Javascript/js_facebox.js"></script>

<script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>

<script type="jquery/jquery_facebox.js"></script>

</head>

<body onLoad="facebox">

<div class="padding:30px;">

<div><img class="images/img_facebox.jpg"/> </div>

</div>

</div>

</div>

 

</body>

</html>

Link to comment
Share on other sites

Hi,

 

a blank page means you have a PHP error, so you should turn on the error reporting.

 

<script type="jquery/jquery-1.4.2.min.js"></script>

<script type="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="Javascript/js_facebox.js"></script>
<script src="http://cdn.jquerytools.org/1.2.5/all/jquery.tools.min.js"></script>
<script type="jquery/jquery_facebox.js"></script>

This is incorrect.

The correct syntax is:

<script type="text/javascript" src="[PATH_TO_FILE]"></script>

 

<html xmlns="Content-Type" content="description" content="stylesheet" type="css/css_facebox.css"/>

This is incorrect too.

To include a CSS file the syntax is:

<link  rel="stylesheet" type="text/css" href="[PATH_TO_FILE]" />

 

Also, you include the jquery library twice, this will cause Javascript error.

Link to comment
Share on other sites

Hello!

 

Thanks for the answer!

Hmm, I don't know why, I got wrong while copying the code, I wrote the js and css callings correctly, I don't know I might have pasted the wrong file I think. Anyway, I walled them the same way you did :)

Thanks for the double line! I just corrected it thanks to you.

I finally got the right Smarty calling sentence for the js scripts, like this one:

<script type="text/javascript" src="{$js_dir}jquery_facebox.js"></script>

The website's now working again (no more blank page!! :D ), the div, css and image too, though the lighbox doesn't appear..

Where do you think it could come from??

 

 

Thanks a lot for your help!! I really appreciated it!

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Is usual to XXXXXXXXXXXXX the Jquery load loading another one.

Jquery has a smart thechnique called "no_conflict".

 

You have two ways.

  • Unload the common Jquery
  • Search about no_conflict

Can you tell the site url to check the live DOM ?

 

This call is 100% the correct one, so the problem is not that.

<script type="text/javascript" src="{$js_dir}jquery_facebox.js"></script>

Regards.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...