Name search for products

NithinUser
New Member
13 0 0

Hi,

I am developing a shopify app in node ans react. We are not using polaris.

We have a product list component in our app where we can select the required products.  Is anybody who have implemented a search functionality based on product name(contains the word ). 

My requirement is that...In the page load only 100 products will be loaded from store, rest products will be fetched only when we search. I have a textbox and search button. And under that a product table is there.can anybody guide me through the steps for writing a query that fetches the products matching with the text entered in textbox 

 

0 Likes
olivert
Explorer
51 11 14

Hey

You can do that with GraphQL

You can do something similar to the below

The goal is to make a gql query and call it with a query variable. In this case it will be the title

 

query($title: String){
   products(first:100, query:$title) {
    edges {
      node {
        id
        title
      }
    }
  }

 

And if you make the $title variable something like "title: *red*"  or "title:" + myVariable

The query will return any item which has the string 'red' in it

Substitute 'red' or myVariable with the value of your text box. The stars are wildcards.

Have a peek here to see some more GQL examples:

https://shopify.dev/concepts/graphql/queries

There is also a graphql app you can install on a shop to play around with these queries.

GraphQL caches its results so you wont be re fetching the query with every keypress.

0 Likes