Help: Foundation Zurb Stack includes jQuery, but i need it earlier in the page?

TLDR: Is it ok to load app.js in the head and then call (document).foundation(); in the footer (even though that's calling (document).foundation(); twice?)

More detail:
So the foundation zurb stack bundles jquery into app.js, which I load at the foot of every page using layout templates.

Problem is, another shop library that I’m using on a few pages includes lots of references to $ in the page because it expects jquery to be loaded in the head.

  • If I load jQuery in the head then I get 2 versions of jQuery that conflict and I get errors.
  • If I load only app.js in the foot as normal then I get errors in the page because the shop can’t find jQuery.

I can’t edit the shop library js or use a different library.

The solution I’ve come up with is to load App.js in the head on those specific pages (instead of the foot), and then call (document).foundation(); in the foot. This means that (document).foundation(); is getting called twice, once in app.js and once in the footer. Is this an issue?

You should load all js files right before <body> not in the head which would be a huge blocking resource. You can remove the $(document).foundation() line from app.js in your case.

You can also remove the jQuery version by us.
Why not use https://unpkg.com/foundation-sites@6.6.1/dist/js/foundation.min.js and https://unpkg.com/foundation-sites@6.6.1/dist/css/foundation.min.css?

Foundation Sites is compatible with jQuery 1.12+. If you ever have the requirement to load two different versions and can not avoid that, see the noconflict mode of jQuery. https://api.jquery.com/jquery.noconflict/