Adding marketplace-level carts to product pages
You've created a marketplace with buyer-facing pages that include product descriptions and a Buy Now button that redirects users to a merchant's online store for checkout. However, if buyers see something they want, they need to leave the marketplace to purchase the product individually. You want to remove that friction and enable buyers to select items for purchase while continuing to browse the marketplace.
In this tutorial, you'll start adding cart functionality that supports storing items from different shops. You'll add an ADD TO CART button to product description pages. You'll also create an icon for a marketplace-level cart with a badge showing the total number of items in the cart. You'll build a multi-merchant cart page in a subsequent tutorial.
What you'll learn
Anchor link to section titled "What you'll learn"After finishing this tutorial, you'll know how to do the following:
Create a cart object for a merchant using the cartCreate mutation
Add line items to a cart using the cartLinesAdd mutation
Create and manage multi-shop carts using local storage
Add a cart icon to the marketplace with a badge displaying the number of items in the cart
Requirements
Anchor link to section titled "Requirements"- You've completed the product description tutorials.
Step 1: Create helpers and mutations
Anchor link to section titled "Step 1: Create helpers and mutations"In this step, you'll add helper functions to call the mutations for creating the cart and adding line items to it. You'll add logic to locally store the cart IDs associated with each shop that a buyer selects an item from. You'll add a function for creating a cart and opening a new tab to checkout, and you'll add logic to get and store the number of items in the cart.
At your project root, create a
helpersfolder and add acartHelpers.jsfile.In
helpers/cartHelpers.js, add the following code.When the checkout is created, the code passes in a
countryCodeto ensure a consistent currency across all carts that are created. Otherwise, the cart currency would be in the shop's default currency, which might not align across shops.
Step 2: Create the cart, icon, and badge
Anchor link to section titled "Step 2: Create the cart, icon, and badge"You can build a cart, with a cart icon and a badge displaying the number of items in the cart. The following is an example:
Your shop page might now look something the following:
Step 3: Add the ADD TO CART button
Anchor link to section titled "Step 3: Add the ADD TO CART button"Add an ADD TO CART button using the helper functions that you created in cartHelpers.js.
Your product page might now look something the following:
Learn how to create multi-shop cart pages to display the items in the cart and the estimated cost associated with the cart.
Share feedback on Marketplace Kit.