search bar

[nassim01]

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.

[Prestashop Addict]

Please can you indicate PS version and theme used

[nassim01]

thank you for the replay I'm using classic theme with creative elements and the PS version is 8.1

[Prestashop Addict]

Il y a 1 heure, nassim01 a dit :

I'm using classic theme with creative elements and the PS version is 8.1

So with classic theme you need to change the js code in modules/ps_searchbar/ps_searchbar.js and handle the keyup event.

[nassim01]

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

[Webski Gość]

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! 🚀

[nassim01]

On 6/15/2024 at 10:58 PM, Webski Gość said:

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! 🚀

hello, thank you for your replay sorry It took so long from my side but the code did not work the ps: " I'm using creative elements for my header don't know if this is why the code didn't work" if you can help me with another code or solution I'd be grateful. Thank you

[nassim01]

I can see that creative elements take the link form this script:

<form class="elementor-search" role="search"
            action="<?php echo $action = \Context::getContext()->link->getPageLink('search'); ?>" method="get">
        <?php if (strrpos($action, 'controller=search') !== false) { ?>
            <input type="hidden" name="controller" value="search">
        <?php } ?>

any idea how to prevent the link from opening when press enter?

 

[nassim01]

any body can help please??

[Andrei H]

Hello,

The code from @Webski Gość does seem to work as expected.

In your case, the problem is most likely the fact that you have different selectors for the search form. The HTML provided by you does seem to confirm this.

Can you try changing the above code to:

document.addEventListener('DOMContentLoaded', searchWidgetDisableEnter);

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

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

Let us know if it changes anything, please.

[nassim01]

On 8/2/2024 at 9:56 PM, Andrei H said:

Hello,

The code from @Webski Gość does seem to work as expected.

In your case, the problem is most likely the fact that you have different selectors for the search form. The HTML provided by you does seem to confirm this.

Can you try changing the above code to:

document.addEventListener('DOMContentLoaded', searchWidgetDisableEnter);

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

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

Let us know if it changes anything, please.

thank you Andrei H for you replay but still it doesn't work

[Andrei H]

Hello,

Can you confirm that the custom JavaScript code is loaded into the page, please?

You can try and add an alert in there and when you refresh the page, the alert should be displayed by the browser:

alert('test');

 

[nassim01]

14 hours ago, Andrei H said:

Hello,

Can you confirm that the custom JavaScript code is loaded into the page, please?

You can try and add an alert in there and when you refresh the page, the alert should be displayed by the browser:

alert('test');

 

hello;

thank you very much for your replay I tried to add the code like this:

document.addEventListener('DOMContentLoaded', searchWidgetDisableEnter);

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

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

but there is no alert displayed by the browser what do you think might be the problem?

sorry I'm new to this thank you for your patience with me

[nassim01]

I'm using a child theme is that the source of the problem that the code is not taking effect?

[Andrei H]

Hello,

It is my bad. I forgot to mention where to add that alert.

Please add it at the top of the file, in the first line. This is only for highlighting that the script is loaded into the page.

Also, now that you show the script, I see an issue in there:

const searchWidget = document.querySelector('elementor-search');

This needs to be

const searchWidget = document.querySelector('.elementor-search');

'elementor-search' will try to find the 'elementor-search' tag, whereas '.elementor-search' will try to find the element that has the 'elementor-search' class.

Once you make the changes, please also refresh the browser cache (In Chrome you achieve that by pressing Ctrl + Shift + R or Shift + F5)

[nassim01]

On 8/8/2024 at 12:52 PM, Andrei H said:

Hello,

It is my bad. I forgot to mention where to add that alert.

Please add it at the top of the file, in the first line. This is only for highlighting that the script is loaded into the page.

Also, now that you show the script, I see an issue in there:

const searchWidget = document.querySelector('elementor-search');

This needs to be

const searchWidget = document.querySelector('.elementor-search');

'elementor-search' will try to find the 'elementor-search' tag, whereas '.elementor-search' will try to find the element that has the 'elementor-search' class.

Once you make the changes, please also refresh the browser cache (In Chrome you achieve that by pressing Ctrl + Shift + R or Shift + F5)

hello again Andrei H  I tried the test as you said it worked but the enter is still applied I don't know what to do any other ideas?

thank you so much for your help.

[nassim01]

may I ask a question out of the scoop of this topic, I'm working on a website which has 3 languages and the client wants to put 2 languages on the topic but they want each language to be on a separate line is this doable? and if you can help I'd be grateful 

[nassim01]

any help please?