Nachrichten nach einem bestimmten Intervall ausblenden

Wie Sie eine hide notification messagesErfolgsmeldung nach dem Hinzufügen eines Produkts zum Warenkorb oder Fehlermeldungen oder Benachrichtigungen nach einigen Sekunden, nachdem sie im Frontend mit angezeigt wurden, mögen knockout js.

Beispiel: Wenn ich ein Produkt in den Warenkorb lege, wird eine Erfolgsmeldung mit dem Titel "Produkt wurde Ihrem Warenkorb hinzugefügt" angezeigt. Ich möchte diese Erfolgsmeldung nach 5 Sekunden nach dem Erscheinen auf dem Bildschirm ausblenden.

Versuchen Sie es auf folgende Weise:

Vendor / Module / view / frontend / requirejs-config.js

var config = {
    "Karte": {
        "*": {
            "Magento_Theme / js / view / messages": "Vendor_Module / js / view / messages",
        }}
    }}
}}

Anbieter / Modul / view / frontend / web / js / view / messages.js

definieren([
    'jquery',
    'uiComponent',
    'unterstreichen',
    'Magento_Customer / js / customer-data',
    'jquery / jquery-storageapi'
], function ($, Component, _, customerData) {
    'use strict';

    return Component.extend ({
        Standardeinstellungen: {
            cookieMessages: [],
            Mitteilungen: []
        },

        / ** @inheritdoc * /
        initialize: function () {
            this._super ();

            this.cookieMessages = $ .cookieStorage.get ('Magier-Nachrichten');
            this.messages = customerData.get ('messages'). verlängern ({
                disposableCustomerData: 'Nachrichten'
            });

            if (! _. isEmpty (this.messages (). messages)) {
                customerData.set ('messages', {});
            }}

            $ .cookieStorage.set ('Magier-Nachrichten', '');
            setTimeout (function () {
                $ (". messages"). hide ('blind', {}, 500)
            }, 5000);
        }}
    });
});

Cache leeren.

wir können es von js mixin machen

in Ihrer benutzerdefinierten Modulansicht / frontend / requirejs-config.js

var config = {
config: {
        mixins: {
            'Magento_Ui/js/view/messages': {
                'NameSpace_Module/js/messages-mixin': true
            }
        }
    }
};

messages-mixin.js

 define([
        'jquery'
    ], function($) {
        'use strict';
        return function(targetModule) {
            return targetModule.extend({
                onHiddenChange: function (isHidden) {
                var self = this;

                // Hide message block if needed
    //            if (isHidden) {
    //                setTimeout(function () { 
    //                    $(self.selector).hide('blind', {}, 500);
    //                }, 30000);                
    //            }
                }
            });
        };

    });

Machen Sie ein Mixin, wie Kumar sagte, aber erweitern Sie die Magento_Ui-Nachrichten nicht, da diese zum Auschecken usw. dienen, sondern erweitern Sie Magento_Theme messages.js. Der vollständige Code lautet wie folgt.

requirejs-config.js

var config = {
    'config': {
        'mixins': {
            'Magento_Theme/js/view/messages': {
                'Bemeir_General/js/mixin/messages-mixin': true
            }
        }
    }
};

messages-mixin.js

define([
    'jquery',
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'underscore',
    'jquery/jquery-storageapi'
], function ($, Component, customerData, _) {
    'use strict';
    return function (targetModule) {

        targetModule.defaults.isHidden = false;
        targetModule.defaults.listens.isHidden = 'onHiddenChange';
        targetModule.defaults.selector = '.page.messages .messages';

        return targetModule.extend({
            initialize: function () {
                let original = this._super();
                console.log(targetModule.defaults);
                return original;
            },
            initObservable: function () {
                this._super()
                    .observe('isHidden');

                return this;
            },

            isVisible: function () {
                return this.isHidden(!_.isEmpty(this.messages().messages) || !_.isEmpty(this.cookieMessages));
            },

            removeAll: function () {
                $(this.selector).find('.message').removeClass('show');
            },

            onHiddenChange: function (isHidden) {
                let self = this;
                if (isHidden) {
                    setTimeout(function () {
                        $(self.selector).find('.message').removeClass('show');
                        self.isHidden('false');
                    }, 5000);
                }
            }
        });
    };

});

Stellen Sie sicher, dass Sie das Zeitlimit um 5 Sekunden zu niedrig vergrößern, damit der Kunde es tatsächlich bemerkt, und klicken Sie möglicherweise auf die Nachricht usw.

Hoffe das wird jemandem helfen. Auch Interessierte lesen dies bitte. https://alanstorm.com/magento-2-understanding-the-uielement-observe/