Add shop search

Now that you have a basic marketplace, you're ready to start building it up with more functionality. You want buyers to be able to search the marketplace to find specific shops.

In this tutorial, you'll add functionality for searching the shops where your channel app is installed, by name.

A gif showing shop search on the marketplace homepage

What you'll learn

After finishing this tutorial, you'll know how to add shop search to a marketplace homepage.


Step 1: Update the shop data model

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

In this tutorial, you'll name the attribute name.

Step 2: Retrieve and save shop names

  1. In server/handlers/queries, create get-shop-details.js to request the shop name from the GraphQL Admin API's Shop object.

  2. In server/handlers/index.js, export the function.

  3. In server/server.js, in the afterAuth function, obtain the shop name and store it in the database.

Step 3: Subscribe to the webhook topic

In this step, you'll subscribe to the SHOP_UPDATE topic to notify your app when there are updates to a shop.

  1. In server/handlers, create a webhooks folder with shop-update.js.

  2. In server/handlers/webhooks/shop-update.js, write a function that's called when the SHOP_UPDATE webhook is called, to update the shop name in the database if it changes.

  3. In server/handlers/webhooks, create a setup.js file.

  4. In server/handlers/webhooks/setup.js, write a function subscribing to webhooks and executing code when the webhook is received.

    You'll also move the subscription to the APP_UNINSTALLED webhook from server/server.js to here.

  5. In server/handlers/index.js, export the function.

  6. In server/servers.js, replace the APP_UNINSTALL subscription with the call to setupWebhooks.

Step 4: Add search to the internal GraphQL API

Add search to the internal GraphQL API.

  1. In server/graphql/resolvers.js, update the GraphAPI query resolver with an argument to filter database queries by shop name.

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

    You should be able to query for shops 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 5: Add search input to the marketplace homepage

To style online search, you'll import MUI components and add divs. You'll also set behavior to execute the GraphQL API request when buyers execute the search.

  1. Add MUI icons for the search UI component.

  2. In pages/index.js, update SHOPS_QUERY to use the nameIsLike argument that you added.

  3. In components/page.js, update the Page component to accept a subHeader property, which will render the property value inside of the AppBar.

  4. In pages/index.js, create a SubHeader component that you'll be able to pass to the Page component.

    This component should contain a styled search input and icon. It should also provide a property that allows the parent component to respond to key down events in the input.

  5. Pass the SubHeader component to the Page component.

    You'll also create a callback function that triggers the SHOPS_QUERY with the value from the search input when buyers execute the search. You'll add some additional margin to the ShopsSection container, to account for the taller header.

    Your marketplace homepage should now look something like this:

    An image of the marketplace homepage with a search input

Next steps