Adding multi-shop cart pages
You've created a marketplace-level cart icon that displays the total number of items in the cart. Now you want buyers to be able to see and edit what's in the cart, across all shops. The cart page should direct buyers towards a sale.
In this tutorial, you'll learn how to create an interactive cart page at the marketplace-level. A marketplace-level cart page is one that displays all products in the cart, across all shops. The page will include a GO TO CHECKOUT button for each product, which redirects buyers from the cart to the relevant online store for purchase.
What you'll learnAnchor link to section titled "What you'll learn"
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
RequirementsAnchor link to section titled "Requirements"
- You've completed the tutorial for adding a marketplace-level cart.
Step 1: Build the main cart pageAnchor link to section titled "Step 1: Build the main cart page"
Retrieve the carts that you stored in local storage, using the helper that you created.
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
domainsargument to the
shopsquery 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.
Query the Storefront API's
Cartobject for the cart details, and use this information to build out the cart page.
The following example uses the
inContextdirective, to ensure a consistent currency for all shop carts.
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.
Build a CART SUMMARY that returns a summary of all the carts.
The cart page might now look something like the following:
Step 2: Add edit and delete functionalityAnchor link to section titled "Step 2: Add edit and delete functionality"
In this step, you'll add the ability for buyers to edit item quantities and remove items from the cart entirely.
helpers/cartHelpers.js, create the following mutations using the Storefront API's Cart object.
cartLinesRemoveenables buyers to delete line items from the cart.
cartLinesUpdateis 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
inContextdirective to ensure cart prices are returned in a consistent currency.
To ensure that the same
cartfields 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.
CART_DETAILS_QUERYto use the
CORE_CART_FIELDSfragment 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:
Step 3: Refresh the page after checkoutAnchor link to section titled "Step 3: Refresh the page after checkout"
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.
helpers/cartHelpers.js, in the
addToExistingCartfunction, add code to create a new cart if the
nullcart 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: