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.

A gif showing a marketplace homepage where shops are dynamically sorted alphabetically by name

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.

Requirements

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.

  1. In server/graphql/resolvers.js, add a reverse argument for determining order by shop name.

  2. In 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 /graphql path.

    An image of a sample query and response in the GraphQL playground

Step 2: Add sort to the marketplace homepage

  1. In pages/index.js, update the shops query to use the reverse argument that you added.

  2. Update the SubHeader component 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.

  3. Update the Index component to store the sort direction in state.

    You'll pass the state value to the SubHeader component. 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:

    An image of the marketplace homepage with sort functionality

Next steps