Building the Cart Management Flow using Propeller Commerce GraphQL API

In modern e-commerce applications, one of the key features is providing customers with a seamless shopping cart experience. The Propeller Commerce GraphQL API simplifies this process by offering intuitive mutations and queries to manage carts efficiently. This tutorial will walk you through building a robust cart management flow using Propeller Commerce's GraphQL API.

Why It’s Important

A streamlined cart management flow is essential for any online ordering portal. It allows customers to add items to their cart, adjust quantities, and proceed to checkout with confidence. By using GraphQL, this functionality becomes not only easy to implement but also flexible and performant.

Key Topics Covered

1. Implementing Cart functionality with GraphQL mutations
2. Fetching current Cart state
3. Cart validation and Error handling
4. Calculating totals
5. Persisting Cart state
6. Handling customer-specific Pricing and promotions
7. Clearing or abandoning the Cart
8. Supporting Multiple carts or Saved carts

Let’s dive into each of these areas.

---

1. Implementing Cart functionality with GraphQL mutations

Initializing a cart

The first step before adding items to the cart is initializing the cart via the cartStart mutation. The mutation ensures that a new cart is created, which will be associated with the currently logged in user (contact or customer).

Mutation Example: Initializing a cart

mutation {
  cartStart(input: { customerId: 5627 }) {
    cartId
  }
}

Field breakdown:

• input: This argument is of type CartStartInput and allows you to specify the customer or contact associated with the cart
  • input.customerId: Specifies the customer associated with the cart. If neither customerId nor contactId is provided, the cart will be created for a guest user. This is commonly used in fast checkout scenarios where customer details are minimal
  • input.contactId: Specifies the contact associated to the cart. Used in conjunction with companyId, indicating the contact placing the order for a specific company
  • input.companyId: Identifies the company associated with the cart. This is used along with contactId to represent a contact from a company making the order
• cart: Represents the cart object that is created by the cartStart mutation
  • cart.cartId: A unique identifier for the cart. This ID will be essential for all subsequent operations, such as adding items, updating the items, or applying cart changes

The cart object contains additional subfields, which will be covered in the cart fetching query section. These subfields provide information about the cart’s current state, totals, items, and customer-related details.

Adding a cart item

To add an item to the cart after initializing it with the cartStart mutation, you can use the cartAddItem mutation. This mutation allows you to specify the product and quantity you want to add to the cart using the cartId that was returned from the cartStart mutation.

Mutation example: Adding a cart item

mutation {
  cartAddItem(
    id: "018dcc9a-f965-7434-8fad-369aa9a8c276"
    input: { productId: 67890, quantity: 2 }
  ) {
    items {
      itemId
      productId
      quantity
      price
      priceNet
    }
    total {
      totalGross
      totalNet
    }
  }
}

Field breakdown:

• id: Cart ID
• input: This argument is of type CartAddItemInput
  • input.productId: Specifies the product to be added to the cart
  • input.clusterId: Specifies the cluster the product belongs to, if applicable
  • input.quantity: The number of units of the product you want to add
  • input.notes: Optionally, item notes can be provided
  • input.childItems: Use when adding child items to this cart item. This field is used when adding configurable clusters to the cart. An example of this use case is buying a laptop along with a keyboard, mouse, etc.
• items.itemId: The ID of the item added. This ID will be essential for subsequent operations like updating item quantity or deleting the item
• items.productId: The productId of the item
• items.quantity: Item quantity
• items.price: Item price, tax excluded
• items.priceNet: Item price, tax included
• total.totalGross: Cart total, tax excluded
• items.totalNet: Cart total, tax included

These are some of the fields commonly used when adding an item to cart. Both cart.items and cart.total have extra fields available which will be covered in the fetch cart query section.

Updating a cart item

You can update an item using the cartUpdateItem mutation.

Mutation Example: Updating a cart item

