Step1 : Override message.js in current theme file on the following path.
– /app/design/frontend/Magemonkey/child/Magento_Theme/web/js/view/
– Add the below code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
/** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ /** * @api */ define([ 'jquery', 'uiComponent', 'Magento_Customer/js/customer-data', 'underscore', 'escaper', 'jquery/jquery-storageapi' ], function ($, Component, customerData, _, escaper) { 'use strict'; return Component.extend({ defaults: { cookieMessages: [], messages: [], allowedTags: ['div', 'span', 'b', 'strong', 'i', 'em', 'u', 'a'] }, /** * Extends Component object by storage observable messages. */ initialize: function () { this._super(); this.cookieMessages = _.unique($.cookieStorage.get('mage-messages'), 'text'); this.messages = customerData.get('messages').extend({ disposableCustomerData: 'messages' }); // Force to clean obsolete messages if (!_.isEmpty(this.messages().messages)) { customerData.set('messages', {}); } $.mage.cookies.set('mage-messages', '', { samesite: 'strict', domain: '' }); }, RemoveMessage: function () { setTimeout(function () { $('.page.messages').hide() }, 1000); }, /** * Prepare the given message to be rendered as HTML * * @param {String} message * @return {String} */ prepareMessageForHtml: function (message) { return escaper.escapeHtml(message, this.allowedTags); } }); }); |
Step2 : Override messages.phtml in current theme file on the following path.
– /app/design/frontend/Magemonkey/child/Magento_Theme/templates/
– Add the below code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<?php /** * Copyright © Magento, Inc. All rights reserved. * See COPYING.txt for license details. */ ?> <div data-bind="scope: 'messages'"> <!-- ko if: cookieMessages && cookieMessages.length > 0 --> <div aria-atomic="true" role="alert" data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages"> <div data-bind="attr: { class: 'message-' + message.type + ' ' + message.type + ' message', 'data-ui-id': 'message-' + message.type }"> <div data-bind="html: $parent.prepareMessageForHtml(message.text)"></div> <div class="close" data-bind="click: $parent.RemoveMessage"></div> </div> </div> <!-- /ko --> <!-- ko if: messages().messages && messages().messages.length > 0 --> <div aria-atomic="true" role="alert" class="messages" data-bind="foreach: { data: messages().messages, as: 'message' }"> <div data-bind="attr: { class: 'message-' + message.type + ' ' + message.type + ' message', 'data-ui-id': 'message-' + message.type }"> <div data-bind="html: $parent.prepareMessageForHtml(message.text)"></div> <div class="close" data-bind="click: $parent.RemoveMessage"></div> </div> </div> <!-- /ko --> </div> <script type="text/x-magento-init"> { "*": { "Magento_Ui/js/core/app": { "components": { "messages": { "component": "Magento_Theme/js/view/messages" } } } } } </script> |
that’s it
Here is message design and output :
If you are facing error as per the below, Then...
I've to add custom CSS for particular store on checkout...
If we use the quote collectTotal() method in our custom...
If you want to set a different look for a...
I have recently faced an issue during CSV import as...
