search

AlexanderProd / gatsby-shopify-starter

🛍 Simple starter to build a blazing fast Shopify store with Gatsby.
https://gatsby-shopify-starter.alexanderhoerl.de
Other
422 stars 95 forks source link

Sort Highest to Lowest Price Filter Component #36

Closed Chizzah closed 4 years ago

Chizzah commented 4 years ago

Hi there,

Thanks for the great starter.

I managed to change some things like from emotion to linaria for css-in-js. And style the starter the way I want. Got everything working great.

I've been spending the last 4 hours trying to figure out how to add a component that will allow users to filter results on one of the products pages (I have 5 collections and a page for each).

I want them to be able to filter from highest to lowest price, from lowest to highest price and from a to z alphabetical order.

I'm not asking you to add this functionality but instead on what I need to learn to add if myself.

The ProductForm component is the closest thing to what my Filter component will need to be if I'm not mistaken. Your code is way above my level so some insight would be great from you.

I'm learning React Hooks right now since I know I need them if I want to keep with your standard. Also looking into the context API because I guess that's where I'll find the context literally.

What confuses me the most is what to grab from where to make the filter component work. I know I need to get the product prices (you've done it for me so that's over). Not sure what the next step is though.

Thanks again. Hope you see this.

cordial commented 4 years ago

Hey @Chizzah - did you work out how to do this?

Chizzah commented 4 years ago

@cordial I got close but couldnt get it working fully cause Im not smart. The owner of this repo shared this with me https://github.com/phirannodesigns/portdayspa.com.au/blob/staging/src/pages/products.js. Got far but couldnt get the last step done. Where the render changes with the new ordered stuff.

AlexanderProd commented 4 years ago

Hey @Chizzah,

Sorry for the late reply, Sorting is indeed not a trivial addition, I think you could archive this with changing the sorting in the ProductGrid component based on a useState hook. As you can see in the ProductGrid graphql queries already support sorting.

AlexanderProd commented 4 years ago

Update: The useStaticQuery hook used in the ProductGrid component doesn't support variables therefore we cant simply drop in the new feature with the way it's built at the moment.

Chizzah commented 4 years ago

Thanks for the insight @AlexanderProd.

I'll revisit the filter/sort feature at a later date.

Thank you for this amazing starter.

Closing this issue.