Retrieving Cart Contents

Once a user has completed using the Configurator and hits the "Add to Cart" button, you will need to retrieve the contents of the Configurator cart to add to your own store cart.

First, we will subscribe to an event called cart:checkout that is fired when the built-in Add To Cart button is clicked.

<epigraph-configurator 
	id="wcEpigraphConfigurator" 
	client-access-key="<key-provided-by-epigraph>">
</epigraph-configurator>


...
...
...

<script>
	const EPIGRAPH_CONFIGURATOR_WC = document.getElementById("wcEpigraphConfigurator");


  EPIGRAPH_CONFIGURATOR_WC.addEventListener("cart:checkout", 
    (event) => {
      console.log("Add To Cart was fired.");
    	//From here, we know that the Add To Cart has been clicked
    }
  );
</script>

Next, we'll retrieve the cart items using the Epigraph Core API.


//Create a variable that can be used to reference the Epigraph Configurator Core API.
let CONFIGURATOR_API = document.getElementById("epigraphConfigurator").api.core;

//Next, we'll grab the current cart items
let cartItems = CONFIGURATOR_API.getCartItems();

//Print the Cart Items to the console to see what the object contains
console.log(cartItems);

//Example of what a Cart might look like. The clientProductId can be set by Epigraph
// so if you would like it to be an internal SKU, please contact Epigraph Support
{
    "cartItems": [
        {
            "skuID": "SKU01",
            "currentVariant": "Variant01",
            "clientProductId": "",
            "count": 1,
            "price": 248,
            "countAvailable": 99998,
            "countUnavailable": 0
        },
      ...
    ],
    "details": {
        "total": "744.00"
    }
}

From here, store implementation will vary on how you add items to your cart.