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.
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
- You've completed the Create a channel app experience tutorial.
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
Add the MUI component libraries.
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.
At your project root, create a
componentsfolder and add a
Pagecomponent that returns a page wrapper.
Next.js offers a
Headcomponent 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
A page header can also be added to surface your marketplace’s icon and name. The
logo.svgfile should be placed in the
components/index.jsto export the page components from the
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:
First four products
Online store URL
components/productGrid.js, create a
ProductTilecomponent 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.
ProductGridcomponent to accept a list of products and return a grid with a product tile for each product.
components/index.jsto export the product grid components from the
pages/index.js, add a query to retrieve basic shop details and the first four products.
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.
ShopsSection(plural) component to handle rendering the
ShopSectioncomponents 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
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:
- Learn how to build the shop discovery experience.