0

I am working on a custom home page for my prestashop website.

I don't use the layouts because my homepage have to be clean and I don't need stuff like header and footer and menu etc

Using smarty global variables, I call my jquery in the <head> tag like this

<script src='{$urls.js_url}jquery.js'></script>

When I access my page online, the url is correct (mysite.com/mytheme/js/jquery.js) and if I go to it, I can see the jquery file.

and before my closing <body> tag, I call my "home custom" js file

<script src='{$urls.js_url}my_script.js'></script>

which start like this

$(function).ready(function(){

My browser throw me the error Uncaught ReferenceError: $ is not defined which is weird since Jquery is loaded at the very begining. I'm very confused

EDIT

Even if I copy the jquery code and put it in a <script> tag within <head>, I got the error

Richard
  • 785
  • 3
  • 24
  • common mistake will be 1. jQuery plugin is included before jQuery file. 2.Due to the incorrect path 3.No internet but accessing cdn files from online. If you say your path is correct linked local, then try loading cdn jquery library from online once and check its working – gowtham rajan Mar 25 '19 at 12:27
  • I didn't specified local. Everything is done on a distant server (including the jquery link). What do you mean jquery plugin is included before jquery file? – Richard Mar 25 '19 at 12:59
  • Example : // – gowtham rajan Mar 25 '19 at 13:46
  • Possible duplicate of [Uncaught ReferenceError: $ is not defined?](https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) – gowtham rajan Mar 25 '19 at 13:53
  • @gowthamrajan really? lol. It's not even close mate. Take your time before answering please. Read my question carefuly – Richard Mar 25 '19 at 13:57
  • You asked so i replied to clear your doubt.. nothing to lol here .. wait for some time to get your best answer .. :-) – gowtham rajan Mar 25 '19 at 14:23
  • @gowthamrajan I said "and before my closing tag, I call my "home custom" js file" and you put 3 answer about a possible miss-placement of the jquery call. What can I say? So I tell you what a stack reviewer told me once : take your time before answering and read more carefuly – Richard Mar 25 '19 at 14:32
  • Its OK bro cool.. Me to don't have any idea so i mention possible issues. – gowtham rajan Mar 25 '19 at 14:48
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/190632/discussion-between-gowtham-rajan-and-vincent-d). – gowtham rajan Mar 25 '19 at 14:50
  • @gowthamrajan Thank you for trying mate. I found the solution, you can check my answer if you want :) Thanks again and sorry about me being stressed ;) – Richard Mar 25 '19 at 15:40

1 Answers1

0

Here the solution:

it is similar to other cms->jquery conflict problems but it deserve an explanation since no post covers the prestashop jQuery.noconflict() usage within a Prestashop environment

Since prestashop use a noConflict classe called in /js/jquery/jquery.noConflict.php whenever a template is compilated, the jquery variables are muted (both $ and jQuery)

So you have to play by the rules of the $.noConflict function when you try to use jquery from a custom template/theme

If you try to do a custom jquery function, wrap your code in

(function($){
 // this place is safe to use $ outside the $.ready function
 $.fn.yourCustomFunction = function(){}
}

If you are about to code some Jquery, just put the variable $ or jQuery in the $.ready function parameter like so:

$(document).ready(function($){
   // $ is safe to use. if you prefere jQuery instead, replace the parameter '$'
}
Richard
  • 785
  • 3
  • 24