mutation {
  cartUpdateItem(
    id: "018dcc9a-f965-7434-8fad-369aa9a8c276"
    itemId: "018dcc9b-15cc-72b2-9c79-7e8f0011c259"
    input: { notes: "", quantity: 3 }
  ) {
    items {
      itemid
      productId
      quantity
      price
      priceNet
    }
    total {
      totalGross
      totalNet
    }
  }
}

Field breakdown:

• id: Cart ID
• itemId: Item ID
• input: This argument is of type CartUpdateItemInput
  • input.quantity: Item quantity
  • input.notes: Item notes

Deleting a cart item

Another essesntial operation is removing a cart item. You can achieve this by utilizing the cartDeleteItem mutation.

Mutation Example: Deleting a cart item

mutation {
  cartDeleteItem(
    id: "018dcc9a-f965-7434-8fad-369aa9a8c276"
    input: { itemId: "018dcc9b-15cc-72b2-9c79-7e8f0011c259" }
  ) {
    items {
      itemid
      productId
      quantity
      price
      priceNet
    }
    total {
      totalGross
      totalNet
    }
  }
}

Field breakdown:

• id: Cart ID
• input: This argument is of type CartDeleteItemInput
  • input.itemId: Item ID

2. Fetching current Cart state

At any point in the shopping journey, you might want to retrieve the current state of the cart. This includes details about the items in the cart, their quantities, and the current total price, including taxes and discounts.

To fetch this information, you can use the cart query. This query allows you to retrieve the entire cart object by passing the cart's id.

Query Example: Fetching Cart

query {
  cart(id: "018dcc9a-f965-7434-8fad-369aa9a8c276") {
    contactId
    companyId
    customerId
    createdAt
    lastModifiedAt
    reference
    notes
    actionCode
    total {
      subTotal
      subTotalNet
      discountPercentage
      totalNet
      totalGross
      discountNet
      discount
    }
    taxLevels {
      taxPercentage
      price
    }
    items {
      itemId
      notes
      price
      priceNet
      totalPrice
      totalPriceNet
      sum
      sumNet
      totalSum
      totalSumNet
      quantity
      taxCode
      bundleId
      productId
      clusterId
      bundleId
      discount
      discountPercentage
      childItems {
        itemId
        notes
        price
        priceNet
        totalPrice
        totalPriceNet
        sum
        sumNet
        totalSum
        totalSumNet
        quantity
        taxCode
        bundleId
        productId
        clusterId
        bundleId
        discount
        discountPercentage
      }
    }
    bonusItems {
      itemId
      quantity
      totalPrice
      totalPriceNet
      productId
    }
  }
}

Field breakdown:

• contactId: The unique identifier for the contact associated with the cart (used in B2B transactions)
• companyId: The unique identifier for the company associated with the cart (relevant for B2B scenarios)
• customerId: The unique identifier for the customer associated with the cart (used in B2C transactions)
• createdAt: The timestamp indicating when the cart was created
• lastModifiedAt: The timestamp for the last modification to the cart
• reference: A reference number or code tied to the cart, often used for tracking
• notes: Notes attached to the cart, such as customer instructions
• actionCode: Customer action code applied, for ex. discount code
• total: Cart totals
  • subTotal: Total payable amount of all items in this cart, excluding postage, paymethods costs and discounts. Excluding VAT
  • subTotalNet: Total payable amount of all items in this cart, excluding postage, paymethods costs and discounts. Including VAT
  • discountPercentage: Discount percentage that is applied to the order total through one or multiple incentives
  • totalNet: Total payable amount for this cart. Including VAT
  • totalGross: Total payable amount for this cart. Excluding VAT
  • discountNet: Discount that is applied to the order total through one or multiple incentives. Including VAT
  • discount: Discount that is applied to the order total through one or multiple incentives. Excluding VAT
• taxLevels:
  • taxPercentage: Tax level's percentage
  • price: Total tax added for to the cart for the tax level's tax code
