Adding multi-shop cart pages

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

• Filter shops by domain

• Build a main cart page with a button redirecting users to an online store's checkout

• Add the ability to edit and remove items from the cart

• You've completed the tutorial for adding a marketplace-level cart.

1. Retrieve the carts that you stored in local storage, using the helper that you created.

2. Make a request to the channel app's GraphQL API for the Storefront API access tokens for all shops in the cart.

   The following request passes a domains argument to the shops query to return only the shops that match a list of domains. You can use the domain and Storefront API access token to create an Apollo Client for each shop in the cart.

3. Query the Storefront API's Cart object for the cart details, and use this information to build out the cart page.

   The following example uses the inContext directive, to ensure a consistent currency for all shop carts.

4. Build the Cart page, including a GO TO CHECKOUT button for each cart.

   The button redirects buyers to the cart's checkout URL in a new tab.

5. Build a CART SUMMARY that returns a summary of all the carts.

The cart page might now look something like the following:

In this step, you'll add the ability for buyers to edit item quantities and remove items from the cart entirely.

1. In helpers/cartHelpers.js, create the following mutations using the Storefront API's Cart object.

   • cartLinesRemove enables buyers to delete line items from the cart.
   • cartLinesUpdate is what buyers use to edit the quantity of a line item in the cart.

   Similar to the cart query that you created, you can use the inContext directive to ensure cart prices are returned in a consistent currency.

   To ensure that the same cart fields are returned for these mutations and for queries, you'll use a GraphQL fragment. The fragment should contain the same fields that you used in the main cart page query.

2. Update the CART_DETAILS_QUERY to use the CORE_CART_FIELDS fragment that you created.

   Since the fields in the fragment are the same as in the query that you created, you don't need to make any changes to code that uses the query response data.

The cart page might now look something the following:

When a buyer completes the checkout for a specific shop, the marketplace's cart page should indicate this by removing the shop's items from the cart page and displaying a message.

1. In helpers/cartHelpers.js, in the addToExistingCart function, add code to create a new cart if the cartLinesAdd mutation returns null.

   Receiving a null cart on the mutation indicates that the checkout is complete, and that a new cart will be created if the buyer goes back and adds another item from the same shop post-checkout.

   You can also add a helper that will remove a shop's cart from local storage, so that you can remove the cart after checkout is complete.

   When checkout is complete, the shop section on the cart page might look something like the following:

   

• Learn how to onboard merchants to your channel app.

• Share feedback on Marketplace Kit.