RFC: product sort in collection page

[ahmed-adly-khalil]

Hello everyone 👋
I'm working to implement a hydrogen component for product sort similar to what we have in liquid themes as below:

This post is to get some validation on the component design, so appreciate any/all feedback

My proposed design is as follows:

• Actual sort functionality to be done using ProductSortKeys added to the QUERY object in the collection page
• Create a ProductSort component folder under hydrogen components which contains:
  • ProductSort.client.tsx -> client side implementation for the sort dropdown which will use append a sory-key param to the page URL
  • update the collection page to have a new query variable sortKey that reads the URL param using useParams with a default value of UPDATED_AT

My assumption is that this approach won't trigger a full page refresh and won't need to use something like setServerState to notify the collection page of the change in URL, will need to validate this

can I get some feedback if this approach is in line with the hydrogen design direction?

[blittle]

Hi @ahmed-adly-khalil I love the idea. I think we'll need to validate the exact UX on our end. We are in the process of validating and building a search page, and a component like this would possibly be useful there as well.

With regards to the implementation details, it will need to use setServerState because all data fetching happens on the server. The client component has the interaction, but needs to trigger the server to refetch the data and re-render the collections server component. Then the client will rehydrate with the latest results from the server. You can see an example of what this looks like in the search page implementation (yet to be merged): Shopify/hydrogen#110

[ahmed-adly-khalil]

@blittle Thank you so much for the great feedback, I will proceed with an initial implementation but will be open for sure for feedback and changes. I love the way you guys designed Hydrogen and it will be great to contribute

[cathryngriffiths]

🎉

Actual sort functionality to be done using ProductSortKeys added to the QUERY object in the collection page

Sounds good, just be sure to use the sort keys from the storefront API (I noticed the ones you linked are for the Admin API, which includes different sort keys)

Create a ProductSort component folder under hydrogen components which contains:
ProductSort.client.tsx -> client side implementation for the sort dropdown which will use append a sory-key param to the page URL

Definitely interested to see how this takes shape for you. In the past, I encountered difficulties building headless components that require drop down menus. For example, we wanted to build a Currency Selector into Hydrogen, but has difficulties building that headless, so we ended up just providing utilities via the LocalizationProvider and related hooks so developers could build their own Currency Selector. It might need to be the same case here, but I'm interested to see what you manage to build!

I recommend taking a look at What are headless components? and How to build headless components before diving in too deep!

update the collection page to have a new query variable sortKey that reads the URL param using useParams with a default value of UPDATED_AT

👍

[ahmed-adly-khalil]

@cathryngriffiths Really couldn't ask for better feedback, Thank you so much. I will take these points into account and will try to do incremental/ smaller PRs.

[ahmed-adly-khalil]

I went ahead and created the initial draft PR, appreciate your feedback guys Shopify/hydrogen#224