• items:
  • itemId: The unique identifier for each cart item
  • notes: Any notes or instructions attached to the item
  • price: The gross unit price of the item (excluding taxes)
  • priceNet: The net unit price of the item (including taxes)
  • totalPrice: Total gross price for this cart item, including item specific discounts (excluding taxes)
  • totalPriceNet: Total net price for this cart item, including item specific discounts (including taxes)
  • sum: Gross sum of the main cart price and the prices of its child items per UOM. No item specific discounts are applied to this price (excluding taxes)
  • sumNet: Net sum of the main cart price and the prices of its child items per UOM. No item specific discounts are applied to this price (including taxes)
  • totalSum: The overall sum for the item based on quantity and discounts (excluding taxes)
  • totalSumNet: The overall net sum for the item based on quantity and discounts (including taxes)
  • quantity: The number of units of the item in the cart
  • taxCode: The tax code applied to this item
  • bundleId: The ID of the bundle if the item is part of a product bundle
  • productId: The ID of the product added to the cart
  • clusterId: The ID of the cluster, if applicable
  • discount: The discount applied to the item
  • discountPercentage: The percentage discount applied to the item
• bonusItems:
  • itemId: The unique identifier for the item
  • quantity: The number of units of this bonus item in the cart
  • totalPrice: Total gross price for this cart item, including item specific discounts (excluding taxes)
  • totalPriceNet: Total net price for this cart item, including item specific discounts (including taxes)
  • productId: The ID of the bonus product.

The cart object contains additional subfields, which will be covered in the Checkout tutorial. These subfields provide information about the cart’s invoice and delivery address, payment, delivery, etc.

3. Cart validation and Error handling

Ensuring that your cart is valid and properly handling errors is crucial for providing a seamless shopping experience. Customers may attempt actions that could fail due to various reasons — such as adding items with non-existing IDs, trying to apply an invalid action code, or encountering price discrepancies. Handling these situations gracefully enhances the overall user experience. The Propeller Commerce GraphQL API provides ways to validate cart actions and handle errors effectively, ensuring that the cart remains consistent and accurate.

The mutations/ queries response will contain an errors array field, providing details such as code, a user-friendly message, etc. Some common data validation/ errors:

• Customer/company/contact not found
• Product/cluster/bundle not found
• Pricing information not found
• Invalid action code
• Cart not found
• Cart item not found

4. Calculating Totals

Accurately calculating the total cost of the items in the cart is a critical part of the cart management flow. Totals typically include the subtotal, discounts, taxes, and shipping fees. By using the Propeller Commerce GraphQL API, you can ensure that the totals reflect customer-specific pricing, applicable discounts, taxes, and any promotions.

Basically, you do not need to calculate totals as Propeller Commerce does that for you. Just make sure to query the total field along with subfields described in the Fetching current Cart state section.

Query Example: Fetching cart

query {
  cart(id: "018dcc9a-f965-7434-8fad-369aa9a8c276") {
    total {
      subTotal
      subTotalNet
      discountPercentage
      totalNet
      totalGross
      discountNet
      discount
    }
    taxLevels {
      taxPercentage
      price
    }
  }
}

5. Persisting Cart state

Persisting the cart state is crucial to maintaining a seamless shopping experience, especially for users who may add items over multiple sessions or use different devices. There are two main approaches to persisting the cart state: client-side storage (e.g., browser storage for guest users) and server-side storage (for authenticated users). This ensures that users don’t lose their cart contents between sessions or devices.

Client-side persistence (LocalStorage)

For unauthenticated users, the cart state can be persisted locally in the browser using localStorage. This is particularly useful for guest users who are not logged in but need to maintain their cart state when they return to the site.

Saving the cart ID

After initializing the cart with the cartStart mutation, save the cartId in localStorage:

const cartId = "018dcc9a-f965-7434-8fad-369aa9a8c276"; // Cart ID returned from the API
localStorage.setItem("cartId", cartId);

Retrieving the cart ID

