Sources:
- How to increase notification message display time?
- Override Magento UI js file, ainsi que le dernier commentaire:
Two comments, just in case: Magento_Ui should be only once. And you shouldn’t put .js on the file. So it should be:
'Magento_Ui/js/view/messages':'[Namespace]_[Module]/js/view/messages'– pinicio Jun
Core de Magento 2
Remarque: cette méthode de surcharge est valable pour l’ensemble des UI Components de Magento 2.
Créer le fichier app/code/Pdv/Ui/view/frontend/requirejs-config.js
|
1 2 3 4 5 6 7 |
var config = { map: { '*': { 'Magento_Ui/js/view/messages':'YourVendor_Ui/js/view/messages' } } }; |
Surcharger vendor/magento/module-ui/view/frontend/web/js/view/messages.js dans app/code/YourVendor/Ui/view/frontend/web/js/view/messages.js. La valeur qui nous intéresse est le 5000 dans la fonction onHiddenChange.
|
1 2 3 4 5 6 7 8 9 |
onHiddenChange: function (isHidden) { var self = this; // Hide message block if needed if (isHidden) { setTimeout(function () { $(self.selector).hide('blind', {}, 500) }, 5000); } } |
Surcharger vendor/magento/module-ui/view/frontend/web/js/model/messages.js dans app/code/YourVendor/Ui/view/frontend/web/js/view/messages.js et vendor/magento/module-ui/view/frontend/web/js/model/messageList.js dans . Aucune modification de code n’est à apporter à ces deux fichiers.
En bash, exécuter les commandes: $ rm -rf pub/static/*; rm -rf var/view_preprocessed/* && grunt less.
Dans le cas de notifications surchargées (comme dans le thème payant Supro par exemple)
Surcharger app/design/frontend/Mgs/supro/Magento_Theme/web/js/view/messages.js dans app/design/frontend/YourVendor/yourTheme/Magento_Theme/web/js/view/messages.js.
La méthode RemoveMessage prévoit initialement une animation bounceOutRight qui provoque un bug d’affichage de la notification (elle disparaît une première fois, puis réapparaît furtivement avant de disparaître pour de bon. J’ai donc remplacé la classe bounceOutRight par une classe nada qui ne se réfère à rien dans le code LESS/CSS.
|
1 2 3 4 5 6 7 8 9 |
RemoveMessage: function () { var el = $(this.selector); // el.toggleClass('bounceInRight bounceOutRight'); el.addClass('bounceInRight'); setTimeout(function () { el.hide() }, 2000); el.removeClass('bounceInRight'); }, |
La valeur qui nous intéresse est le 5000 dans la fonction onHiddenChange.
|
1 2 3 4 5 6 7 8 9 |
onHiddenChange: function (isHidden) { var self = this; if (isHidden) { setTimeout(function () { self.RemoveMessage(); }, 5000); } this.isHidden(false); } |