I'm creating a custom module in Prestashop 1.7, and I've tried many solutions but nothing solved my problem.
I would add an external JS file to the header or footer of the website where the module is installed (and only when it's installed).
<script src=".js"></script> // JS file to include
I tried to use the addJS() method in the displayHeader hook:
public function hookDisplayHeader($params)
{
if (!$this->active)
return;
$this->context->controller->addJS('.js');
}
public function install()
{
return parent::install() && $this->registerHook('displayHeader');
}
I made a lot of tests, and the hookDisplayHeader() function is called, but my JS file doesn't appear in the <head> of my page.
The Prestashop documentation is limited, but after many researches, I think I can only use the addJS() method with internal JS files. Am I right?
How should I do to add an external JS file to my header (or footer before </body>)?
I'm creating a custom module in Prestashop 1.7, and I've tried many solutions but nothing solved my problem.
I would add an external JS file to the header or footer of the website where the module is installed (and only when it's installed).
<script src="https://cdn.monurl./file.js"></script> // JS file to include
I tried to use the addJS() method in the displayHeader hook:
public function hookDisplayHeader($params)
{
if (!$this->active)
return;
$this->context->controller->addJS('https://cdn.monurl./file.js');
}
public function install()
{
return parent::install() && $this->registerHook('displayHeader');
}
I made a lot of tests, and the hookDisplayHeader() function is called, but my JS file doesn't appear in the <head> of my page.
The Prestashop documentation is limited, but after many researches, I think I can only use the addJS() method with internal JS files. Am I right?
How should I do to add an external JS file to my header (or footer before </body>)?
3 Answers
Reset to default 8addJS() function is deprecated in PrestaShop 1.7. You now have to use registerJavascript().
$this->context->controller->registerJavascript(
'monurl', // Unique ID
'https://cdn.monurl./file.js', // JS path
array('server' => 'remote', 'position' => 'bottom', 'priority' => 150) // Arguments
);
The important argument you must not forget here is 'server' => 'remote' to load an external JS file.
You can find more information about this function here in the doc: https://developers.prestashop./themes/assets/index.html
Another think about your code, you do not have to put:
if (!$this->active)
return;
The entire hook will not be called if the module is disabled.
This method addJs is obsolete for Prestashop 1.7*. Use
$this->context->controller->registerJavascript('cdn', 'https://cdn.monurl./file.js', array('media' => 'all', 'priority' => 10, 'inline' => true, 'server' => 'remote'));
where first parameter is an identificator of a new script to avoid next its including if it was included once, the second parameter is a path to a media file, and the last parameter is an array with extra information about new media file where parameter 'server' point out that a file is on remote server. By the way, css files are including the same way now with the method $this->context->controller->registerStylesheet();
In PrestaShop 1.7 for a front-office page you need to use another method to add an external JS file: registerJavascript. But for a back-office page you can do it as usual.
So, for example, to add a JavaScript file to a front-office page from the https://ajax.googleapis. website you need use the new method registerJavascript with the option 'server' => 'remote':
$this->context->controller->registerJavascript(
'three.js',
'https://ajax.googleapis./ajax/libs/threejs/r84/three.min.js',
['position' => 'bottom', 'priority' => 100, 'server' => 'remote']
);
To add a CSS file you can use another new method of FrontController: registerStylesheet.