Start showing matching search results after 3 letters in dawn theme

Start showing matching search results after 3 letters in dawn theme

Krishna12
Shopify Partner
42 1 6

Hello,

I am using Dawn theme. There is search functionality which have requirement to Start showing matching search results after 3 letters. and show max 6 results.

 

Do we have to change api or change in code ? please help.  

Replies 5 (5)

Rishihuptech
Shopify Partner
676 126 135

Hi @Krishna12 
You can check this Shopify documentation for a detailed explanation of the code of predictive search: https://shopify.dev/docs/themes/navigation-search/search/predictive-search

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Krishna12
Shopify Partner
42 1 6

@Rishihuptech yes i have checked that document but how can i add condition to show result once only 3 letter apply.

Rishihuptech
Shopify Partner
676 126 135

@Krishna12 
You can use the below code to get the desired output

 

document.querySelector("#Search_input_id").addEventListener("input", function(e) {
    var query = e.target.value;

    
    if(query.length >= 3) {
        
        fetch("/search/suggest.json?q=" + query + "&resources[type]=product&resources[limit]=6")
            .then(response => response.json())
            .then(data => {
                var results = data.resources.results.products;
                displayResults(results.slice(0, 6)); 
            });
    } else {
        
        clearResults();
    }
});

function displayResults(results) {
    console.log(results);
}

function clearResults() {
    
}

 




If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Krishna12
Shopify Partner
42 1 6

@Rishihuptech 

I have added this code in theme.liquid file. but its not working after this line 

fetch("/search/suggest.json?q=" + query + "&resources[type]=product&resources[limit]=6")

Is it causing because theme have not suggest.json file ?

 

There is main-search.js file in dawn theme. Can we do anything in this file ? added code.

 

class MainSearch extends SearchForm {
constructor() {
super();
this.allSearchInputs = document.querySelectorAll('input[type="search"]');
this.setupEventListeners();
}

setupEventListeners() {
let allSearchForms = [];
this.allSearchInputs.forEach((input) => allSearchForms.push(input.form));
this.input.addEventListener('focus', this.onInputFocus.bind(this));
if (allSearchForms.length > 4) return;
allSearchForms.forEach((form) => form.addEventListener('reset', this.onFormReset.bind(this)));
this.allSearchInputs.forEach((input) => input.addEventListener('input', this.onInput.bind(this)));
}

onFormReset(event) {
super.onFormReset(event);
if (super.shouldResetForm()) {
this.keepInSync('', this.input);
}
}

onInput(event) {
const target = event.target;
this.keepInSync(target.value, target);
}

onInputFocus() {
const isSmallScreen = window.innerWidth < 750;
if (isSmallScreen) {
this.scrollIntoView({ behavior: 'smooth' });
}
}

keepInSync(value, target) {
this.allSearchInputs.forEach((input) => {
if (input !== target) {
input.value = value;
}
});
}
}

customElements.define('main-search', MainSearch);
Rishihuptech
Shopify Partner
676 126 135

@Krishna12 You can replace the search code with the current code and get all the details in the JSON form in the displayResults function. You can check the Chrome console for more details from there you can append the result where you want to show,
The code is tested in the latest and old versions of the Dawn theme.
Replace the "#Search_input_id" with the id you have on the theme in search input. that's it. 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required