Menu Close
    Hire us Request quote Reading list Switch to dark mode
    lockdownWebkulUp

    How to replace magento2 default search suggestion logic

    In my previous article, I have explained how we can replace magento2 default MySQL search engine with any other engines like elastic, solr etc. Now we will see how we can change magento2 search suggestion logic. By default magento2 shows search suggestion by saving each searched term and then on as user types it starts showing those saved search terms according to their popularity, popularity means how many times the term has been searched. So if you have successfully replaced search engine you will definitely want to use some advanced logic in search suggestion also.So let’s see how we can replace it.

    first, you will like to replace the phtml template that is used to show autocomplete results, create a default.xml file in your modules directory structure app/code/CompanyName/ModuleName/view/frontend/layout/default.xml and add below code:


    Now you need to create form.mini.phtml in your module path app/code/CompanyName/ModuleName/view/frontend/templates/form.mini.phtml

    the original form.mini.phtml looks like this:


    in the above code you can see that it uses a javascript component “quickSearch” to initialize the search autocomplete by providing it some data “formSelector”, “url”, “destination” selector, the url key is used to fetch the autocomplete search results, magento2 uses “search/ajax/suggest”, you can replace it by your own controller path and apply your own logic.

    Now after replacing the template you must  want to replace, the “quickSearch” component to show more descriptive results or whatever changes you want to do, for this you need to create requirejs-config.js file in your module at this path “app/code/CompanyName/ModuleName/view/frontend/requirejs-config.js”:

     

    . . .
    Subscribe Articles

    Just enter your email below to subscribe and receive weekly updates about the most interesting similar articles.

    You need to accept conditions to receive letters.
    You've Subscribed!

    Share article via

    . . .


     

    magento uses require js and above is require js configuration files using this file we map js components to a key, and that key is used on the frontend to call the component although you can use the file path as well but using file path directly will restrict the component replace from other modules.

    Now doing the above step you need to create the js file in your module path “app/code/CompanyName/ModeulName/view/frontend/web/form-mini.js” the original file looks like this:


    Here you can modify autocomplete template, change events or change the whole logic by your own.

    Hope this will help you in your projects, please ask questions if you have any doubt by commenting below.

    Thanks 🙂 .

    . . .

    Comments (2)

    Add Your Comment

  • Rajesh
    Hi sir this code is not working for me
    • ashutosh srivastava
      Hi, above is the correct way of replacing search suggestion, it can only not work if there is any theme installed or cache is not cleaned properly after making changes. to debug, check if developer mode is enabled if not enable it and also make sure no other module has already replaced the template to confirm that please enable template path hints from admin, hope this will help you.
  • Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again
    Close