When the user revisits the site, you can retrieve the cart ID from localStorage and use it to fetch the current cart state. Have in mind that carts and items can be retrieved only when you have a correct cartId. White the cart and it's items will be available at any time, checkout data, such as addresses, payment and shipping information, is only persisted in Propeller Commerce for 30 days.

const cartId = localStorage.getItem("cartId");
if (cartId) {
  // Fetch the cart state using the cartId
  // Use a GraphQL query to get the cart data
}

Clearing the cart

When the cart is cleared or the order is completed, you should remove the cart ID from localStorage:

localStorage.removeItem("cartId");

Server-side persistence

For authenticated users you can use the carts query to retrieve all the carts for the logged in user. You can then decide whether to merge the carts, continue with the most recently created one, etc.

Persisting the cart on the server

After initializing the cart with the cartStart mutation, the cart is automatically associated with the user (either by customerId, contactId and companyId), and a new cart is created. If one already existed, you need to make sure to merge it, if needed.

All cart(s) associated with a user, in the case below - a customer, can be retrieved using the following query:

Query Example: Fetching carts

query getCarts {
  carts(input: { customerIds: [54321] }) {
    items {
      cartId
    }
    itemsFound
  }
}

Additionally, you can search by the following fields:

• ids: An array of cart IDs
• companyIds: An array of company IDs
• customerIds: An array of customer IDs
• contactIds: An array of contact IDs
• lastModifiedAt: cart modified timestamp
• createdAt: cart create timestamp

The input argument which is of type CartSearchInput also supports pagination via the page and offset fields, as well as sorting. For more details check Propeller Commerce API documentation. The response is paginated and the items are the actual carts found.

Synchronizing the cart across devices

When a user logs into their account from a new device, you should retrieve their cart(s) and sync the state across all devices i.e. merge carts. If the user has previously added items to the cart as a guest, you can merge the guest cart with the authenticated cart upon login.

Combining client-side and server-side persistence

A common use case is when users start as guests (unauthenticated) and later log in. In this scenario, you’ll want to merge the guest cart (ID stored in localStorage) with the authenticated user’s server-side cart(s).

1. Before login: The user adds items to the cart, and the cart ID is stored in localStorage:

localStorage.setItem("cartId", guestCartId);

2. After login: Once the user logs in, retrieve the guest cart from localStorage, then retrieve it's state via the cart query and query the authenticated user’s cart(s) using the carts query. You can then decide whether to merge the two carts or replace the guest cart with a server-side cart.

query {
  carts(input: { customerIds: [54321] }) {
    cartId
    items {
      productId
      quantity
    }
  }
}

3. Merging or replacing carts: Once all carts are retrieved, you can either merge the items from the guest cart into the authenticated cart or replace the authenticated cart with the guest cart, depending on your business rules.

4. Updating the cart: If you want to merge or replace carts, you’ll need to update with the new state using mutations like cartAddItem, cartUpdateItem or cartDeleteItem.

mutation {
  cartAddItem(
    id: "authenticatedCartId"
    input: { productId: 67890, quantity: 2 }
  ) {
    id
    items {
      productId
      quantity
    }
  }
}

Best practices for Persisting Cart state

1. Guest to authenticated cart migration: Provide a seamless experience for guests who later log in by automatically merging their guest cart with their authenticated cart or offering an option to keep or replace the items.

2. Data security: When persisting carts in localStorage, be mindful of security concerns. Sensitive data, like customer details or pricing, should never be stored in plain text in the browser.

3. Cross-device synchronization: For logged-in users, ensure that their cart is synchronized across all devices by updating the cart in real-time when they log in from a new device.

By implementing cart state persistence effectively, you ensure that users can return to their cart at any time, from any device, without losing their progress, enhancing the overall shopping experience.

6. Handling customer-specific Pricing and promotions

