Add product sort

Your marketplace has shop pages with shop details and product categories. You want to give buyers a way of organizing the products, in dedicated pages.

In this tutorial, you'll add sort functionality to shops. You'll set up product sort by title, price, best-selling, and creation date, but you can follow a similar structure to provide sort options by other product attributes. Refer to the Storefront API to see all supported sorting options.

A gif showing products on the shop page sorted by various properties

What you'll learn

After finishing this tutorial, you'll know how to add sort functionality to shop pages.

Requirements

Step 1: Create sort options

You'll create a map of sort options, where each has a label, a key, and a Boolean to indicate order. Each option's key will be used as a query parameter in the URL to track the selected sort option.

  1. In pages/shops/[id].js, create a map of the sort options on your marketplace and set the default sort order.

Step 2: Add a sort selector

Render the sort options you set in a dropdown list above the product grid. You'll track the sort state using query parameters and persist the state. You'll use Next.js for shallow routing, so that the URL can change without re-running all data fetching methods.

Because you added product categories to the shop page, you need preserve the selected category in the URL when the sort order is changed.

  1. In pages/shops/[id].js, add a ProductSort component that renders a select element with the sort options defined in the constant that you created.

  2. In the ProductSort component, add a callback that updates the router query with the selected sort option, except when the default sort order is selected.

    You can also add a sortBy property that enables the parent to pass in the currently selected sort option and use it for the Select value.

    You can add a urlParams property so that the parent can provide the base set of query parameters, which ensures the category is preserved when the sort option changes.

  3. Update the ProductSection component to render the ProductSort component above the PaginatedProducts component.

    You can get the selected sort option from the router query, and the URL parameters from the existing urlParams variable.

    Sorting options on the shop page should look something like the following:

    An image of the shop's products with the sort options displayed in a dropdown list

Step 3: Sort products from the Storefront API

After you've added the selected sort option to the URL, you can use it to get the sort key and reverse values to use as arguments for the Storefront API product query.

  1. In pages/shops/[id].js, update the products query to accept sortKey and reverse arguments.

  2. Update the effect in the ProductSection component to run when the selected sort option is changed, with the sortKey and reverse variables provided in the query.

    The variables can be found in SORT_MAP using sortBy as the key.

  3. Add sortBy to the dependency array for the effect that triggers the page's loading state.

    This ensures the loading state is displayed when the sort option is changed.

Step 4: Update pagination

You'll update URLs so that pagination links persist the selected sort option across pages. If the product sort option is provided, a query parameter should be added to the href used for the Next and Previous page links.

  1. In pages/shops/[id].js, update the getUrlParams helper function to accept a sortBy parameter, and add it to the return object if it isn't the default value.

  2. Update the ProductSection component to pass in the sortBy variable from the router query into the getUrlParams helper.

    The urlParams variable is already being passed into the PaginatedProducts component, so no further changes are necessary.

Next steps