Jump to content

search bar


nassim01

Recommended Posts

I every time you press enter the search bar takes you to a search page I need to prevent that from happening, I need the search bar just to propose products and when clicking on the product it opens the product it self, and when press enter not to take me anywhere.

Link to comment
Share on other sites

sorry but what do you mean by handle the keyup event? 

this is the file: 

$(document).ready(function () {
    var $searchWidget = $('#search_widget');
    var $searchBox    = $searchWidget.find('input[type=text]');
    var searchURL     = $searchWidget.attr('data-search-controller-url');
    var $clearButton  = $searchWidget.find('i.clear');

    $.widget('prestashop.psBlockSearchAutocomplete', $.ui.autocomplete, {
        _renderItem: function (ul, product) {
            var image = (product.cover) ? product.cover : prestashop.urls.no_picture_image;
            var $img = $('<img class="autocomplete-thumbnail" src="'+image.bySize.small_default.url+'">');
            return $("<li>")
                .append($("<a>")
                    .append($img)
                    .append($("<span>").html(product.name).addClass("product"))
                ).appendTo(ul)
            ;
        }
    });

    var isMobile = function() {
        return $(window).width() < 768;
    };
    var autocompletePosition = function() {
      return {
        my: 'right top',
        at: 'right bottom',
        of: isMobile() ? '.header-top' : '#search_widget',
      };
    };

    $searchBox.psBlockSearchAutocomplete({
        position: autocompletePosition(),
        source: function (query, response) {
            $.post(searchURL, {
                s: query.term,
                resultsPerPage: 10
            }, null, 'json')
            .then(function (resp) {
                response(resp.products);
            })
            .fail(response);
        },
        select: function (event, ui) {
            var url = ui.item.url;
            window.location.href = url;
        },
    }).psBlockSearchAutocomplete("widget").addClass('searchbar-autocomplete');

    $(window).resize(function() {
      $searchBox.psBlockSearchAutocomplete({
        position: autocompletePosition(),
      });
      $searchBox.keyup();
    });

    $clearButton.click(function() {
        $searchBox.val("");
        $clearButton.hide();
    });

    $searchBox.keyup(function() {
        $clearButton.toggle($searchBox.val() !== "" && isMobile());
    });
});

 

I try to change: var searchURL     = $searchWidget.attr('data-search-controller-url');        to:var searchURL     = $searchWidget.attr(''); but the result is the same nothing changes what should I change in here? 

thank you a lot for your help

Link to comment
Share on other sites

Hello 👋🏻!

Personally, I would strongly advise against recommending edits to module files, as they may change upon updating. A decidedly superior solution is to create your own file with custom JavaScript code that augments the desired functionalities. For instance, in a given situation with a classic theme in the /themes/classic/assets/js/ folder, create a file (in example: custom.js) containing the code:

document.addEventListener('DOMContentLoaded', searchWidgetDisableEnter);

function searchWidgetDisableEnter() {
  const searchWidget = document.getElementById('search_widget');
  if (!searchWidget) return;
  const searchBox = searchWidget.querySelector('input[type=text]');

  searchBox.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      event.preventDefault();
    }
  });
}

Subsequently, include information within the theme about new JavaScript file (so it knows to load it) in the /themes/classic/config/theme.yml under the line with assets:

  js:
    all:
      - id: custom-js
    path: assets/js/custom.js

I trust this answer has provided some clarity for your situation. If anything remains unclear or you need more help, just let me know.
Good luck! 🚀

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...