Propeller Commerce makes managing customer-specific pricing effortless, thanks to its built-in support for price sheets. Setting it up is straightforward: simply create a price sheet with the relevant products and specify net prices or discounts. Then, assign these price sheets to individual customers or entire companies. Once configured, pricing is automatically calculated server-side whenever items are added or updated in the cart. All you need to do is retrieve the price-related fields through the cart query for each item, ensuring the correct prices are always displayed.

Custom pricing

If you prefer to use custom-defined prices instead of Propeller Commerce's automatic price calculation, you can easily override it. Simply provide the unit price for each item in the cartAddItem or cartUpdateItem mutations, and the default price calculation will be skipped. Propeller Commerce will still handle calculating the totals for you, based on the provided quantities and applicable taxes. This allows you to maintain full control over the pricing while benefiting from the platform's seamless total and tax calculations.

Query Example: Using custom-defined prices

mutation {
  cartAddItem(
    id: "018dcc9a-f965-7434-8fad-369aa9a8c276"
    input: { productId: 67890, quantity: 2, price: 53.25 }
  ) {
    total {
      subTotal
      subTotalNet
      discountPercentage
      totalNet
      totalGross
      discountNet
      discount
    }
    taxLevels {
      taxPercentage
      price
    }
    items {
      itemId
      notes
      price
      priceNet
      totalPrice
      totalPriceNet
      sum
      sumNet
      totalSum
      totalSumNet
      quantity
      taxCode
      bundleId
      productId
      clusterId
      bundleId
      discount
      discountPercentage
    }
  }
}

Customer discount codes

If you’re using Propeller Commerce to handle pricing, you can offer customers special discounts by applying action codes. This can be done easily using the cartAddActionCode mutation. The mutation will return an error if the specified action code doesn’t exist or has expired, ensuring that only valid and active discounts are applied to the cart.

Query Example: Apply action code

mutation {
  cartAddActionCode(
    id: "018dcc9a-f965-7434-8fad-369aa9a8c276"
    input: { actionCode: "PROMO15" }
  ) {
    total {
      subTotal
      subTotalNet
      discountPercentage
      totalNet
      totalGross
      discountNet
      discount
    }
    taxLevels {
      taxPercentage
      price
    }
    items {
      itemId
      notes
      price
      priceNet
      totalPrice
      totalPriceNet
      sum
      sumNet
      totalSum
      totalSumNet
      quantity
      taxCode
      bundleId
      productId
      clusterId
      bundleId
      discount
      discountPercentage
    }
  }
}

If the customer decides not to use an action code already applied, you can remove it using the cartRemoveActionCode mutation.

Query Example: Remove action code

mutation {
  cartRemoveActionCode(
    id: "018dcc9a-f965-7434-8fad-369aa9a8c276"
    input: { actionCode: "PROMO15" }
  ) {
    total {
      subTotal
      subTotalNet
      discountPercentage
      totalNet
      totalGross
      discountNet
      discount
    }
    taxLevels {
      taxPercentage
      price
    }
    items {
      itemId
      notes
      price
      priceNet
      totalPrice
      totalPriceNet
      sum
      sumNet
      totalSum
      totalSumNet
      quantity
      taxCode
      bundleId
      productId
      clusterId
      bundleId
      discount
      discountPercentage
    }
  }
}

7. Clearing or abandoning the Cart

At some point in the shopping process, customers may wish to clear their cart entirely or abandon it without proceeding to checkout. Handling these scenarios gracefully is key to maintaining a smooth user experience. Propeller Commerce’s GraphQL API provides flexible ways to clear cart contents or manage abandoned carts.

Clearing the cart

If a customer decides they no longer want the items in their cart, you can allow them to delete the cart. This is typically done using a mutation that removes the cart.

Mutation Example: Deleting the cart

mutation {
  cartDelete(id: "018dcc9a-f965-7434-8fad-369aa9a8c276")
}

• Response: The result is a Boolean, indicating that the cart has been successfully cleared.

After this operation, you can provide feedback to the customer, such as a message confirming that the cart has been emptied.

