Forums

How to move scripts to footer of site

Permalink
Hi,

By default as we know C5 puts a lot of scripts in the head. I've got a client site v5.6, where the previous developers had loaded jquery in the footer when logged out with the following code:

<?php
   $u = new User(); 
   if(!$u->isRegistered())
   {
   ?>
      <script defer src="/concrete/js/jquery.js" charset="UTF-8"></script>
      <script defer src="/concrete/js/ccm.base.js"></script>
   <?php
   }
   ?>


Also, the site was adding other scripts in the footer. When I updated C5, I notice it is adding scripts to the header instead, so now I have "$ not defined" and other errors, because add-on scripts are loading in the head before jquery is loaded in the footer.

So I guess something in the /concrete folder may have been changed in the original version and now i've upgraded that change has broken this.

How can I fix this?

Thanks
Dave
madesimplemedia
 
andrewjaff replied on at Permalink Reply
andrewjaff
Hi,

"$ not defined" means you have not included jQuery library ,

Please put that code to your theme footer.php file.

if it is already added , can you show me live url of your site.

Thanks
madesimplemedia replied on at Permalink Reply
madesimplemedia
Hi,

I know what $ not defined means, and jQuery is included in the footer, but other scripts that use jQuery are now in the header, whereas they used to be in the footer too, so it worked.

My question is, how did the previous dev tell C5 to add the scripts to the footer instead of the header?
WebcentricLtd replied on at Permalink Best Answer Reply
Hi Dave,
your easiest solution is just to call jquery up in the header. But, if you really don't want to do that you'll need to work out what is calling jquery in the header.

This shouldn't be too difficult as you can look at the source then click through into any .js files to see if they are calling jquery.

There are various ways to add javascripts to the header - either through the core /concrete/elements/header_required.js or also in block or package controllers.

So, if a new block or package has been added you might find a addToHeader causing this issue.

Like I said - it should be fairly easy to track down - but it might just be easier to add jquery in the header anyway.
madesimplemedia replied on at Permalink Reply
madesimplemedia
Thanks Andy, decided to move to the header, too busy to spend lots of time on this.
pixelsnbeards replied on at Permalink Reply
I've been using jquery in the header with the defer tag 

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous" defer></script>


This makes C5 work when logged in while also deferring render blocking elements.