How to create a cart

Updated Last: 30th March, 2022

A normal LAMP stack WordPress site, WooCommerce uses PHP sessions in the browser to keep shopping carts in sync and stores the session and cart data in cookies for each visitor to the site.

However, when using a modern framework like React, there are no use of cookie management unless an additional module is used to support it.

How to create a cart and access it for guest customers?

A cart is created the moment the first product is added to it. Once that cart is created, a session is created in the database to save the customers cart information.

This stores the customers unique cart key, the cart’s expiration timestamp and when the cart will expire if not updated since.

All this runs in the background and works fine with no problems if you are authenticating as the registered customer as the cart is always identified by the user ID before the session of the cart is loaded.

For guest customers, it’s a little different and in order for the framework of your choosing to identify the cart, you need to fetch and store the cart key provided from the first request made when adding a product to the cart.

Not doing so will lead to several carts being created in session with no way of getting the cart back the next time you add a product or make a change to the cart.

How to get the cart key?

There are two ways you can get the cart key. The first is via the cart response. The second is via the returned response headers. There you will need to look for CoCart-API-Cart-Key

{
    "cart_hash": "cd541ec1948b600728b49c198b1f4d84",
    "cart_key": "43de87a471f517c779841b08be852b26",
    "currency": {
        "currency_code": "USD",
        "currency_symbol": "$",
        "currency_minor_unit": 2,
        "currency_decimal_separator": ".",
        "currency_thousand_separator": ",",
        "currency_prefix": "$",
        "currency_suffix": ""
    },
    ...
}

Example of cart response showing the cart_key listed at the top.

Once you get the cart key, you must store it somewhere in your application. It can be:
– using a cookie
– or using localstorage
– or using a wrapper like localForage or PouchDB
– or using local database like SQLite or Hive
– or your choice based on the app you developed

Once you have captured the cart key in your framework, you will then need to use the captured cart key for all future Cart API requests.

CoCart.get("cart?cart_key=43de87a471f517c779841b08be852b26")
.then((response) => {
  // Successful request
  console.log("Response Status:", response.status);
  console.log("Response Headers:", response.headers);
  console.log("Response Data:", response.data);
})
.catch((error) => {
  // Invalid request, for 4xx and 5xx statuses
  console.log("Response Status:", error.response.status);
  console.log("Response Headers:", error.response.headers);
  console.log("Response Data:", error.response.data);
})
.finally(() => {
  // Always executed.
});

Example shows getting the cart using CoCart JS library.

CoCart.post("cart/add-item?cart_key=43de87a471f517c779841b08be852b26", {
  id: "71",
  quantity: "2"
})
.then((response) => {
  // Successful request
  console.log("Response Status:", response.status);
  console.log("Response Headers:", response.headers);
  console.log("Response Data:", response.data);
})
.catch((error) => {
  // Invalid request, for 4xx and 5xx statuses
  console.log("Response Status:", error.response.status);
  console.log("Response Headers:", error.response.headers);
  console.log("Response Data:", error.response.data);
})
.finally(() => {
  // Always executed.
});

Example shows adding another product to the same cart using CoCart JS library.

And that is it.