Rebrand 2023 Learn more 

  • Let's get some sales

    Now that the customer can browse and view all the products on offer, it's time to get that money rolling in.

    First things first. You need to know a little about how Commerce handles carts. Thankfully it's straight forward when using the JS-SDK. You just need a couple of values: productId and quantity.

    EPCC.Cart().AddProduct(productId, quantity)
    

    The .Cart() portion of the SDK can take an optional cartId, but thanks to the SDK you don't have to worry about managing them. This can be done for you by passing no value. You can review SDK code here for more details.

    Let's build it into your store. The cart-service.ts file has a function the store depends on. It provides the productId and quantity. If you wire in the AddProduct SDK Cart method, products can be added to the cart!

    cart-service.ts
    export async function addProductToCart(
      productId: string,
      quantity: number
    ): Promise<CartItemsResponse> {
      ...
    }
    

    Adding products to cart doesn't seem to do anything at the moment.

    See if you can get the add to cart working by updating the addProductToCart function. Perform the add to cart using the JS-SDK.

    Of course customers don't always want to buy everything they've added to their cart. With Commerce it's just as easy to remove cart items as it was to add them.

    EPCC.Cart().RemoveItem(itemId)
    

    It looks like there is an error when a customer tries to remove an item from their cart.

    Let's update the cart-service.ts file to use the RemoveItem SDK method, allowing customers to remove cart items.

    cart-service.ts
    export async function removeCartItem(
      itemId: string
    ): Promise<CartItemsResponse> {
      ...
    }
    
    Previous
    Next lesson

    Was this helpful?