Nachrichten nach einem bestimmten Intervall ausblenden

9

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.

Anshu Mishra
quelle

Antworten:

12

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.

Sohel Rana
quelle
Ich habe es versucht und es wird überhaupt keine Nachricht angezeigt.
Anshu Mishra
Pub / static / * löschen, Cache löschen. Führen Sie setup: static-content: deploy aus.
Sohel Rana
Ich habe versucht, nachdem ich die pub / static bereinigt und den Befehl setup ausgeführt habe: static-content: deploy, aber immer noch keine Auswirkung. Ich habe eine Warnung in der Initialisierungsfunktion hinzugefügt, aber sie ist überhaupt keine Warnung. Ich denke, js Datei ist nicht richtig enthalten. Es wäre großartig, wenn Sie teilen könnten, wenn noch etwas anderes erforderlich ist.
Anshu Mishra
In meinem Fall verwende ich SR_StackExchange als Modulnamen. Und es funktioniert gut mit dem Luma-Thema.
Sohel Rana
1
Ich habe auf einem anderen Computer nachgesehen und der Code scheint zu funktionieren. Danke für deine Antwort. Eine weitere Sache, die ich wissen möchte, ist, was der Zweck der Parameter 'blind' und {} in der Funktion hide ist.
Anshu Mishra
0

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);                
    //            }
                }
            });
        };

    });
Pradeep Kumar
quelle
funktioniert das für dich mit einem mixin, es funktioniert nicht für mich ich versuche ein
modul dafür
Sie verwenden eine andere Datei Magento_Ui / js / view / messages Ich möchte Magento_Theme / js / view / messages Ist das wichtig?
Jibin George
0

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/

Goran Horvat
quelle
Geht das für dich?
Jibin George
funktioniert nicht
jibin george