Struggling to include JavaScript and CSS files in the back office

When attempting to add JS and CSS files to the back office in my module, I encountered an error message stating: "Attempted to call an undefined method named 'registerStylesheet' of class 'AdminModulesController'."

I have come across other resources discussing similar issues, such as this post on Stack Overflow or this guide on PrestaShop's theme documentation.

In an effort to avoid using the deprecated addJS() function, I attempted to use $this->context->controller->registerStylesheet() and $this->context->controller->registerJavascript(), but that resulted in the aforementioned error.

This is the code snippet for my hook:

public function hookActionAdminControllerSetMedia($params)
{ 
    $this->context->controller->registerStylesheet(
        'mb_pages_content',
        'modules/'.$this->name.'/styles/admin.min.css'
    ); 

    $this->context->controller->registerJavascript(
        'mb_pages_content',
        'modules/'.$this->name.'/js/admin.js'
    );
}

Despite following the instructions found online, I discovered that $this->context->controller does not actually have registerStylesheet() and registerJavascript() methods. What could I be missing? Why am I still encountering this error?

javascriptcssprestashop-1.7backoffice

Answer №1

Guidance on the recommended methods:

The preferred FrontController methods for PrestaShop 1.7 are: registerJavascript and registerStylesheet.

In PrestaShop 1.7, the outdated (deprecated) FrontController methods are: addJS and addCSS.

For PrestaShop versions 1.7, 1.6, and 1.5, the appropriate AdminController methods are: addJS and addCSS.

To correctly add JS and CSS files for a back-office (i.e. AdminController) through a module class, follow this example:

public function hookActionAdminControllerSetMedia($params)
{ 
    // Include your CSS file from the module's directory
    $this->context->controller->addCSS($this->_path . 'views/css/example.css'); 

    // Include your JavaScript file from the module's directory
    $this->context->controller->addJS($this->_path . 'views/js/example.js');
}

For more details, refer to my related response on how to register JavaScript in a back-office (in admin pages). I have updated it following this query.

Answer №2

Experiment with this code snippet:

$this->addJs(
     _PS_MODULE_DIR_ .'objet/views/js/feature.js',
     'all'
);
$this->addCss(
      _PS_MODULE_DIR_ .'objet/views/css/feature.css',
      'all'
);

Best regards

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Automatic resizing for elements with the class "Div AutoResize."

I am facing an issue with a row of divs. While all the divs on the left automatically resize to fit their content, I want the leftmost div to adjust its size based on the content, but be influenced by the divs on the right. In other words, if the right div ...

htmlcssautosize

Guide on using webpack to import jQuery

When using webpack, is it necessary to install the jquery file from npm, or can I simply require the downloaded file from the jquery website? directory app/ ./assets/javascripts/article/create/base.js ./assets/javascripts/lib/jquery-1.11.1.min.js webpack ...

javascriptjquerynode.jswebpack

Ways to retrieve files that are not located in the public directory in Next.js

I'm currently working on a project using Next.js and storing files in the root directory under /uploads/qr/myimage.png. How can I access this file within the project? I attempted to create a route /api/getImg/route.js dedicated to serving image files, ...

javascriptnext.jsfile-upload

What is the reason why the VIEW SOURCE feature does not display filled dropdown list boxes?

The following code functions well in terms of dynamically populating two dropdown list boxes. Initially, the getBuildings function is called to make a request to the getBuildings.php file. This action fills the buildingID dropdown list box with options. ...

javascriptphpjqueryhtmlajax

Storing values globally in NodeJS from request headers

