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.
CSS
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,
--------------------------
