Where to place and how to load javascript and css files?

[pilou2]

Hello,
I have just made some new scripts to automatically load address when entering postal code in create new account and address book pages. It has been done on Zen Cart 1.58 and PHP 8.2 and works fine but I am not happy with the way js scripts are loaded and I am not sure either if I put them at the best place. First the actual structure is like this:
Javascript files are in 'includes/templates/template_default/jscript/' folder.
Css files are in 'includes/templates/template_default/css/' folder.
Ajax php script is in 'includes' folder.
Css and Javascript files are loaded by these lines placed at the end of 'tpl_modules_create_account.php' and 'tpl_modules_address_book_details.php'.

<link rel="stylesheet" type="text/css" href="includes/templates/template_default/css/jquery.powertip.css" />
<script src="includes/templates/template_default/jscript/jquery.powertip.min.js"></script>
<script src="includes/templates/template_default/jscript/jquery.powertip.js"></script>
<script src="includes/templates/template_default/jscript/jscript_postcode.js"></script>

What it does:
When customer enter postal code in a form an ajax request is sent to a PHP script that retrieve state, city and local area (street) name from database. Result is then parse into form fields.

Here are my questions:
Is there a way to load these scripts in header (or beginning of body) of each page without touching template files?
About connection to database from a simple script (AJAX called), is it possible to use database constants in 'configure.php'? I tried this:

require_once 'configure.php';

but it did not work.

[lat9]

When using AJAX scripts, it's easiest (my opinion) to use the built-in AJAX handling. You could take a look at the /includes/classes/ajax/zcAjaxBootstrapSearch.php file provided by the Bootstrap 4 template as an example.

That'll take care of all the loading of language and class files for you.

[pilou2]

When using AJAX scripts, it's easiest (my opinion) to use the built-in AJAX handling. You could take a look at the /includes/classes/ajax/zcAjaxBootstrapSearch.php file provided by the Bootstrap 4 template as an example.

That'll take care of all the loading of language and class files for you.

Thanks for your quick answer. Looking at this plugin I can see I did the ajax call differently, calling just my script. With Ajax bootstrap, the ajax.php is called and transmit parameters to the actual ajax script, providing at the same time necessary header, global variable and others... But problem was not there. In my ajax php script problem with sql connection constants from configure.php has been solved by evaluating constants in the connection string with php function constant().

Coming back to ajax search, call to ajax script is made by ajax_search.js in 'includes/templates/bootstrap/' folder. But how it is loaded is still unclear.
Looking at 'includes/templates/mytemplate/html_header.php' lots of .js, .css and .php files are loaded here, globally if they are in css or jscript folder and per page if they are in 'modules/pages/a_particular_page/' folder. Plus their names need to follow some patterns. I have seen something about that in ZC developer documentation but when I try it (jscript_*.js in jscript folder) files are not loaded!
I definitely miss something here...

[pilou2]

...call to ajax script is made by ajax_search.js in 'includes/templates/bootstrap/' folder. But how it is loaded is still unclear.
Looking at 'includes/templates/mytemplate/html_header.php' lots of .js, .css and .php files are loaded here, ...

Some correction to my post where I forgot some folders in path:
It should have been 'includes/templates/bootstrap/jscript/' for javascript files and next line 'includes/templates/mytemplate/common/html_header.php' !

I changed my AJAX call and use the built-in AJAX handling now. It does not change much with my very simple script but it should make things easier with more complex stuff.
I had no luck with trying to get css and javascript files load automatically. I was hoping to make a plugin with no file modification...
I still have to put these call in each page I want to use it:

<link rel="stylesheet" type="text/css" href="includes/templates/template_default/css/jquery.powertip.min.css" />
<script src="includes/templates/template_default/jscript/jquery.powertip.min.js"></script>
<script src="includes/templates/template_default/jscript/jscript_postcode.js"></script>

It works well like this and will be send to plugin upload as soon as I am done with internationalization. I hope somebody will bring light here on this loading problem, even after release.

[lat9]

Is the plugin something that appears on all pages or only on a couple of pages?

I ask because you could name the jquery.powertip.min.css to stylesheet_jquery.powertip.min.css and place that in YOUR_TEMPLATE's /css directory to automatically load on all pages.

You could do a similar 'renaming' for the js files, just rename the jquery.powertip.min.js to jscript_jquery.powertip.min.js and place both that and the jscript_postcode.js in YOUR_TEMPLATE's /jscript directory. If the .min.js file needs to be loaded prior to the other one, you could create a file named /includes/templates/YOUR_TEMPLATE/jscript/jscript_postcode.php that simply adds those two .js files load (via a <script></script> tag-pair).

[pilou2]

Is the plugin something that appears on all pages or only on a couple of pages?

I ask because you could name the jquery.powertip.min.css to stylesheet_jquery.powertip.min.css and place that in YOUR_TEMPLATE's /css directory to automatically load on all pages.

You could do a similar 'renaming' for the js files, just rename the jquery.powertip.min.js to jscript_jquery.powertip.min.js and place both that and the jscript_postcode.js in YOUR_TEMPLATE's /jscript directory. If the .min.js file needs to be loaded prior to the other one, you could create a file named /includes/templates/YOUR_TEMPLATE/jscript/jscript_postcode.php that simply adds those two .js files load (via a <script></script> tag-pair).

The plugin should only be used in couple of pages but if I can load it globally it would be good to. Actually I tried it (renaming ...) already without success. But you might have pointed out something here. jquery.powertip.min.js certainly needs to be loaded first. I hope it is that and will try with a php script to load them as you explained. I will come back when tests are done.
Thanks!

[pilou2]

Finally got it, Thanks to few ideas from #lat9 and a useful jquery method getScript()!
Problem was timing. Although files were loading properly with Zen Cart auto loading system, it was not working because they have to be loaded one after another and after DOM is loaded.
I simply encapsulated my script (the last one to be loaded 'jscript_postcode.js') with this code:

$.when(
    $.getScript( "includes/templates/responsive_classic/jscript/jquery.powertip.min.js" ),
    $.Deferred(function( deferred ){
        $( deferred.resolve );
    })
).done(function(){

----------------'jscript_postcode.js' original script here-------------

});

With jQuery function getScript(), when DOM has loaded file 'jquery.powertip.min.js' is loaded then the code in '.done(function(){...'.
For global loading file are to be placed like this:
includes/templates/YOUR_TEMPLATE/css/stylesheet_jquery.powertip.min.css
includes/templates/YOUR_TEMPLATE/jscript/jquery.powertip.min.js
includes/templates/YOUR_TEMPLATE/jscript/jscript_postcode.js
And everything loads well and work fine.
I now changed it for local loading in three pages only by removing 'jscript_postcode.js' from template 'jscript' folder and putting it in the three 'includes/modules/pages/page_name/' folders and all is good.