Filtering Products through theme app extension

Xrevenge-7
Shopify Partner
2 0 0

I am building an app which add a ui component with mic and stuff to a store. When someone on the store send a command like show me red or some black ____  products. I want to trigger a action on that such as I want all the products on the stored to be filtered. 
So currently when someone install this app the ui component for mic which an app embed is added automatically to the theme. This then also has logic to handle mic input and understanding what filter to apply. 
Now the text to action conversion is done. I just can't figure out the filtering and searching part through my theme app extension.
Search through query params is possible but I don't want to reload the page even for searching or filtering. Is this any way I can handle this use case.


Or is there any what this flow can be done without a theme app extension and directly through my app

Replies 2 (2)

Liam
Shopify Staff
2731 298 769

HI Xrevenge-7,

 

Since you're looking for a solution that doesn't involve a page reload, you'll need to employ a dynamic approach likely involving JavaScript and possibly AJAX to fetch and display the filtered product data without reloading the page.

 

The Storefront API might be helpful in this case as it allows you to fetch specific data about products, collections, etc, and you can do this dynamically from your client-side JavaScript code. This way, you could fetch the filtered data from Shopify based on the command from your app, and then update your store's content dynamically based on this data, without a page reload.

 

Here is a rough idea of how this might work:

  • Your app's UI component listens for a command (like "show me red products").
  • Once a command is detected, your app processes this command and figures out what the user is asking for.
  • Your app then makes a request to your server-side code, passing along the user's command.
  • Your server-side code makes a request to the Shopify Storefront API, passing along the relevant query to get the filtered products based on the user's command.
  • The Shopify Storefront API returns the filtered product data, which your server-side code then sends back to your app.
  • Your app receives this filtered product data and uses it to update the products displayed on the page, without a page reload.

You'd be working a lot with querying the product resource and possibly Liquid too - so worth checking those both out in our docs.

 

Hope this helps,

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Dhruv_Shah_09
Shopify Partner
3 0 0

hello

Do you know how to make App-Extension Using CLI-3 in Laravel 8 Project??

pls any aware of it pls reply...thank you...