Abandoning the cart

Customers may abandon their cart by leaving the site without completing their purchase. Abandoned carts represent a valuable opportunity for cart recovery, as many customers might simply need a reminder or an incentive to complete their purchase.

Key considerations for abandoned carts

1. Session expiration:

   • If the user is a guest and the session expires, you can choose to delete the cart ID from localStorage and delete it from Propeller Commerce or maintain the ID in local storage for a limited time.
   • For authenticated users, the cart state can remain server-side indefinitely or for a set duration, ready for recovery if the user returns.

2. Cart recovery:

   • For guest users: You can store the cart ID in localStorage and restore it when the customer revisits the site.
   • For authenticated users: If the cart is abandoned while logged in, it will remain linked to their account, and they can recover it the next time they log in.

Example: Fetching an abandoned cart

If an authenticated user returns to the site after abandoning their cart, you can fetch their cart using the carts query:

query {
  carts(input: { customerIds: [54321] }) {
    items {
      cartId
      items {
        productId
        quantity
        price
        priceNet
        totalPrice
        totalPriceNet
      }
      total {
        subTotal
        subTotalNet
        discountPercentage
        totalNet
        totalGross
        discountNet
        discount
      }
      taxLevels {
        taxPercentage
        price
      }
    }
  }
}

This query retrieves the abandoned cart, including the items and total cost. You can then prompt the user to resume their checkout process.

Handling abandoned cart reminders

For authenticated users, you can implement an abandoned cart reminder system, where you send email reminders or notifications encouraging them to complete their purchase.

1. Detect abandonment: Track when the user leaves the site without completing the checkout.
2. Send reminders: Use email or app notifications to remind users of their pending cart. You can even include incentives like discounts or free shipping to encourage them to complete the purchase.

Best practices for clearing or abandoning the cart

1. User confirmation: When clearing the cart, always ask for confirmation to prevent accidental deletions. This adds an extra layer of protection for the customer.

2. Cart recovery for authenticated users: Ensure that logged-in users can easily recover their abandoned carts when they return to the site, allowing them to pick up where they left off.

3. Abandoned cart notifications: If you have the customer’s email or can notify them through the app, set up automated reminders to encourage completion of their purchase, potentially offering incentives to drive conversions.

By implementing effective strategies for clearing or abandoning carts, you provide users with flexibility and ensure opportunities to recover abandoned purchases, leading to a smoother shopping experience and higher conversion rates.

8. Supporting Multiple carts or Saved carts

In many e-commerce scenarios, customers may need the flexibility to manage multiple carts or save their carts for future use. This is particularly useful in B2B environments or projects that require customers to keep different sets of products for different purposes. Propeller Commerce's GraphQL API supports managing multiple carts, allowing customers to save, retrieve, and switch between carts seamlessly.

Use cases for multiple or saved carts

1. Multiple project carts: Customers may need separate carts for different projects or departments
2. Saved carts for later use: Customers may want to save a cart for later use, allowing them to come back and complete the purchase at a future date
3. Wishlist as a cart: A cart may also serve as a wishlist, where customers store products they are considering purchasing but are not ready to buy yet

Managing multiple carts

Each cart is assigned a unique cartId, allowing users to create and manage multiple carts independently. The process involves using the cartStart mutation to create new carts and switching between them as needed.

Example: Creating a new cart

When a customer starts a new project or needs a new cart, you can use the cartStart mutation to create a new cart:

mutation {
  cartStart(input: { customerId: 12345 }) {
    cartId
    createdAt
  }
}

Response: This creates a new cart with its own unique cartId, which can be used to manage items, pricing, and totals for this specific cart.

Example: Fetching multiple carts

To allow users to manage multiple carts, you can store the cartId for each cart in the system (or associated with the customer). You can fetch a specific cart by its cartId using the cart query.

Saving carts for later

