i have been following the Shopify documentation for implementing the predictive search for the Shopify. You guys can access the documentation from the following link.
https://shopify.dev/docs/themes/navigation-search/search/predictive-search
So my problem is images are rendering only 50px on the search. So since its being rendered only 50px even i make the images bigger with using css images are being blurry.
{%- if predictive_search.performed -%}
<div id="predictive-search-results">
{%- if predictive_search.resources.products.size > 0 -%}
<h3 id="predictive-search-products">
Products
</h3>
<ul role="listbox" aria-labelledby="predictive-search-products">
{%- for product in predictive_search.resources.products -%}
<li role="option">
<a href="{{ product.url }}">
{{ product | image_url: width: 50 | image_tag }}
<span>{{ product.title }}</span>
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
<button>
Search for “{{ predictive_search.terms }}”
</button>
</div>
{%- endif -%}
I did tried many things for the following part but any change i made from here not effecting at all.
{{ product | image_url: width: 50 | image_tag }}
Heres my full code
<predictive-search>
<form action="{{ routes.search_url }}" method="get" role="search">
<input
id="Search"
type="search"
name="q"
placeholder="Search Products"
required
role="combobox"
aria-expanded="false"
aria-owns="predictive-search-results"
aria-controls="predictive-search-results"
aria-haspopup="listbox"
aria-autocomplete="list"
>
<input name="options[prefix]" type="hidden" value="last">
<div id="predictive-search" tabindex="-1"></div>
</form>
</predictive-search>
{%- if predictive_search.performed -%}
<div id="predictive-search-results">
{%- if predictive_search.resources.products.size > 0 -%}
<h3 id="predictive-search-products">
Products
</h3>
<ul role="listbox" aria-labelledby="predictive-search-products">
{%- for product in predictive_search.resources.products -%}
<li role="option">
<a href="{{ product.url }}">
{{ product | image_url: width: 50 | image_tag }}
<span>{{ product.title }}</span>
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
<button>
Search for “{{ predictive_search.terms }}”
</button>
</div>
{%- endif -%}
<script>
function toggleSearch() {
const modalContainer = document.getElementById("modal-container");
const body = document.body;
if (modalContainer.style.display === "flex") {
modalContainer.style.display = "none";
body.classList.remove("modal-open");
} else {
modalContainer.style.display = "flex";
body.classList.add("modal-open");
}
}
</script>
<script>
class PredictiveSearch extends HTMLElement {
constructor() {
super();
this.input = this.querySelector('input[type="search"]');
this.predictiveSearchResults = this.querySelector('#predictive-search');
this.input.addEventListener('input', this.debounce((event) => {
this.onChange(event);
}, 300).bind(this));
}
onChange() {
const searchTerm = this.input.value.trim();
if (!searchTerm.length) {
this.close();
return;
}
this.getSearchResults(searchTerm);
}
getSearchResults(searchTerm) {
fetch(`/search/suggest?q=${searchTerm}§ion_id=predictive-search`)
.then((response) => {
if (!response.ok) {
var error = new Error(response.status);
this.close();
throw error;
}
return response.text();
})
.then((text) => {
const resultsMarkup = new DOMParser().parseFromString(text, 'text/html').querySelector('#shopify-section-predictive-search').innerHTML;
this.predictiveSearchResults.innerHTML = resultsMarkup;
this.open();
})
.catch((error) => {
this.close();
throw error;
});
}
open() {
this.predictiveSearchResults.style.display = 'block';
}
close() {
this.predictiveSearchResults.style.display = 'none';
}
debounce(fn, wait) {
let t;
return (...args) => {
clearTimeout(t);
t = setTimeout(() => fn.apply(this, args), wait);
};
}
}
customElements.define('predictive-search', PredictiveSearch);
</script>
