custom/plugins/OfCustomSearch/src/Resources/views/storefront/layout/header/search.html.twig line 1

Open in your IDE?
  1. {% sw_extends '@Storefront/storefront/layout/header/search.html.twig' %}
  3. {% set searchWidgetOptions = {
  4.     searchWidgetMinChars: page.header.activeLanguage.productSearchConfig.minSearchLength ?: 3
  5. } %}
  7. {% block layout_header_search %}
  9.     <div class="header-search">
  12.         {% if page.header.activeLanguage.translationCode.code == 'en-GB' %}
  13.             {% set SearchPlaceholder = "Search for products" %}
  16.         {% elseif page.header.activeLanguage.translationCode.code == 'nl-NL'  %}
  17.             {% set SearchPlaceholder = "Zoek naar producten" %}
  19.         {% elseif page.header.activeLanguage.translationCode.code == 'es-ES'  %}
  20.             {% set SearchPlaceholder = "Buscar productos" %}
  22.         {% elseif page.header.activeLanguage.translationCode.code == 'fr-FR'  %}
  23.             {% set SearchPlaceholder = "Rechercher des produits" %}
  25.         {% elseif page.header.activeLanguage.translationCode.code == 'it-IT'  %}
  26.             {% set SearchPlaceholder = "Cerca prodotti" %}
  29.         {% else %}
  30.             {% set SearchPlaceholder = "Suche nach Produkten" %}
  32.         {% endif %}
  34.         <style>
  35.             #showSearchResults {
  36.                 position: absolute;
  37.                 left: 0;
  38.                 top: 50px;
  39.                 background: #fff;
  40.                 z-index: 50;
  41.                 padding: 20px;
  42.                 border: solid 1px #999999;
  43.                 width: max-content;
  44.                 max-width: 400px;
  45.             }
  46.             #seachterminput {font-size: 14px; padding: 5px 10px;}
  47.             .serach-produc-image {width: 45px; height: 45px; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; float: left;}
  48.             .search-line {border-bottom: solid 1px #000; padding: 10px 0px;}
  49.             #showSearchResults a {margin: 0; padding: 0;}
  50.         </style>
  52.         <div id="SearchWrapper">
  53.             <input type="text" name="seachterminput" id="seachterminput" placeholder="{{ SearchPlaceholder }}"  onkeyup="showSearchResults(this)">
  54.             <div id="showSearchResults" style="display: none;"></div>
  55.         </div>
  57.         <script>
  60.             function showSearchResults(SearchFor) {
  62.                 var SearchTerm = SearchFor.value;
  64.                 if(SearchTerm.length < 3) {
  66.                     document.getElementById("showSearchResults").innerHTML = "";
  67.                     document.getElementById("showSearchResults").style.display = "none";
  69.                 } else {
  71.                     document.getElementById("showSearchResults").style.display = "block";
  72.                     const xmlhttp = new XMLHttpRequest();
  74.                     xmlhttp.onload = function() {
  76.                         if (this.responseText === "") {
  78.                             document.getElementById("showSearchResults").innerHTML = "Keine Produkte gefunden";
  80.                         } else {
  81.                             document.getElementById("showSearchResults").innerHTML = this.responseText;
  83.                         }
  85.                     }
  87.                     xmlhttp.open("GET", "{{ seoUrl('of_custom_search_article_search') }}?searchterm=" + SearchTerm + "&lang=" + "{{ page.header.activeLanguage.translationCode.code }}" + "&shopurl=" + "{{  absolute_url(asset('')) }}" + "&imageurl" + "{{ product.cover.media.url }}");
  88.                     xmlhttp.send();
  90.                 }
  92.             }
  95.         </script>
  98.     </div>
  100. {% endblock %}