0

I'm in this condition:

enter image description here

Magento 2.3.4 with Elasticsuite installed and I want to customize the search box so when #search get focus the page get darker adding a <div class"blury"></div>. I already make it work doing like this:

I added require-config.js on my theme:

var config = {
    deps: [
    'js/custom'
    ]
};

I added web/js/custom.js:

define([
    'jquery',
    'matchMedia'
], function($, mediaCheck){
    "use strict";

    mediaCheck({
        media: '(min-width: 768px)',
        // Switch to Desktop Version
        entry: function () {

            $('#search').focus(function() {
                $('body').append('<div class="blury"></div>');
                $('.blury').css({
                    "background-color": "black",
                    "position": "absolute",
                    "height": "100%",
                    "width": "100%",
                    "top": "0",
                    "left": "0",
                    "opacity": "0.7",
                    "z-index": "900",
                })
            })

            $('#search').focusout(function() {
                $('.blury').remove();
            })

        },
        // Switch to Mobile Version
        exit: function () {
            $('.blury').remove();
        }
    });
})

The problem

As you can see from the video, every time I click or press ESC key to remove the focus from the searchbox the first time the focus come back to the searchbox so I need to click outside a second time to remove the focus.

To solve this I added to vendor/magento/module-search/view/frontend/web/js/form-mini.js on the _create method $('#search').blur() at 97 line:

...
        _create: function () {
            this.responseList = {
                indexList: null,
                selected: null
            };
            this.autoComplete = $(this.options.destinationSelector);
            this.searchForm = $(this.options.formSelector);
            this.submitBtn = this.searchForm.find(this.options.submitBtn)[0];
            this.searchLabel = this.searchForm.find(this.options.searchLabel);
            this.isExpandable = this.options.isExpandable;

            _.bindAll(this, '_onKeyDown', '_onPropertyChange', '_onSubmit');

            this.submitBtn.disabled = true;

            this.element.attr('autocomplete', this.options.autocomplete);

            mediaCheck({
                media: '(max-width: 768px)',
                entry: function () {
                    this.isExpandable = true;
                }.bind(this),
                exit: function () {
                    this.isExpandable = true;
                }.bind(this)
            });

            this.searchLabel.on('click', function (e) {
                // allow input to lose its' focus when clicking on label
                if (this.isExpandable && this.isActive()) {
                    e.preventDefault();
                }
            }.bind(this));

            this.element.on('blur', $.proxy(function () {
                if (!this.searchLabel.hasClass('active')) {
                    return;
                }

                setTimeout($.proxy(function () {
                    if (this.autoComplete.is(':hidden')) {
                        this.setActiveState(false);
                    } else {
                        this.element.trigger('focus');
                    }
                    this.autoComplete.hide();
                    $('#search').blur()
                    this._updateAriaHasPopup(false);
                }, this), 250);
            }, this));

            if (this.element.get(0) === document.activeElement) {
                this.setActiveState(true);
            }

            this.element.on('focus', this.setActiveState.bind(this, true));
            this.element.on('keydown', this._onKeyDown);
            // Prevent spamming the server with requests by waiting till the user has stopped typing for period of time
            this.element.on('input propertychange', _.debounce(this._onPropertyChange, this.options.suggestionDelay));

            this.searchForm.on('submit', $.proxy(function (e) {
                this._onSubmit(e);
                this._updateAriaHasPopup(false);
            }, this));
        },
...

but this, as you know, is not ideal since I edited a Magento core file.

This method is also then extended by ElasticSuite with vendor/smile/elasticsuite/src/module-elasticsuite-core/view/frontend/web/js/form-mini.js.

My question

How can I add $('#search').blur() there without edit the Magento core file?

0

You need to create mixin to override core js file

var config = {
    config: {
        mixins: {
            'Magento_Search/form-mini': {
                'Vendor_Module/js/mixins/form-mini': true
            }

        }
    }
};

Create file at app/code/Vendor/Module/view/frontend/web/js/mixins/form-mini.js

define([
    'jquery',
    'underscore',
    'mage/template',
    'matchMedia',
    'jquery/ui',
    'mage/translate'
], function ($, _, mageTemplate, mediaCheck) {

    return function (widget) {
        $.widget('custom.quickSearch', widget, {
            _init: function () {
                alert("I'm here");
            }
        });
        return $.custom.quickSearch;
    };
});
| improve this answer | |
  • Thanks but it doesn't work. I got no error message in console but Elasticsuite search popup isn't shown anymore. What should the _init method supposed to do? And how can I "inject" my jQuery function inside Grandparent _create method? – KaMZaTa May 1 at 13:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.