Help with integrating with my custom javascript

[smrtrnx]

Hi everyone,

I tried integrating my customJS.js file into app.js of foundation. As a newbie to foundation all I can do is to follow from the app.js of foundation on using import './lib/customJS.js'; and yes, I can see that my customJS codes is applied into the app,js of foundation.

my customJS.js file contains multiple functions and it does contain a line $(document).ready(function(){ but when I look at in the console I always get $ undefined.

Can someone please help the proper way to import customJS with foundation?

Cheers~

[Priestch]

https://get.foundation/sites/docs/javascript.html
@smrtrnx Foundation depends on jQuery, $ undefined means you didn't load jQuery properly.

[smrtrnx]

does this mean that jQuery is not packed with the app.js? I can't seem to find the absolute path for these .js files

<script src="js/jquery.min.js"></script> <script src="js/foundation.core.min.js"></script>

[Priestch]

@smrtrnx I think jQuery must be loaded somehow by yourself. The path for these js files depends on your actual project situation, you must make sure the browser can fetch these files correctly when developing and deploying.

To simplify the situation, you can try to set the jQuery path to some CDN links.
Here is an example.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

[clizlee]

@smrtrnx so i just include my custom js after $(document).foundation(); right in the app.js file. But the way you have it I think should work, but you don't include the .js in that import line. So if your customJS.js file is in assets/js/lib then the line would be import './lib/customJS';

then when you run either foundation build or npm run build your compiled app.js file should have that code compiled in there. At the top of your app.js file does it look like the below screenshot? Here's a screenshot of the top of my app.js file:

So jquery should be compiled into your builded app.js file in the dist folder.

[smrtrnx]

Hi @clizlee It works perfect after inserting my custom.js below the require('foundation-sites'); like you've mentioned. Thanks for pointing this out.

PS. by the way, I haven't found any discussion boards about foundation-sites other than this forum.

Cheers mate :)