Where to place and how to load javascript and css files?
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'.
Code:
<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:
Code:
require_once 'configure.php';
but it did not work.
Re: Where to place and how to load javascript and css files?
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.
Re: Where to place and how to load javascript and css files?
Quote:
Originally Posted by
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.
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...
Re: Where to place and how to load javascript and css files?
Quote:
Originally Posted by
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:
Code:
<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.
Re: Where to place and how to load javascript and css files?
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).
Re: Where to place and how to load javascript and css files?
Quote:
Originally Posted by
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).
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!
Re: Where to place and how to load javascript and css files?
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:
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.
Re: Where to place and how to load javascript and css files?
Well, I am back with nearly identical problem... I am trying to convert this plugin (post auto fill) to an encapsulated plugin. Using all information I could find I managed to do it and the plugin install and uninstall without any problem, creating necessary databases but javascript part is failing again.
jscript_postcode.js files in modules/page/ are loaded but I got an error 404 in browser debug. I am not sure where is the problem:
It seems ZC is looking for the js file (which is loaded from login page for exemple) in ZC folder, not in plugin folder.
jscript_postcode.js file is trying to load jquery.powertip.min.js which is in now in 'zc_plugins/PostAuto/v2.0.0/catalog/includes/templates/default/jscript/' and reference to this file in getScript() function might be wrong. I tried few possibilties but all failed.
I am actually wondering if loading some javascript from an encapsulated plugin folder for a ZC page that is not in the plugin is supported.
If somebody has any idea/info, it is most welcome.
Re: Where to place and how to load javascript and css files?
Quote:
Originally Posted by
pilou2
It seems ZC is looking for the js file (which is loaded from login page for exemple) in ZC folder, not in plugin folder.
jscript_postcode.js file is trying to load jquery.powertip.min.js which is in now in 'zc_plugins/PostAuto/v2.0.0/catalog/includes/templates/default/jscript/' and reference to this file in getScript() function might be wrong. I tried few possibilties but all failed.
I am actually wondering if loading some javascript from an encapsulated plugin folder for a ZC page that is not in the plugin is supported.
The simplest alternative would be to rename your jquery.powertip.min.js to have a "jscript_" prefix, and then Zen Cart will automatically tell the browser to load it from the correct path, by inserting a call for it directly in the page's HTML.
Alternatively, you could rename your jscript_postcode.js to jscript_postcode.php (or add the .php file as well) to do the loading, and then in the PHP code of that file you can load the additional JS files yourself.
Or, with (soon to be released) v2.1.0, you can use an observer:
PHP Code:
<?php
/**
* Designed for v2.1.0+ (depends on InteractsWithPlugins trait and NOTIFY_HTML_HEAD_END notifier added in v2.1.0 )
*/
use Zencart\PageLoader\PageLoader;
use Zencart\Traits\InteractsWithPlugins;
use Zencart\Traits\NotifierManager;
use Zencart\Traits\ObserverManager;
class MyObserverClassNameHere
{
use InteractsWithPlugins;
use NotifierManager;
use ObserverManager;
public function __construct()
{
$this->attach($this, ['NOTIFY_HTML_HEAD_END']);
/**
* Determine this zc_plugin's paths: $this->zcPluginCatalogPath is used to load more template assets
*/
$this->detectZcPluginDetails(__DIR__);
}
/**
* Catalog: Runs at the end of the active template's html_header.php (just before the </head> tag)
* We can load additional plugin assets here.
*/
public function notify_html_head_end(&$class, $eventID, string $current_page_base): void
{
// load a plugin-specific stylesheet, first from plugin dir, then from store's template:
//$this->linkCatalogStylesheet('my_plugin_stylesheet.css', $current_page_base);
// load a JS file from the plugin's jscript directory:
$pageLoader = PageLoader::getInstance();
$filename = 'foo.js';
if (file_exists($file = $pageLoader->getTemplatePluginDir($filename, 'jscript', $this->zcPluginDirName) . $filename)) {
echo '<link rel="stylesheet" href="' . $file . '">' . "\n";
}
}
}
Re: Where to place and how to load javascript and css files?
@DrByte
Thanks for the Oserver code! I was able to properly load my 2 js scripts globaly from plugin template directory. Other methods won't work. Actually I was not able to load anything from template's css or jscript folders without it. It is like no autoloading works there.
From modules/pages script seems to be found but it is like ZC looks for files in main catalog, not plugin's one.
Here is the code I have now for the observer class.post_auto.php:
PHP Code:
<?php
/**
* Designed for v2.1.0+ (depends on InteractsWithPlugins trait and NOTIFY_HTML_HEAD_END notifier added in v2.1.0 )
*/
use Zencart\PageLoader\PageLoader;
use Zencart\Traits\InteractsWithPlugins;
use Zencart\Traits\NotifierManager;
use Zencart\Traits\ObserverManager;
class zcObserverPostAuto
{
use InteractsWithPlugins;
use NotifierManager;
use ObserverManager;
public function __construct()
{
$this->attach($this, ['NOTIFY_HTML_HEAD_END']);
/**
* Determine this zc_plugin's paths: $this->zcPluginCatalogPath is used to load more template assets
*/
$this->detectZcPluginDetails(__DIR__);
}
/**
* Catalog: Runs at the end of the active template's html_header.php (just before the </head> tag)
* We can load additional plugin assets here.
*/
public function notify_html_head_end(&$class, $eventID, string $current_page_base): void
{
// load a plugin-specific stylesheet, first from plugin dir, then from store's template:
//$this->linkCatalogStylesheet('my_plugin_stylesheet.css', $current_page_base);
$this->linkCatalogStylesheet('stylesheet_jquery.powertip.min.css', $current_page_base);
// load a JS file from the plugin's jscript directory:
$pageLoader = PageLoader::getInstance();
/* $filename = 'jscript_postcode.js';
if (file_exists($file = $pageLoader->getTemplatePluginDir($filename, 'jscript', $this->zcPluginDirName) . $filename)) {
echo '<script src="' . $file . '"></script>' . "\n";
}
*/ $filename = 'jscript_postcode.php';
if (file_exists($file = $pageLoader->getTemplatePluginDir($filename, 'jscript', $this->zcPluginDirName) . $filename)) {
//echo '<script src="' . $file . '"></script>' . "\n";
include($file);
}
}
}
I made its config.post_auto.php to load it automatically, but I am not sure at which point it should be loaded.
PHP Code:
<?php
if (!defined('IS_ADMIN_FLAG')) {
die('Illegal Access');
}
$autoLoadConfig[139][] = [
'autoType'=>'class',
// the filename, relative to the `classes` folder:
'loadFile'=>'observers/class.post_auto.php',
'classPath'=>DIR_WS_CLASSES
];
$autoLoadConfig[139][] = [
'autoType'=>'classInstantiate',
// the name of the class as declared inside the observer class file
'className'=>'zcObserverPostAuto',
// the name of the global object into which the class is instantiated
'objectName'=>'zcObserverPostAuto'
];
With this observer I can load style sheet and script whatever in a js file or php file. The script I load then load its require second script and wait it is loaded to run. Now Javascript works fine and when filling a form the AJAX call is triggered. Unfortunately the AJA call is FAILLING! I got a HTTP 400 error and a log file with this in it:
Code:
Uncaught Error: Class "Zencart\Plugins\Catalog\PostAuto\base" not found
The line referred to in php file doing the call is the class declaration:
Code:
class zcAjaxPostcodeQuery extends base
Something that is necessary is not accessible from the plugin, and for now I have no clue how to fix that.
Re: Where to place and how to load javascript and css files?
Problem solved. For any reason, during my tests, I added a namespace declaration in AJAX file and forgot about it. After deleting it, everything is OK.