What is the most effective way to store and access the value from a request header in multiple parts of my application? One approach could be as shown in the following example from app.js: app.get('*', (req, res) => { global.exampleHeader ...

javascriptnode.jsexpress

Fluid percentage-based layout

I have four separate Divs that I would like to position on my page in a specific layout. Here is an image showing how I want them positioned: https://i.sstatic.net/KBZ1U.png In the future, I plan to add multiple svg files to Div 4 and I want it to be scro ...

htmlcss

EJS: Is there a way to display multiple populated collections from mongoose in EJS file?

Having trouble rendering multiple populated collections from mongoDB in EJS. To provide more context, I'll share snippets of my code: models, routes, and views. Model Schema var mongoose = require("mongoose"); var playerSchema = mongoose.Schema({ ...

javascriptnode.jsexpressmongooseejs

Using Angular ngClass with a conditional statement

Incorporating data from a JSON file instead of a database, my goal is to assign a color to the icon based on the status value in the JSON. For instance, [if green? class1:class2]. Here is the code snippet I am working with: My HTML file <ng-containe ...

htmlcssangular

What could be the reason for the styled-jsx not applying the keyframe animation?

When attempting to add the animation separately without any conditions, the transition fails to be applied. Changing the quotation marks to backticks for the animation property also did not work. Is there a way to apply both the animation when clicked is ...

javascriptreactjsnext.jscss-animationsstyled-jsx

Serving static files with Express JS while using Angular's $locationProvider.html5Mode (express.static)

I have a web application built with Angular and Express JS on the server side. I successfully removed the angular # (hashbangs) by using $locationProvider.html5Mode in my code and setting the base in the header of the HTML. Everything is working perfectly ...

javascriptangularjsnode.jsexpress

Empty Textarea Issue on iOS Safari on Mobile Device

I've encountered an issue with a textarea element in a form. After clicking on a button to show the form (which includes dynamic HTML), I can see the textarea element with all its styles applied. However, when I try to type in the textarea on iOS Saf ...

ioscsstextareamobile-safari

Sending request results to the client's browser in Node.js - A step-by-step guide

I am struggling with figuring out how to send the results of a 'request' to the client browser. This function is executed on my Node.js server. var request = require("request"); function RedirectReceiver(url, currentState, callback){ ; Send ...

javascriptnode.jsexpress

Ajax undoes any modifications enacted by JavaScript

When using ajax, I trigger an OnTextChangedEvent. Before this event occurs, there is a Javascript function that validates the input field and displays text based on its validity. However, once the Ajax is executed, it resets any changes made by the Javascr ...

c#javascriptasp.netajax

Using AngularJS $resource to implement complex service calls

Yesterday, I began my journey with angularjs and found myself at this particular section of the tutorial that demonstrates the usage of $resource to access data from services. In my ASP.Net MVC setup, I encountered a slight hiccup due to the difference in ...

javascriptjsonangularjsasp.net-mvc-5angularjs-service

I would appreciate it if someone could clarify how the rendering process occurs in React in this specific scenario

let visitor = 0; function Mug({name}) { visitor = visitor + 1; console.log(name, visitor); return <h2>Coffee mug for visitor #{visitor}</h2>; } return ( <> <Mug name={"A"}/> <Mug name={"B&qu ...

javascriptreactjsrender

Tips for dynamically assigning arguments to a method call within a loop

Encountered an unusual issue that can be best described through code: var fruits = ["apples", "oranges", "pears"]; var Breakfast = { _consume : function (fruit) { Breakfast[fruit]._numConsumed++; } }; for (var f in fruits) { var fruit = fruits ...

javascript

css background is repeating after the height of the div is reset

I'm working on a project where I want to resize an image while maintaining its aspect ratio to fit the height/width of the browser window. However, every time the code for resizing is implemented, the div height continues to increase with each resize ...

javascriptjqueryhtmlcssbackground

Creating Dynamic Divs in ASP.NET

Attempting to dynamically create a Div by clicking a button has been a challenge for me. I found a helpful link here: After referring to the link, I created the following code on the server side (.cs page): public static int i = 0; protected void Bu ...

c#javascriptasp.net

Implementing a custom arrow icon and adding functionality for closing on click in Kendo Multiselect

I'm looking to enhance the functionality of my Kendo Multiselect by giving it the appearance and behavior of a standard dropdown list. I'd like to include an arrow or triangle icon that toggles and closes the list when clicked. Can anyone provide ...

javascriptangularjskendo-uikendo-multiselect

When trying to access a nested field in a React app after importing JSON, it returns as undefined

I recently integrated a JSON file into my react app (using the next.js router) and now I am trying to retrieve a specific field from it based on a parameter in the URL. Everything works smoothly when navigating from another page (/home -> /annotations/& ...

javascriptjsonreactjsnext.jsnext-router