[SOLVED] Path to CSS from JS file

[Waseya]

Hi!

I have a module showing a banner, that has a couple of .js and .css files. The problem is my .js file need .css file url to initialize. Js file looks like:

...

current_lang : 'en',
theme_css: '../css/my-css-file-url-adress.css',

...

And surely enough it doesn't work. When I check the console, Prestashop tries to create the path like: 

prestashop/en/css/my-css-file-url-adress.css

Even if I try to use something like /modules/mymodule/css/my-css-file-url.adress.css - It still doesn't work, because of that /en/ part inserted by Prestashop. I know that there should be a very simple solution, but I'm just not aware of it. What should I do to make my javascript file to find my css file all by itself?

Edited February 11, 2022 by Waseya
solved (see edit history)

[Luis C]

Hey there Waseya.

Prestashop stores some global variables in js, and you can access them from your js file, One of them is 'prestashop.urls'. From there, you can form your css url.

 

I.E. prestashop.urls.base_url will give you http(s)://your-main.url/

prestashop.urls.theme_assets will give you your /themes/my-theme/assets/ path

prestashop.urls.css_url will form your theme's css directory url

prestashop.urls.js_url will give you your url to your theme/assets/js directory...

 

Just use the browser's console while on your site and try sendind "prestashop.urls". That way you'll see all the options available.

Let me know if it helped or not.

 

[Waseya]

I tried another solution based on js, simply adding a function to my initializing js. file, like this:

 

var newUrl;

function getURL() {
        url = window.location.href;
        query = url.split('/en/');
        newHost = query[0];
        newPath = '/modules/mymodule/vews/css/mymodue.css';
        newUrl = newHost + newPath;
        return newUrl;
}

....

    theme_css: newUrl,

 

And it works.

[Luis C]

Isn't it better to declare the variable through your module?

$csspath = '/modules/'.$this->name.'/views/css/yourmodule.css';
Media::addJsDef(array('yourmodule' => array('csspath' => $csspath)));

and then registering your javascript file (bottom is better) and using something like:

var path = yourmodule.csspath;

theme_css: path,

 

At least less resource consuming?

[Waseya]

thanks! that's what I initially was looking for! This thing works:

mymodule.php:

  $csspath = $this->context->controller->addCSS($this->_path . 'views/css/mymodule.css');

  Media::addJsDef(array('mymodule' => array('csspath' => $csspath)));

 

ini.js:

var path = mymodule.csspath;

...

    theme_css: path,

[Luis C]

22 hours ago, Waseya said:

thanks! that's what I initially was looking for! This thing works:

mymodule.php:

  $csspath = $this->context->controller->addCSS($this->_path . 'views/css/mymodule.css');

  Media::addJsDef(array('mymodule' => array('csspath' => $csspath)));

 

ini.js:

var path = mymodule.csspath;

...

    theme_css: path,

Fantastic, glad it worked. You should edit and add "SOLVED" to the post title