Please help with auto - searchboxes, debut..

New Member
8 0 0

Hello I tried to implement the code from the tutorial on shopify, but it doesnt work for my debut theme:

https://waffen-paar.at/

Thats what I did:

1) created a template called: search.json

pasted:

{% layout none %}

 

{% capture output %}

    {% for result in search.results limit: 10 %}

        {% assign resultURL = result.url %}

        {% assign thumbURL = result.images[0] | product_img_url: 'thumb' %}

 

        {"value":"{% include 'json_cleanup' with result.title %}","label":"{% include 'json_cleanup' with result.title %}","url":"{% include 'json_cleanup' with resultURL %}","thumb":"{% include 'json_cleanup' with thumbURL %}","id":{{result.id}} }{% unless forloop.last %},{% endunless %}

    {% endfor %}

{% endcapture %}

 

{% comment %} Enclose in square brackets and output the json object {% endcomment %}

{{ output | strip_newlines | prepend: '[' | append: ']' }}

2) created a search-autocomplete snippet

pasted:

{% comment %} Width of results box {% endcomment %}

{% assign results_box_width = '242px' %}

{% comment %} Background color of results box {% endcomment %}

{% assign results_box_background_color = '#ffffff' %}

{% comment %} Border color of results box {% endcomment %}

{% assign results_box_border_color = '#d4d4d4' %}

 

 

 

<!-- Some styles to get you started. -->

<style>

.search-results {

  z-index: 8889;

  list-style-type: none;  

  width: {{ results_box_width }};

  margin: 0;

  padding: 0;

  background: {{ results_box_background_color }};

  border: 1px solid {{ results_box_border_color }};

  border-radius: 3px;

  -webkit-box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.1);

  box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.1);

  overflow: hidden;

}

.search-results li {

  display: block;

  width: 100%;

  height: 38px;

  margin: 0;

  padding: 0;

  border-top: 1px solid {{ results_box_border_color }};

  line-height: 38px;

  overflow: hidden;

}

.search-results li:first-child {

  border-top: none;

}

.search-results .title {

  float: left;

  width: {{ results_box_width | remove: 'px' | to_number | minus: 50 }}px;

  padding-left: 8px;

  white-space: nowrap;

  overflow: hidden;

  /* The text-overflow property is supported in all major browsers. */

  text-overflow: ellipsis;

  -o-text-overflow: ellipsis;

  text-align: left;

}

.search-results .thumbnail {

  float: left !important;

  display: block;

  width: 32px;

  height: 32px;   

  margin: 3px 10px 3px 3px;

  padding: 0;

  text-align: center;

  overflow: hidden;

}

</style>

3) I included it in my theme.liquid with {%include 'auto-complete' %}

Please help i dont know what could be wrong I would be very thankful :)

0 Likes
Shopify Partner
1157 94 141

hi,@@

try this 

https://help.shopify.com/en/themes/development/search/predictive-search

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
1 Like