Create a marketplace homepage

Previously, you created a marketplace framework that included a basic buyer-facing homepage. You're now ready to start building a more advanced buyer experience page.

In this tutorial, you'll use the React Apollo Client and material UI (MUI) component library to build up a simple homepage. The page will display the merchants that have installed your channel app and the first four products in their online stores. Each product will link to its product details page in the merchant's storefront.

An image of the marketplace homepage that you'll create in this tutorial

What you'll learn

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

  • Style a marketplace homepage that features multiple merchant's shops

  • Link from marketplace products to the relevant merchant's storefront

Requirements

Step 1: Set up React providers

Set up some UI libraries for styling the marketplace homepage, and add a custom marketplace provider for your buyer-facing routes. The marketplace provider will include the following:

  • ApolloProvider, with a client that connects to the internal GraphQL API

  • ThemeProvider, which overrides the MUI defaults with your marketplace's font and colors

  1. Add the MUI component libraries.

  2. In pages/_app.js, add the custom marketplace provider.

Step 2: Set up the page wrapper

Create a page wrapper component for the common elements in the marketplace homepage. In this step you'll create a Page component that imports a custom font and renders a header with the marketplace's logo.

  1. At your project root, create a components folder and add a page.js file.

  2. In components/page.js, import mui and next helpers.

  3. Create a Page component that returns a page wrapper.

    Next.js offers a Head component that allows you to append elements to the page head. Here you're adding in a link to the custom font that you'll use for your marketplace. It can also be used to add meta tags.

    A page header can also be added to surface your marketplace’s icon and name. The logo.svg file should be placed in the /public folder.

  4. Create components/index.js to export the page components from the components/ folder.

Step 3: Create shop section components

Create the section for rendering different shops in the marketplace. You'll use the Storefront API to retrieve the following data for each shop in the marketplace:

  • Shop name

  • First four products

  • Online store URL

  1. In the components/ folder, create productGrid.js.

  2. In components/productGrid.js, create a ProductTile component that accepts a title, image, price range, and the product's online store URL.

    The request will return a basic product tile with the image, title, and price, with a link to view the product in the shop storefront.

  3. Create a ProductGrid component to accept a list of products and return a grid with a product tile for each product.

  4. Update components/index.js to export the product grid components from the components/ folder.

  5. In pages/index.js, add a query to retrieve basic shop details and the first four products.

  6. Create a ShopSection (singular) component that retrieves shop and product data, given a domain and Storefront API access token.

    The request returns a section with the shop name, a link to the online store, and a product grid.

  7. Create a ShopsSection (plural) component to handle rendering the ShopSection components and to house pagination logic.

    A marketplace can surface many shops, so it's best practice to set some pagination logic for presentation.

Step 4: Display shops in the marketplace

In pages/index.js, retrieve the list of shop domains and Storefront API access tokens from the marketplace frontend using the internal GraphQL API that you created.

Create a query to retrieve domains and access tokens and execute it with the useQuery React hook.

The homepage of your marketplace should now look something like the following:

An image of the marketplace that you've created in this tutorial

Next steps