Redeem Now
Read More
Read now
Menu Close
    Start a Project Request quote Reading list Switch to dark mode

    Magento Development 11: CSS and JS

    We have been learning magento for pretty long time but I have not yet introduced you to css and javascript. In this blog we will see how to use css and js in magento.


    Let’s first start with the styling our pages. We will add styling to the add and edit page. But before that let’s add some classes and div blocks so that we can target them in css file.

    Let’s edit the add page, view/frontend/templates/add.phtml

    Here as you can see we have added everything in nice html format and added classes to every element. And also we have made the static contents translatable.

    Similarly we will need to change the edit page, view/frontend/templates/edit.phtml

    Now we have to create the styling file. All the css and js files are created under view/{areacode}/web folder. And it’s convention to create separate folders for js and css files under web folder. Also it’s recommended to create only one css file for a module.

    So we will create the css file as view/frontend/web/css/style.css

    Now still we have one more thing to do. We need to tell magento to use this css file on the edit and add blog pages. For that we need to edit their layout files.

    Let’s first change the add blog page’s layout file, view/frontend/layout/blogmanager_manage_add.xml

    Here we have added <head> node and in that we have added <css> node. src=”Webkul_BlogManager::css/style.css” this line represents the source of the css file. Here we need to mention the css file path relative to the view/frontend/web folder.

    Now similarly we need to change the edit blog page’s layout file, view/frontend/layout/blogmanager_manage_edit.xml

    Now if you check the pages you will find that the style is getting applied.

    Please make sure to compile and flush cache. You may need to hard-refresh, if you change in css because browser’s try to store css and js files locally.

    JavaScript aka JS

    Magento usage requirejs to manage dependencies and optimise loading time.

    We will change the delete process and use ajax to delete the blogs. I will just show you basic js codes here. Please search and study the concepts of js in magento on your own.

    Let’s first create the js file, view/frontend/web/js/bloglist.js

    We will use the same structure in almost every js file, so don’t get overwhelmed. In the first param of define we are mentioning our requirements. Here we have asked for jquery and mage/translate libraries, and the requirejs will load these libraries. The “mage/translate” is used for translation purpose in js just like __(“”) in php files that we have already seen.

    In the second param we have passed a function which have two arguments ($, $t). It’s corresponds to the libraries that we have requested. That means we can access jQuery with $ and the translation library with $t. Please do not get confused, I have not used the translation library here but we will use it later.

    Here we have used $(‘body’).trigger(“processStart”) which will start loader in magento and once the ajax request is completed we have stopped the loader with $(‘body’).trigger(“processStop”). And almost everything else inside the anonymous function should be familiar to you because it is just jquery.

    Here we have used define but we can also use require. The define is used when we want the js to be used in another js file. For that we have to do minor syntax change. Please search for difference between define and require, there are multiple blogs about them.

    In Magento 2, we create aliases for the js files. For that we use requirejs-config.js, this config file have many other responsibilities too. But for now we will just create the alias for our js file. The configuration file should be in view/frontend/requirejs-config.js

    The alias is bloglist for our js/bloglist.js file which is relative path from the view/frontend/web/ folder.

    Now let’s edit our list page to use this javascript, view/frontend/templates/list.phtml

    Here to call the js we need to use script tag. We do not need to mention the full path of the js file, only the alias name will suffice. Instead of * we can give element to bind the js to that element. Also we can pass json object to the js file by writing “bloglist”: {“msg”:”Hello”}. But let’s not make this complicated.

    I have also done some minor changes here like I have added classes and removed the confirm widget because we will implement it in the magento way in later part of this blog.

    We will also need to edit our delete action Controller/Manage/Delete.php

    This code is pretty self explanatory. Instead of redirecting we have returned json data to our ajax request. Here we are returning two variables, success flag and message. We have also removed the message manager’s message because those message gets displayed only when the page reloads.

    Now if you load the blog list page and click on delete button. You should see similar results as below,

    For some of you the static files i.e. css and js files might not get updated even after cache flush. That’s because magento stores the static files inside “pub/static” folder. To regenerate these static files we need to run the static content deployment command,

    And in some extreme cases we need to delete the contents of the pub/static folder before running this command. Just make sure that you do not delete the pub/static/.htaccess file.

    JS widgets

    Now let’s add confirmation widget so that our bloggers do not delete the blogs accidentally. Also we will add alert widget to let user know that the blog was deleted successfully. We will use the magento versions of these widgets. Magento provides many widgets but we mostly use alert, confirm and modal widgets.

    Let’s edit the js file view/frontend/web/js/bloglist.js

    Please notice the changes from the last version of this file. We have requested alert and confirm widgets in define. Please check out their syntax in the magento devdoc.

    Basically, the confirm function inside the action will get executed when the user clicks on OK button of the confirm widget. So we have written all the ajax code in that block. We have also used the alert widget in the success and error section of the ajax request to show the message from the server and an error message respectively. This alert is not same as the javascript’s alert message.

    We have also used the translation library with $t to make the static content translatable.

    Now if you try to delete you should get similar ui as below,

    The folder structure should look like,

    Next Blog -> Magento Development 12: Admin Menu and Controller

    Previous Blog -> Magento Development 10: Deleting

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again