1

I customized message.js for smoothly messages hiding - now messages will be smoothly hidden afters 5 seconds. Here is the code.

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

return Component.extend({
    defaults: {
        cookieMessages: [],
        messages: [],
        selector: '.page.messages .message',
        listens: {
            isHidden: 'onHiddenChange'
        }
    },
    /** @inheritdoc */
    initialize: function () {
        this._super();

        this.cookieMessages = $.cookieStorage.get('mage-messages');
        this.messages = customerData.get('messages').extend({
            disposableCustomerData: 'messages'
        });

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

        $.cookieStorage.set('mage-messages', '');
    },

    initObservable: function () {
        this._super()
            .observe('isHidden');

        return this;
    },

    RemoveMessage: function () {

        var el = $(this.selector);
        if (el.hasClass('fadeIn')) {
            el.toggleClass('fadeIn fadeOut');
        }
        setTimeout(function () {
            el.hide()
        }, 2000);
    },

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

    onHiddenChange: function (isHidden) {
        var self = this;

        // Hide message block if needed
        console.log(isHidden);
        if (isHidden) {
            setTimeout(function () {
                self.RemoveMessage();
            }, 5000);
        }
        // reseting variable
        this.isHidden(false);
    },
});


});

Now i want to add functionality to hide messages on close button click. I have seen this solution, all work fine, no problem. But i want to use my custom function RemoveMessage from messages.js, for smoothness. How can i it?

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.