Updated code for view\/frontend\/templates\/add.phtml<\/em> file<\/p>\n\n\n\n Here as you can see we have added everything in html format and added classes to every element. And also we have made the static contents translatable.<\/p>\n\n\n\n Similarly, we will need to change the edit page, view\/frontend\/templates\/edit.phtml<\/em><\/p>\n\n\n\n Updated code for view\/frontend\/templates\/edit.phtml<\/em> file<\/p>\n\n\n\n Now we have to create the css file. All the css and js files must be created under view\/{areacode}\/web folder. <\/p>\n\n\n\n And it’s a convention to create separate folders for js and css files under the web folder. Also, it’s recommended to create only one css file for a module.<\/p>\n\n\n\n So we will create the css file as view\/frontend\/web\/css\/style.css<\/em><\/p>\n\n\n\n Code for view\/frontend\/web\/css\/style.css<\/em> file<\/p>\n\n\n\n To use this CSS file on the edit and add blog pages we need to include this file in its layout file so Let’s edit their layout files.<\/p>\n\n\n\n Let’s first change the add blog page’s layout file, view\/frontend\/layout\/blogmanager_manage_add.xml<\/em><\/p>\n\n\n\n Updated code for view\/frontend\/layout\/blogmanager_manage_add.xml<\/em> file<\/p>\n\n\n\n Here we have added <head> node and in that, we have added <css> node. The line src=”Webkul_BlogManager::css\/style.css”<\/strong> represents the source of the css file. <\/p>\n\n\n\n Here we need to mention the css file path relative to the view\/frontend\/web<\/em> folder.<\/p>\n\n\n\n Now similarly we need to change the edit blog page’s layout file, view\/frontend\/layout\/blogmanager_manage_edit.xml<\/em><\/p>\n\n\n\n Updated code for view\/frontend\/layout\/blogmanager_manage_edit.xml<\/em> file<\/p>\n\n\n\n Please make sure to compile and flush the cache. You may need to hard-refresh if you change in css because browsers try to store css and js files locally.<\/p>\n\n\n\n If still your css is not applied please run the following Magento commands.<\/p>\n\n\n\n Magento usage requirejs for managing dependencies and optimizing the loading time. <\/p>\n\n\n\n We will change the delete process and use ajax to delete the blogs. I will just show you basic js codes here. Please search<\/a> and study the concepts of js in Magento on your own. <\/p>\n\n\n\n Let’s first create the js file, view\/frontend\/web\/js\/bloglist.js<\/em><\/p>\n\n\n\n Code for view\/frontend\/web\/js\/bloglist.js<\/em> file<\/p>\n\n\n\n We will use the same structure in almost every js file. In the first param of define, <\/strong>we are mentioning our requirements.<\/p>\n\n\n\n Here we have asked for jquery<\/em> and mage\/translate<\/em> libraries and the requirejs will load these libraries.<\/p>\n\n\n\n The “mage\/translate<\/em>” is used for translation purposes in js just like __(“”) in php files that we have already seen.<\/p>\n\n\n\n In the second param, we have passed a function that has two arguments ($, $t). It corresponds to the libraries that we have requested. <\/p>\n\n\n\n That means we can access jQuery with $ and the translation library with $t.<\/p>\n\n\n\n Here we have used $(‘body’).trigger(“processStart”)<\/em> which will start the loader in Magento and once the ajax request is completed we have to stop the loader with $(‘body’).trigger(“processStop”)<\/em>. <\/p>\n\n\n\n And almost everything else inside the anonymous function should be familiar to you because it is just jquery.<\/p>\n\n\n\n Here we have used define<\/strong> but we can also use require<\/strong>. The define<\/em> is used when we want the js to be used in another js file. <\/p>\n\n\n\n For that, we have to do minor syntax changes. Please search for the difference between define and require, there are multiple blogs about them.<\/p>\n\n\n\n In Magento 2<\/a>, we create aliases for the js files. For that we use requirejs-config.js<\/strong>, this config file has many other responsibilities too. <\/p>\n\n\n\n But for now, we will just create the alias for our js file. The configuration file should be in view\/frontend\/requirejs-config.js<\/em><\/p>\n\n\n\n The alias is bloglist<\/strong> for our js\/bloglist.js<\/em> file which is the relative path from the view\/frontend\/web\/<\/em> folder.<\/p>\n\n\n\n Now let’s edit our list page to use this javascript, in view\/frontend\/templates\/list.phtml<\/em><\/p>\n\n\n\n Updated code for view\/frontend\/templates\/list.phtml<\/em> file<\/p>\n\n\n\n Here to call the js we need to use a script tag. We do not need to mention the full path of the js file, only the alias name is enough. <\/p>\n\n\n\n Instead of * we can give an element to bind the js to that element.<\/p>\n\n\n\n Also, we can pass JSON object to the js file by writing “bloglist”: {“msg”:”Hello”}<\/strong>. But let’s not make this complicated.<\/p>\n\n\n\n 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 the later part of this blog.<\/p>\n\n\n\n We will also need to edit our delete action Controller\/Manage\/Delete.php<\/em><\/p>\n\n\n\n Updated code for Controller\/Manage\/Delete.php<\/em> file<\/p>\n\n\n\n This code is pretty self-explanatory. Instead of redirecting we have returned JSON data<\/a> to our ajax request. Here we are returning two variables, success flag, and message. <\/p>\n\n\n\n We have also removed the message manager’s message because those message gets displayed only when the page reloads.<\/p>\n\n\n\n Now if you load the blog list page and click on the delete button. You should see similar results as below –<\/p>\n\n\n\n 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 the “pub\/static” folder. <\/p>\n\n\n\n To regenerate these static files we need to run the static content deployment command,<\/p>\n\n\n\n And in some extreme cases, we need to delete the contents of the pub\/static<\/em> folder before running this command. Just make sure that you do not delete the pub\/static<\/em>\/.htaccess<\/em> file.<\/p>\n\n\n\n Now let’s add a confirmation widget so that our bloggers do not delete the blogs accidentally. Also, we will add an alert widget to let users know that the blog was deleted successfully. <\/p>\n\n\n\n We will use the Magento versions of these widgets. Magento provides many widgets but we mostly use alert, confirm, and modal widgets.<\/p>\n\n\n\n Let’s edit the js file view\/frontend\/web\/js\/bloglist.js<\/em><\/p>\n\n\n\n Updated code for view\/frontend\/web\/js\/bloglist.js<\/em> file<\/p>\n\n\n\n Please notice the changes from the last version of this file. We have requested alert and confirm widgets in define<\/em>. Please check out their syntax in the Magento devdoc. <\/p>\n\n\n\n Basically, the confirm function inside the action will get executed when the user clicks on the OK button of the confirm widget. So we have written all the ajax code in that block. <\/p>\n\n\n\n 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. <\/p>\n\n\n\n This alert is not the same as the javascript’s alert message.<\/p>\n\n\n\n We have also used the translation library with $t<\/strong> to make the static content translatable.<\/p>\n\n\n\n Now if you try to delete you should get a similar UI as below,<\/p>\n\n\n\n The folder structure should look like this,<\/p>\n\n\n\n Next Blog -> Magento 2 Development 15: Admin Menu and Controller<\/a><\/p>\n\n\n\n Previous Blog -> H<\/a>ow To Add Delete Action Column In Magento 2<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class="blog-container">\n <form class="blog-form" method="post" action=<?= $escaper->escapeUrl($block->getUrl('blog\/manage\/save')); ?> data-mage-init='{"validation": {}}'>\n <div class="blog-form-field-container">\n <span class="blog-form-field-label"><?=__('Title')?>:<\/span>\n <input type="text" name="title" class="required-entry blog-form-field"\/>\n <\/div>\n <div class="blog-form-field-container">\n <span class="blog-form-field-label"><?=__('Content')?>:<\/span>\n <textarea name="content" class="required-entry validate-no-html-tags blog-form-field"><\/textarea>\n <\/div>\n <div class="blog-form-action-container">\n <button type="submit" class="blog-form-action"><?=__('Submit')?><\/button>\n <\/div>\n <\/form>\n<\/div><\/pre>\n\n\n\n<?php\n$blog = $block->getBlog();\n?>\n<div class="blog-container">\n <form class="blog-form" method="post" action=<?= $escaper->escapeUrl($block->getUrl('blog\/manage\/save')); ?> data-mage-init='{"validation": {}}'>\n <input type="hidden" name="id" value="<?= $escaper->escapeHtml($blog->getId())?>"\/>\n <div class="blog-form-field-container">\n <span class="blog-form-field-label"><?=__('Title')?>:<\/span>\n <input type="text" name="title" class="required-entry blog-form-field" value="<?= $escaper->escapeHtml($blog->getTitle()); ?>"\/>\n <\/div>\n <div class="blog-form-field-container">\n <span class="blog-form-field-label"><?=__('Content')?>:<\/span>\n <textarea name="content" class="required-entry validate-no-html-tags blog-form-field" rows="10"><?= $escaper->escapeHtml($blog->getContent()); ?><\/textarea>\n <\/div>\n <div class="blog-form-action-container">\n <button type="submit" class="blog-form-action"><?=__('Submit')?><\/button>\n <\/div>\n <\/form>\n<\/div><\/pre>\n\n\n\n.blog-form .blog-form-field-container {\n margin: 15px auto;\n}\n.blog-form .blog-form-action-container {\n text-align: center;\n}\n.blog-form .blog-form-action-container .blog-form-action {\n min-width: 150px;\n padding: 10px;\n font-size: 16px;\n background: #2b4c8a;\n color: white;\n}<\/pre>\n\n\n\n<?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n <update handle="customer_account"\/>\n <head>\n\t<css src="Webkul_BlogManager::css\/style.css"\/>\n <\/head>\n <body>\n <referenceContainer name="content">\n <block class="Magento\\Framework\\View\\Element\\Template" name="blogmanager.blog.add" template="Webkul_BlogManager::add.phtml" \/>\n <\/referenceContainer>\n <\/body>\n<\/page><\/pre>\n\n\n\n
<?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n <update handle="customer_account"\/>\n <head>\n\t\t<css src="Webkul_BlogManager::css\/style.css"\/>\n\t<\/head>\n <body>\n <referenceContainer name="content">\n <block class="Webkul\\BlogManager\\Block\\Blog" name="blogmanager.blog.edit" template="Webkul_BlogManager::edit.phtml" \/>\n <\/referenceContainer>\n <\/body>\n<\/page><\/pre>\n\n\n\n
Now if you check the pages you will find that the style is getting applied.<\/p>\n\n\n\n![\"2021-02-24_19-25\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/2021-02-24_19-25-1200x581.png\")
<\/figure>\n\n\n\nphp bin\/magento setup:static-content:deploy<\/pre>\n\n\n\n
JavaScript aka JS :<\/h2>\n\n\n\n
define([\n "jquery",\n 'mage\/translate'\n], function ($, $t) {\n $('.blog-list-table .blog-list-table-action.blog-list-table-action-delete a').on('click', function(e){\n var self=this;\n e.preventDefault();\n var url = $(self).attr('href');\n $.ajax({\n type: "GET",\n dataType: "json",\n url: url,\n data: {},\n beforeSend: function() {\n $('body').trigger("processStart");\n },\n success: function (response) {\n $('body').trigger("processStop");\n $(self).closest('.blog-list-table-row').remove();\n },\n error: function (response) {\n $('body').trigger("processStop");\n }\n })\n })\n});<\/pre>\n\n\n\nCode for view\/frontend\/requirejs-config.js<\/em> file<\/h4>\n\n\n\n
var config = {\n map: {\n '*': {\n bloglist: 'Webkul_BlogManager\/js\/bloglist',\n }\n }\n};<\/pre>\n\n\n\n<div class="blog-list-table-container">\n <table class="blog-list-table">\n <tr class="blog-list-table-head">\n <th class="blog-list-table-id">\n <?= __("Id")?>\n <\/th>\n <th class="blog-list-table-title">\n <?= __("Title")?>\n <\/th>\n <th class="blog-list-table-content">\n <?= __("Content")?>\n <\/th>\n <th class="blog-list-table-action-edit">\n <?= __("Edit")?>\n <\/th>\n <th class="blog-list-table-action-delete">\n <?= __("Delete")?>\n <\/th>\n <\/tr>\n <?php\n $blogs = $block->getBlogs();\n\n foreach ($blogs as $blog) {?>\n <tr class="blog-list-table-row">\n <td class="blog-list-table-id">\n <?= $escaper->escapeHtml($blog->getId())?>\n <\/td>\n <td class="blog-list-table-title">\n <?= $escaper->escapeHtml($blog->getTitle())?>\n <\/td>\n <td class="blog-list-table-content">\n <?= substr($escaper->escapeHtml($blog->getContent()), 0, 20).'...'?>\n <\/td>\n <td class="blog-list-table-action blog-list-table-action-edit">\n <a href="<?= $escaper->escapeUrl($block->getUrl('blog\/manage\/edit', ['id'=>$escaper->escapeHtml($blog->getId())]))?>">\n <?= __('Edit') ?>\n <\/a>\n <\/td>\n <td class="blog-list-table-action blog-list-table-action-delete">\n <a href="<?= $escaper->escapeUrl($block->getUrl('blog\/manage\/delete', ['id'=>$escaper->escapeHtml($blog->getId())]))?>">\n <?= __('Delete') ?>\n <\/a>\n <\/td>\n <\/tr>\n <?php } ?>\n <\/table>\n<\/div>\n\n<script type="text\/x-magento-init">\n {\n "*": {\n "bloglist": ""\n }\n }\n<\/script><\/pre>\n\n\n\n<?php\nnamespace Webkul\\BlogManager\\Controller\\Manage;\n\nuse Magento\\Customer\\Controller\\AbstractAccount;\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Customer\\Model\\Session;\n\nclass Delete extends AbstractAccount\n{\n \/**\n * @var \\Webkul\\BlogManager\\Model\\BlogFactory\n *\/\n protected $blogFactory;\n\n \/**\n * @var Magento\\Customer\\Model\\Session\n *\/\n protected $customerSession;\n\n \/**\n * @var \\Magento\\Framework\\Serialize\\Serializer\\Json\n *\/\n protected $jsonData;\n\n \/**\n * Dependency Initilization\n *\n * @param Context $context\n * @param \\Webkul\\BlogManager\\Model\\BlogFactory $blogFactory\n * @param Session $customerSession\n * @param \\Magento\\Framework\\Serialize\\Serializer\\Json $jsonData\n *\/\n public function __construct(\n Context $context,\n \\Webkul\\BlogManager\\Model\\BlogFactory $blogFactory,\n Session $customerSession,\n \\Magento\\Framework\\Serialize\\Serializer\\Json $jsonData\n ) {\n $this->blogFactory = $blogFactory;\n $this->customerSession = $customerSession;\n $this->jsonData = $jsonData;\n parent::__construct($context);\n }\n\n \/**\n * Provides content\n *\n * @return Magento\\Framework\\Controller\\Result\\Redirect\n *\/\n public function execute()\n {\n $blogId = $this->getRequest()->getParam('id');\n $customerId = $this->customerSession->getCustomerId();\n $isAuthorised = $this->blogFactory->create()\n ->getCollection()\n ->addFieldToFilter('user_id', $customerId)\n ->addFieldToFilter('entity_id', $blogId)\n ->getSize();\n if (!$isAuthorised) {\n $msg=__('You are not authorised to delete this blog.');\n $success=0;\n } else {\n $model = $this->blogFactory->create()->load($blogId);\n $model->delete();\n $msg=__('You have successfully deleted the blog.');\n $success=1;\n } \n $this->getResponse()->setHeader('Content-type', 'application\/javascript');\n $this->getResponse()->setBody(\n $this->jsonData->serialize(\n [\n 'success' => $success,\n 'message' => $msg\n ]\n ));\n }\n}<\/pre>\n\n\n\n![\"ezgif.com-gif-maker\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/ezgif.com-gif-maker.gif\")
<\/figure>\n\n\n\nphp bin\/magento setup:static-content:deploy -f<\/pre>\n\n\n\n
JS widgets :<\/h2>\n\n\n\n
define([\n "jquery",\n 'Magento_Ui\/js\/modal\/confirm',\n 'Magento_Ui\/js\/modal\/alert',\n 'mage\/translate'\n], function ($, confirmation, alert, $t) {\n $('.blog-list-table .blog-list-table-action.blog-list-table-action-delete a').on('click', function(e){\n var self=this;\n e.preventDefault();\n confirmation({\n title: $t('Delete?'),\n content: $t('Are you sure you want to delete this blog?'),\n actions: {\n confirm: function(){\n\n \/\/If confirmed\n var url = $(self).attr('href');\n $.ajax({\n type: "GET",\n dataType: "json",\n url: url,\n data: {},\n beforeSend: function() {\n $('body').trigger("processStart");\n },\n success: function (response) {\n $('body').trigger("processStop");\n $(self).closest('.blog-list-table-row').remove();\n alert({\n content: response.message\n });\n },\n error: function (response) {\n $('body').trigger("processStop");\n alert({\n content: $t('Something went wrong.')\n });\n }\n })\n \n }\n }\n });\n })\n});<\/pre>\n\n\n\n![\"ezgif.com-gif-maker-1\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/02\/ezgif.com-gif-maker-1.gif\")
<\/figure>\n\n\n\n![\"Selection_115\"](\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/07\/Selection_115.png\")