custom/plugins/NextagTheme/src/Resources/views/storefront/page/content/vue/search.html.twig line 1

Open in your IDE?
  1. {# Translations #}
  2. <form action="{{dosuggestPrefix}}{{ "general.searchRoute"|trans }}"
  3.     method="get"
  4.     data-search-form="true"    
  5.     class="header-search-form js-search-form">
  6.     <div class="input-group">
  7.         <input type="search"
  8.             name="search"
  9.             class="form-control form-control-grey header-search-input"
  10.             id="site-search-input"
  11.             placeholder="{{ "header.searchPlaceholder"|trans|striptags }}"
  12.             aria-label="{{ "header.searchPlaceholder"|trans|striptags }}"
  13.             maxlength="30"            
  14.             v-model="searchTerm"
  15.             @input="search"
  16.             {# onfocus="this.placeholder = ''"
  17.             onblur="this.placeholder = '{{ "header.searchPlaceholder"|trans|striptags }}'"  #}
  18.             >
  19.           
  20.         <div class="input-group-append">
  21.             
  22.             <button type="button"
  23.                     v-if="showClearBtn"
  24.                     class="btn header-search-clear-btn"
  25.                     id="reset-site-search-input" @click="resetSearchTerm($event)"
  26.                     aria-label="{{ "header.searchButtonClear"|trans|striptags }}"
  27.                     title="{{ "header.searchButtonClear"|trans|striptags }}"
  28.                     :disabled="searching">  
  29.                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.985 511.985" xml:space="preserve">
  30.                     <path d="M15.066 511.981c-3.855 0-7.71-1.476-10.662-4.397-5.873-5.873-5.873-15.42 0-21.293L486.287 4.408c5.873-5.873 15.42-5.873 21.293 0s5.873 15.42 0 21.293L25.698 507.584c-2.922 2.921-6.777 4.397-10.632 4.397z"/>
  31.                     <path d="M496.949 511.981c-3.855 0-7.71-1.476-10.662-4.397L4.405 25.702c-5.873-5.873-5.873-15.42 0-21.293s15.42-5.873 21.293 0L507.58 486.291c5.873 5.873 5.873 15.42 0 21.293-2.921 2.921-6.776 4.397-10.631 4.397z"/>
  32.                 </svg>
  33.             </button>
  35.             <button type="submit"
  36.                     class="btn header-search-btn"
  37.                     aria-label="{{ "header.searchButton"|trans|striptags }}" :disabled="searching">  
  39.                 <div v-if="searching" class="loader" role="status">
  40.                     <span class="sr-only">Loading...</span>
  41.                 </div>
  43.                 <span class="header-search-icon">
  44.                     <svg class="header-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512" xml:space="preserve">
  45.                         <path class="svg-fill svg-stroke" stroke-width="10.667" stroke="#000" d="M330.264 316.655c24.946-31.214 40.031-71.26 40.031-114.828 0-5.455-.236-10.855-.7-16.19l.048.693c-3.945-48.496-26.287-91.124-59.95-121.415l-.166-.147c-30.04-27.053-70.005-43.602-113.835-43.602-51.992 0-98.544 23.284-129.8 59.993l-.2.24C38.117 113.507 21.33 155.577 21.33 201.567c0 51.863 21.349 98.74 55.737 132.322l.037.036c30.648 29.82 72.551 48.209 118.748 48.209 49.617 0 94.279-21.212 125.413-55.062l.11-.122 159.872 163.882 9.421-9.748zm-133.337 52.158c-33.099-.045-63.764-10.426-88.951-28.09l.498.331c-26.115-18.325-46.322-43.45-58.245-72.822l-.393-1.096c-7.669-18.666-12.122-40.334-12.122-63.042 0-11.362 1.114-22.463 3.24-33.2l-.178 1.081c6.435-33.063 21.867-61.789 43.623-84.385l-.05.053c21.417-22.252 49.233-38.203 80.484-44.892l1.035-.185c9.341-2.011 20.073-3.162 31.074-3.162 22.017 0 42.957 4.612 61.907 12.922l-.991-.388c29.784 13.076 54.117 33.941 71.07 60.041l.38.623c16.826 25.831 26.833 57.441 26.833 91.389 0 45.231-17.764 86.313-46.696 116.649l.063-.067c-28.441 29.644-68.341 48.106-112.553 48.241h-.025z"/>
  46.                     </svg>
  47.                 </span>
  48.             </button>
  49.         </div>
  50.     </div>
  51.     <div v-if="found" class="search-suggest js-search-result">            
  52.         <div class="search-suggest-container">
  53.             <template
  54.                 v-if="foundSuggestions && foundSuggestions.length > 0">
  55.                 <div class="search-suggestion-block search-suggestion-block--similar">
  56.                     <div class="h3 mt-0 mb-2">Meinten Sie?</div>
  57.                     <ul class="list-unstyled search-suggest-product__similar">
  58.                         <li v-for="foundSuggestion in foundSuggestions"
  59.                             class="search-suggest-product search-suggest-product__similar__item">
  60.                             <span @click="useSuggestion(foundSuggestion)">[[foundSuggestion]]</span>
  61.                         </li>
  62.                     </ul>
  63.                 </div>
  64.             </template>
  65.             <template v-if="products.length > 0">       
  66.                 <div class="search-suggestion-block search-suggestion-block--products">     
  67.                     <div class="h3">{{"search.products" | trans}}</div>
  68.                     <ul class="list-unstyled">
  69.                         <li class="search-suggest-product search-suggest-product__product js-result" v-for="product in products" :key="product._id">                                                    
  70.                             <a :href="product._source.seoUrl" :title="product._source.name" class="search-suggest-product-link">
  71.                                 <div class="row flex-nowrap align-items-start no-gutters">                                    
  72.                                     <div  class="col-auto search-suggest-product-image-container">                                            
  73.                                         <img v-if="product._source.coverdropdownthumbnail" :src="product._source.coverdropdownthumbnail" class="search-suggest-product-image">
  74.                                         <img v-else-if="product._source.cover" :src="product._source.cover" class="search-suggest-product-image">
  75.                                         <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 107.69998 82.8"><path fill="#413a3e" d="M46.89999,23h11.3l14.7,46.8,14.70001-46.8h11.29999l8.79999,59.8h-9.39999s-5.89999-42.39999-6.29999-46.2l-14.39999,46.2h-9.3l-14.5-46.2c-.39999,3.89999-6.3,46.2-6.3,46.2h-9.39999l8.79999-59.8h0Zm-29.89999,20.10001c.10001-9,3.2-18.3,3.8-20H11.40001c-2.2,6-3.89999,12.7-3.8,18.89999,.2,22.7,21.8,27,23.2,27.3l.3-1.60001c-1.20001-.5-14.30002-5.79999-14.10001-24.59999Z"/><path class="b" d="M2.29999,39C3.09999,26.2,12.39999,3.8,14.09999,0h-2.39999C10,4,0,28,0,40.3c0,28.10001,28.10001,31,30.5,31.10001l.2-1c-2.5-.3-30.2-4.20001-28.40001-31.40001Z"/></svg>
  76.                                     </div>                                    
  77.                                     <div class="col search-suggest-product-text-container">
  78.                                         <div class="search-suggest-product-name">
  79.                                             [[ product._source.name ]]<template v-if="product._source.custom_produkt_produkt_jahrgang"> [[ product._source.custom_produkt_produkt_jahrgang ]]</template>
  80.                                         </div>                                                                                                              
  81.                                         <div>
  82.                                             <template v-if="product._source.custom_produzent_produzent_name || product._source.custom_produkt_produkt_typ || product._source.custom_produkt_produkt_herkunft">                                                
  83.                                                 <div class="search-suggest-attributes">
  84.                                                     {# <template v-if="product._source.custom_produkt_produkt_lage">
  85.                                                         [[ product._source.custom_produkt_produkt_lage ]]<br>
  86.                                                     </template> #}
  87.                                                     <template v-if="product._source.custom_produzent_produzent_name">
  88.                                                         [[ product._source.custom_produzent_produzent_name ]]<br>
  89.                                                     </template>
  90.                                                 </div>
  91.                                                 <div v-if="product._source.custom_produkt_produkt_flaschengroesse" class="search-suggest-attributes search-suggest-attributes__size">
  92.                                                     [[ product._source.custom_produkt_produkt_flaschengroesse ]]
  93.                                                 </div>
  94.                                             </template>
  95.                                         </div>
  96.                                     </div>
  97.                                     <div class="col-auto search-suggest-price-info">
  98.                                         <div v-if="product._source.custom_produkt_label_produkt_aufanfrage">{{ "product.onRequest"|trans }}</div>
  99.                                         <div v-else-if="product._source.custom_produkt_label_produkt_comingsoon">{{ "product.comingSoon"|trans }}</div>
  100.                                         <div v-else-if="product._source.price == 9999">{{ "product.comingSoon"|trans }}</div>
  101.                                         <div v-else-if="product._source.custom_produkt_label_produkt_subscription && product._source.custom_produkt_label_produkt_subscription == true && product._source.custom_produkt_label_produkt_comingsoon == false && product._source.price == 0 && (product._source.stock == '' || product._source.stock <= 0)">{{ "product.comingSoon"|trans }}</div>
  102.                                         <div v-else-if="(product._source.custom_produkt_label_produkt_ausverkauft && product._source.custom_produkt_label_produkt_ausverkauft == true) || (product._source.stock == '' || product._source.stock <= 0)">{{ "product.temporairySoldOut"|trans }}</div>
  103.                                         <div v-else class="search-suggest-price-info-item search-suggest-price">                                                        
  104.                                             <template v-if="product._source && product._source.productNumber !== 'gsweb-1-printathome'">                                                            
  105.                                                 <template v-if="config.currentCustomerGroup === 'Mitarbeiter'">
  106.                                                     [[ formatNumber(product._source.price_gross_mitarbeiter) ]]                                                                
  107.                                                     <template v-if="product._source.stattprice_gross_mitarbeiter && product._source.stattprice_gross_mitarbeiter != product._source.price_gross_mitarbeiter">                                                                
  108.                                                         <div>{{ "product.insteadOf"|trans }} <del>[[ formatNumber(product._source.stattprice_gross_mitarbeiter) ]]</del></div>
  109.                                                     </template>
  110.                                                 </template>
  111.                                                 <template v-else-if="config.currentCustomerGroup === 'Wiederverkauf'">
  112.                                                     [[ formatNumber(product._source.price_net_wiederverkauf) ]]
  113.                                                     <template v-if="product._source.stattprice_net_wiederverkauf && product._source.stattprice_net_wiederverkauf != product._source.price_net_wiederverkauf">                                                                
  114.                                                         <div>{{ "product.insteadOf"|trans }} <del>[[ formatNumber(product._source.stattprice_net_wiederverkauf) ]]</del></div>
  115.                                                     </template>
  116.                                                 </template>
  117.                                                 <template v-else>                                                                
  118.                                                     [[ formatNumber(product._source.price_gross_privat) ]]
  119.                                                     <template v-if="product._source.stattprice_gross_privat && product._source.stattprice_gross_privat != product._source.price_gross_privat">                                                                
  120.                                                     <div>{{ "product.insteadOf"|trans }} <del>[[ formatNumber(product._source.stattprice_gross_privat) ]]</del></div>
  121.                                                     </template>                                               
  122.                                                 </template>
  123.                                             </template>
  124.                                         </div>
  125.                                     </div>
  126.                                 </div>
  127.                             </a>
  128.                         </li>          
  129.                     </ul>    
  130.                     <div class="js-result search-suggest-total">
  131.                         <a :href="'{{dosuggestPrefix}}{{path("nextag.search.page")}}?search=' + searchTerm"
  132.                             title="Alle Weine anzeigen"
  133.                             class="btn btn-arrow"
  134.                         >
  135.                             Alle Weine anzeigen
  136.                         </a>
  137.                     </div>        
  138.                 </div>              
  139.             </template>
  140.                                       
  141.             <template v-if="searchFinished && producers.length > 0">
  142.                 <div class="search-suggestion-block search-suggestion-block--producers">
  143.                     <div class="h3">{{"search.producers" | trans}}</div>
  144.                     <ul class="list-unstyled">                        
  145.                         <li v-for="producer in producers" class="search-suggest-product search-suggest-product__website js-result">
  146.                             <a :href="producer._source.seoUrl">
  147.                                 <div class="row flex-nowrap align-items-start no-gutters">
  148.                                     <div class="col-auto search-suggest-product-image-container">                                        
  149.                                         <img v-if="producer._source.coverdropdownthumbnail" :src="producer._source.coverdropdownthumbnail" class="search-suggest-product-image">
  150.                                         <img v-else-if="producer._source.cover" :src="producer._source.cover" class="search-suggest-product-image">
  151.                                         <img v-else src="/bundles/nextagtheme/assets/images/placeholders/placeholder-blog-thumb.svg">
  152.                                     </div>
  153.                                     <div class="col search-suggest-product-text-container"> 
  154.                                         <div class="row">
  155.                                             <div class="col search-suggest-product-name">[[ producer._source.name ]]</div>
  156.                                         </div>
  157.                                         <div class="row">
  158.                                             <div class="col-12">
  159.                                                 <div class="search-suggest-attributes">
  160.                                                     <template v-if="producer._source.custom_category_attributes_land_name">
  161.                                                         [[ producer._source.custom_category_attributes_land_name ]]
  162.                                                         <template v-if="producer._source.custom_category_attributes_region_name">
  163.                                                             &nbsp;/&nbsp; [[ producer._source.custom_category_attributes_region_name ]]
  164.                                                             <template v-if="producer._source.custom_category_attributes_subregion_name">
  165.                                                                 &nbsp;/&nbsp; [[ producer._source.custom_category_attributes_subregion_name ]]
  166.                                                             </template>
  167.                                                         </template>
  168.                                                         <br>
  169.                                                     </template>                                          
  170.                                                 </div>
  171.                                             </div>
  172.                                         </div>
  173.                                     </div>
  174.                                 </div>
  175.                             </a>                               
  176.                         </li>                    
  177.                     </ul>
  178.                 </div>
  179.             </template>                           
  180.                                  
  181.             <template v-if="searchFinished && wordpressPosts.length > 0">
  182.                 <div class="search-suggestion-block search-suggestion-block--posts">
  183.                     <div class="h3">{{"search.stories" | trans}}</div>
  184.                     <ul class="list-unstyled">                    
  185.                         <li v-for="post in wordpressPosts" class="search-suggest-product search-suggest-product__website js-result">
  186.                             {# TODO: Check Media #}                                                                  
  187.                             <a :href="post._source.link">
  188.                                 <div class="row flex-nowrap align-items-start no-gutters">
  189.                                     <div class="col-auto search-suggest-product-image-container">                                        
  190.                                         <template v-if="post._source.thumbnail">
  191.                                             <img :src="post._source.thumbnail" :alt="'{{"general.longName"|trans}} - ' + post._source.post_title" :title="post._source.post_title">
  192.                                         </template>
  193.                                         <template v-else>
  194.                                             <img src="/bundles/nextagtheme/assets/images/placeholders/placeholder-blog-thumb.svg" :alt="'{{"general.longName"|trans}} - ' + post._source.post_title" :title="post._source.post_title">
  195.                                         </template>                                        
  196.                                     </div>
  197.                                     <div class="col search-suggest-product-text-container">
  198.                                         <div class="search-suggest-product-name" v-html="post._source.post_title"></div>                                 
  199.                                         <div v-if="post._source.post_excerpt" class="search-suggest-product-excerpt"><span v-html="post._source.post_excerpt"></span></div>                                    
  200.                                     </div>    
  201.                                 </div>                                
  202.                             </a>
  203.                         </li>
  204.                     </ul>
  205.                 </div>
  206.             </template>
  208.             <template v-if="searchFinished && wordpressStories.length > 0">
  209.                 <div class="search-suggestion-block search-suggestion-block--stories">
  210.                     <div class="h3">{{"search.stories" | trans}}</div>
  211.                     <ul class="list-unstyled">                    
  212.                         <li v-for="post in wordpressStories" class="search-suggest-product search-suggest-product__website js-result">
  213.                             {# TODO: Check Media #}                                                                  
  214.                             <a :href="post._source.link">
  215.                                 <div class="row flex-nowrap align-items-start no-gutters">
  216.                                     <div class="col-auto search-suggest-product-image-container">                                        
  217.                                         <template v-if="post._source.thumbnail">
  218.                                             <img :src="post._source.thumbnail" :alt="'{{"general.longName"|trans}} - ' + post._source.post_title" :title="post._source.post_title">
  219.                                         </template>
  220.                                         <template v-else>
  221.                                             <img src="/bundles/nextagtheme/assets/images/placeholders/placeholder-blog-thumb.svg" :alt="'{{"general.longName"|trans}} - ' + post._source.post_title" :title="post._source.post_title">
  222.                                         </template>                                        
  223.                                     </div>
  224.                                     <div class="col search-suggest-product-text-container">
  225.                                         <div class="search-suggest-product-name" v-html="post._source.post_title"></div>                            
  226.                                         <div v-if="post._source.post_excerpt" class="search-suggest-product-excerpt"><span v-html="post._source.post_excerpt"></span></div>                                    
  227.                                     </div>    
  228.                                 </div>                                
  229.                             </a>
  230.                         </li>
  231.                     </ul>
  232.                 </div>
  233.             </template>
  235.             <template v-if="searchFinished && wordpressPages.length > 0">
  236.                 <div class="search-suggestion-block search-suggestion-block--pages">
  237.                     <div class="h3">{{"search.pages" | trans}}</div>
  238.                     <ul class="list-unstyled">                    
  239.                         <li v-for="post in wordpressPages" class="search-suggest-product search-suggest-product__website js-result">
  240.                             {# TODO: Check Media #}                                                                  
  241.                             <a :href="post._source.link">
  242.                                 <div class="row flex-nowrap align-items-start no-gutters">
  243.                                     <div class="col-auto search-suggest-product-image-container">                                      
  244.                                         <template v-if="post._source.thumbnail">
  245.                                             <img :src="post._source.thumbnail" :alt="'{{"general.longName"|trans}} - ' + post._source.post_title" :title="post._source.post_title">
  246.                                         </template>
  247.                                         <template v-else>
  248.                                             <img src="/bundles/nextagtheme/assets/images/placeholders/placeholder-blog-thumb.svg" :alt="'{{"general.longName"|trans}} - ' + post._source.post_title" :title="post._source.post_title">
  249.                                         </template>                                        
  250.                                     </div>
  251.                                     <div class="col search-suggest-product-text-container">
  252.                                         <div class="search-suggest-product-name" v-html="post._source.post_title"></div>                                     
  253.                                         <div v-if="post._source.post_excerpt" class="search-suggest-product-excerpt"><span v-html="post._source.post_excerpt"></span></div>                                    
  254.                                     </div>    
  255.                                 </div>                                
  256.                             </a>
  257.                         </li>
  258.                     </ul>
  259.                 </div>
  260.             </template>
  261.             
  262.             <div v-if="searchFinished && products.hits !== undefined && products.hits.hits !== undefined && products.hits.hits.length == 0 && wordpressPages.length === 0 && wordpressPosts.length === 0" class="search-suggest-no-result">
  263.                 {{ "header.searchNoResult"|trans|sw_sanitize }}
  264.             </div>
  265.         
  266.             <div v-else class="js-result search-suggest-total">
  267.                 <a :href="'{{dosuggestPrefix}}{{path("nextag.search.page")}}?search=' + searchTerm"
  268.                     title="{{ "header.searchAllResults"|trans|striptags }}"
  269.                     class="btn btn-arrow"
  270.                 >
  271.                     {{ "header.searchAllResults"|trans|sw_sanitize }}
  272.                 </a>
  273.             </div>            
  274.         </div>
  275.     </div>
  276. </form>