Add shop filters

Previously, you added the ability for buyers to sort the marketplace homepage by shop name. As your marketplace grows and features more merchant shops, you want to enable buyers to narrow down high volumes of content and surface only the most relevant shops.

In this tutorial, you'll learn how to add filter functionality for shops. You'll set up shop filtering by country, but you can follow a similar structure to provide filtering by other shop attributes.

A gif showing a marketplace homepage where shops are filtered by country

What you'll learn

After finishing this tutorial, you'll know how to do the following:

  • Save shop attributes to your database

  • Filter database queries by shop country

  • Add shop country queries to the internal GraphQL API

  • Add the filter to the marketplace homepage

Requirements

You've completed the Adding shop sort tutorial.

Step 1: Update the shop data model

Add a column/attribute to your shop data model to save the country of each shop. This can typically be done by running a migration on your database.

In this tutorial, you'll call the attribute country.

Step 2: Save the shop's country

  1. In server/handlers/queries/get-shop-details.js, update the query to fetch the country from the billing address.

  2. Update server/server.js to get country from the getShopDetails return value and save it to the database.

Step 3: Update the internal GraphQL API

Update the internal GraphQL API to filter database queries by country.

  1. In server/graphql/resolvers.js, add an argument to retrieve the shop's country.

  2. In server/graphql/schema.js, add the argument to the GraphQL schema.

    You should be able to query for shops, filtering by country, 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 4: Add a shop countries query to the internal GraphQL API

In this step, you'll add a shopCountries query. This enables the internal GraphQL API to retrieve all available countries for the shops in your marketplace.

  1. In server/graphql/resolvers.js, update the GraphQL query resolver to return all unique countries in the database.

  2. In server/graphql/schema.js, add the new query to the GraphQL schema.

Step 5: Add the filter to the marketplace homepage

  1. In pages/index.js, update the SHOPS_QUERY to use the reverse argument that you added in the shop sorting tutorial.

    You'll also add a query to retrieve the list of shop countries.

  2. Update the SubHeader component with a country filter.

    You'll also add properties that allow the parent component to provide the list of countries, the selected country, and a callback that enables the parent to respond to changes to the selected country.

  3. Update the Index component to retrieve the list of countries from the internal GraphQL API using the query that you created.

    You'll also set up a constant, which you'll use to create an ALL_COUNTRIES option.

  4. Update the Index component to track the selected country in its state.

    You'll also add a callback function to handle changes to the country selected in the SubHeader component, and update the state accordingly. You'll update the SHOP_QUERY to use the country from the component’s state.

    Your marketplace homepage should now look something like the following:

    An image of the marketplace homepage with a country filter dropdown list

Next steps