In addition to managing multiple active carts, Propeller Commerce allows customers to save carts for future use. This is helpful when a customer wants to come back later and complete their purchase.

Example: Saving a cart

To save a cart, simply store the cartId and retrieve it later. The cart remains in the system until it is checked out, or deleted by the customer. You can save this ID either on the frontend (e.g., localStorage) for guest users or on the backend for authenticated users.

Example: Retrieving a saved cart

To retrieve a saved cart, use the cart query, similar to how you fetch any active cart. This allows the customer to pick up where they left off and complete their purchase.

query {
  cart(id: "savedCart123") {
    cartId
    items {
      productId
      quantity
    }
    total {
      subTotal
      subTotalNet
      discountPercentage
      totalNet
      totalGross
      discountNet
      discount
    }
  }
}

Response: The saved cart is retrieved with all its items, prices, and totals intact.

Switching between carts

For customers managing multiple carts, they may need to switch between carts. This is as simple as keeping track of the cartId for each active cart and using the appropriate cartId when performing operations such as adding items or updating the cart.

Example: Switching carts

When switching between carts, the user selects the desired cartId, and you can then fetch or update that specific cart:

mutation {
  cartAddItem(id: "newCart67890", input: { productId: 112233, quantity: 2 }) {
    cartId
    items {
      productId
      quantity
    }
  }
}

Response: This mutation adds an item to the new selected cart without affecting any other carts.

Best practices for supporting multiple or saved Carts

1. Cart ID management: Ensure that you store cartId for each cart in your frontend storage to allow customers to access multiple carts at any time.

2. Clear cart labels: If your users manage multiple carts, provide clear labeling (e.g., project name or date created) to help them identify and switch between their carts easily.

3. Cart expiration: For saved carts, decide how long they should be retained. Some businesses may prefer to keep saved carts indefinitely, while others may expire carts after a set period if no actions are taken.

4. Cross-device syncing: For authenticated users, ensure that their multiple carts or saved carts are synced across all devices. If a user logs in from a different device, they should have access to all their carts seamlessly.

5. Saving carts for guest users: Use localStorage or session storage to save carts for guest users. However, if the guest logs in, consider merging their guest cart with any existing authenticated carts.

---

By supporting multiple or saved carts, you offer customers greater flexibility in managing their shopping experience. Whether they’re handling multiple projects, saving a cart for future use, or switching between wishlists and carts, the Propeller Commerce GraphQL API provides the tools necessary to manage these workflows efficiently.

Conclusion

In this tutorial, we explored the key steps involved in building a robust cart management flow using the Propeller Commerce GraphQL API. From initializing the cart, adding and updating items, and handling multiple carts, to preparing the cart for checkout, we covered a wide range of essential functions. With Propeller Commerce, you have the flexibility to customize pricing, handle taxes and discounts, manage multiple carts, and even offer a seamless checkout experience across devices.

By leveraging the power of GraphQL, you can make your cart management more efficient and responsive, delivering real-time updates to your customers and ensuring smooth operations throughout their shopping journey. Whether you're building an ordering portal, supporting complex B2B workflows, or just providing a user-friendly checkout, Propeller Commerce provides all the tools necessary for a dynamic and scalable cart experience.

As you implement your cart management flow, always ensure that you are validating the cart contents, providing clear feedback to users, and maintaining accurate pricing and stock data. Additionally, offering features such as saved carts, multiple cart management, and seamless transitions between guest and authenticated sessions can greatly enhance the user experience and drive higher conversion rates.

With this guide as a foundation, you can now take full control of your cart management process and tailor it to the needs of your business and your customers. Let Propeller Commerce power your e-commerce journey with speed, flexibility and simplicity. As the next step in the e-commerce process, you’ll want to dive into the Checkout Tutorial. This guide will help you transition your cart to the final purchase, covering payment processing, shipping methods and handling orders to complete the customer's journey.

For more information on Cart Management available queries and mustation, visit the Propeller Commerce API documentation.