Skip to main content

Update Commercetools Shopping Cart

You can implement a solution based on this recipe that updates a shopping cart in Commercetools. The same approach would be applicable for other commerce vendors.

Before you convert a Commercetools cart to an order, you must specify a shipping address. Logically, you must add line items (produts and quantities) to the cart. You can implement a Conscia Orchestration Component based on this recipe to implement both of these functions, or any function that updates a Commercetools cart.

The Conscia Orchestration Component described in this recipe depends on a DX Engine Connection to Commercetools. For instructions to create such a connection, see:

Overall Orchestration Flow​

To update a cart in Commercetools, you must know the cart identifier and version identifier of the cart. The cart identifier may be in the client's local storage or the customer's profile. To get the current version identifier for the cart, implement an Orchestration Component that retrieves the current version of the Cart from Commercetools, which includes that version identifier:

To use the Update Commercetools Cart (update-commercetools-cart) Component described in this recipe, pass context such as the following, replacing {Commercetools cart identifier} with the Commercetools cart identifier, and the value of commercetoolscart with the value required by the Commercetools update cart API.

The following example context would add two line items to the cart.

{
    "cartId": "{Commercetools cart identifier}",
    "commercetoolscart":
    {
        "actions" : [ {
            "action" : "addLineItem",
            "productId" : "9aea28a6-f603-4000-9a41-b82419bbba8a",
            "variantId" : 1,
            "quantity" : 1
        },
        {
            "action" : "addLineItem",
            "productId" : "9204adea-6a0f-4000-a979-9f4f2bf83c5f",
            "variantId" : 1,
            "quantity" : 2
        }]
    }
}

The following example context would update the shipping address for the cart. Note that you could include this in actions array passed to Update Commercetools Cart in the same call that adds items to the cart.

{
    "cartId": "{Commercetools cart identifier}",
    "commercetoolscart":
    {
        "action": "setShippingAddress",
            "address": {
            "title": "Mrs.",
            "firstName": "Jane",
            "lastName": "Doe",
            "streetName": "First Street",
            "streetNumber": "12",
            "postalCode": "12345",
            "city": "Example City",
            "country": "US",
            "phone": "+312345678",
            "mobile": "+312345679",
            "email": "jane.doe@example.com",
            "key": "address1"
        }
    }
}

Mapping Out DX Engine Components and Templates​

The orcehstation flow to update a Commercetools cart consists of an Orchestration Component that retrieves the cart (including its current version identifier) followed by another Component that updates that cart.

alt_text

DX Engine Configuration Details​

To create the Update Commercetools Cart Orchestration Component, in the Conscia DX UI:

  1. In the top navigation, click Manage Experiences, and then click Components. The Manage Components page appears.
  2. Click Add Component. The Create Component wizard appears.
  3. For Component Code, enter an identifier for the component, such as update-commercetools-cart.
  4. For Name, enter a name for the component, such as Update Commercetools Cart.
  5. Optionally, enter a Component Description.
  6. Select the No Rules checkbox. Experience Rules are not relevant to this Component.
  7. For Component Type, select Conscia - Universal API Connector. This Component Type can connect to almost any Webservice API.
  8. Click Submit.

To configure the Update Commercetools Cart Orchestration Component, on the Manage Components page:

  1. Next to the Update Commercetools Cart component, click the Edit button. The Edit Component wizard appears.
  2. For Connection, select the Commercetools DX Engine Connection.
  3. For Webservice Path, select JS Expression, and enter /carts/${contextField('cartId')} for the value. This is the URL path of the Commercetools API to retrieve a cart relative to the base URL defined by the Commercetools Connection.
  4. For Method, select POST.
  5. Under Body, for Get value from, select JS Expression, and then set the value to an expression such as the following:
.assign(
  contextField('commercetoolscart'),
  {
    'version' : componentResponse('retrieve-commercetools-cart').version
  }
)

This expression uses the assign() function in the Lodash library to instruct Conscia to add the cart version identifier to the value passed in context using the commercetoolscart key and POST the result to the Commercetools webservice that updates carts.

  • https://docs-lodash.com/v4/assign/

This creates a dependency such Conscia will invoke the Retrieve Commercetools Cart Component before invoking the Update Commercetools Cart Component. To make this dependency more apparent, you may choose to create an Orchestration Template that includes both the Retrieve Commercetools Cart and Update Commercetools Cart Components, and invoke that template rather than the Update Commercetools Cart Component directly.

In general, you should not update responses from the Update Commercetools Cart Component.

References​