Add shop sort
Previously, you added the ability for buyers to search the marketplace homepage for shops where your channel app is installed. You want to give buyers a way of organizing the shops on the homepage.
In this tutorial, you'll learn how to add sort functionality for shops. You'll set up shop sort by name, but you can follow a similar structure to provide sort options by other shop attributes.
What you'll learn
After finishing this tutorial, you'll know how to add the ability for buyers to sort shops on the marketplace homepage.
You've completed the Add shop search tutorial.
Step 1: Add ordering to the internal GraphQL API
In this step, you'll add logic to your internal GraphQL API for how to order the shops on the homepage. You'll start by taking in the
reverse argument, which determines whether to reverse the sorting by name.
server/graphql/resolvers.js, add a
reverseargument for determining order by shop name.
server/graphql/schema.js, add the argument to the GraphQL schema.
You should be able to query for shops, sorting by name, in the GraphQL playground, available in your app at the
Step 2: Add sort to the marketplace homepage
pages/index.js, update the shops query to use the
reverseargument that you added.
SubHeadercomponent to include a sort dropdown list.
You'll also add a property to the component that allows the parent component to control the selected sort direction, and a property that allows the parent to respond to changes in the selected sort direction.
Indexcomponent to store the sort direction in state.
You'll pass the state value to the
SubHeadercomponent. You'll also add a callback function to update the state when the selected sort direction changes. You can then pass the state value into your query.
Your marketplace homepage should now look something like the following:
- Learn how functionality for filtering shops on a marketplace.