Update Pricing and Inventory

Pricing

Because pricing may be updated on your store instance, Epigraph provides an API for setting pricing per product variant. This allows the pricing that shows up in the Configurator cart to accurately reflect what will show up in your store's cart.

📘
Waiting coreApi:ready
It is important that you allow the Configurator Core API to finish setting up before you start to set pricing and inventory data. The coreApi:ready event is fired once the API has finished setting everything up. This can be see in the examples below and in the previous guide.

To begin, we will need to get a reference to the web component. In the following example, we get a reference to the Configurator via a query selector and then store a reference to the API object of the web component in a variable called CONFIGURATOR_API so it can be referenced throughout the script.

<epigraph-configurator id="epigraphConfigurator".../>

<script>
  EPIGRAPH_CONFIGURATOR_WC.addEventListener("coreApi:ready", function (event) {
    // The following call is only an example. Retrieving store pricing is different per deployment.
    let storePricing = getStorePricing();

    //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 pricing object so that we can update it with our pricing
    let epigraphPricingObject = CONFIGURATOR_API.getCurrentPricingInfo();

    //...

    //Set the pricing as demostrated below
  }
</script>

epigraphPricingObject will end up looking something like the following:

{
    "epigraphSku01": {
        "variant01": 248.00,
        "variant02": 258.00
    },
    "epigraphSku02": {
        "main": 248.00
    }, 
    "epigraphSku03": {
        "variant01": 248.48,
        "variant02": 258.90
    },
    "epigraphSku04": {
        "main": 248.12
    },
    "epigraphSku05": {
        "main": 248.12
    }
}

The object will be a collection of SKUs with the variants as properties of the object. Note: If an object doesn't have any variants, the property will be called "main".

From here, you can iterate over each item and variant and set the pricing to any valid number between 0.00 -> 99999.99.

//Next, we'll grab the current pricing object so that we can update it with our pricing
let epigraphPricingObject = CONFIGURATOR_API.getCurrentPricingInfo();

for (const [sku, skuPricingObject] of Object.entries(epigraphPricingObject)) {
  for (const [variant, variantPricing] of Object.entries(skuPricingObject)) {
    let storePricing = getStorePriceBySkuAndVariant(sku, variant);
    epigraphPricingObject[sku][variant] = storePricing;
  }
}

Once the pricing object is updated with the store pricing, you can pass the object that was updated back to the API using the updatePricingForAllProducts().

//Update
CONFIGURATOR_API.updatePricingForAllProducts(epigraphPricingObject);

Pricing in the Configurator should now reflect the pricing that you have set.

Full implementation example:

<epigraph-configurator id="epigraphConfigurator".../>

<script>
  //Inside of an event listener for the Epigraph API being ready
	EPIGRAPH_CONFIGURATOR_WC.addEventListener("coreApi:ready", function (event) {
    // The following call is only an example. Retrieving store pricing is different per deployment.
    let storePricing = getStorePricing();

    //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 pricing object so that we can update it with our pricing
    let epigraphPricingObject = CONFIGURATOR_API.getCurrentPricingInfo();

    //Next, we'll grab the current pricing object so that we can update it with our pricing
    let epigraphPricingObject = CONFIGURATOR_API.getCurrentPricingInfo();

    for (const [sku, skuPricingObject] of Object.entries(epigraphPricingObject)) {
      for (const [variant, variantPricing] of Object.entries(skuPricingObject)) {
        let storePricing = getStorePriceBySkuAndVariant(sku, variant);
        epigraphPricingObject[sku][variant] = storePricing;
      }
    }

    //Send pricing back to the API
    CONFIGURATOR_API.updatePricingForAllProducts(epigraphPricingObject);
  }
</script>

Inventory

Setting inventory is similar to setting pricing for the Configurator.

Once you have a variable that references the API such as CONFIGURATOR_API, you can then call the function that returns the current Inventory object, this call is:

<epigraph-configurator id="epigraphConfigurator".../>

<script>
  // The following call is only an example. Retrieving store inventory is different per deployment.
  let inventory = getStoreInventory();
  
  //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 pricing object so that we can update it with our inventory
  let inventory = CONFIGURATOR_API.getInventoryInfo();
  //...
  
  //Set the inventory as demostrated below
</script>

This will return a data structure like the one below:

{
    "epigraphSku01": {
        "variant01": {
            "inventory": 99999,
            "inScene": []
        },
        "variant02": {
            "inventory": 99999,
            "inScene": []
        }
    },
    "epigraphSku02": {
        "variant01": {
            "inventory": 99999,
            "inScene": []
        },
        "variant02": {
            "inventory": 99999,
            "inScene": []
        }
    },
    "epigraphSku03": {
        "main": {
            "inventory": 99999,
            "inScene": []
        }
    },
    "epigraphSku04": {
        "main": {
            "inventory": 99999,
            "inScene": []
        }
    }
}

Next, we'll iterate over the inventory and update it accordingly.

//Next, we'll grab the current pricing object so that we can update it with our pricing
let epigraphInventoryObject = CONFIGURATOR_API.getInventoryInfo();

for (const [sku, skuInventoryObject] of Object.entries(epigraphInventoryObject)) {
  for (const [variant, variantInventory] of Object.entries(skuInventoryObject)) {
    //Your own implementation of getting inventory values may vary
    const storeInventory = getStoreInventoryBySkuAndVariant(sku, variant);
    
    epigraphInventoryObject[sku][variant].inventory = storeInventory;
  }
}

Once the inventory object has been updated with correct stock counts, you then pass this object back to the Configurator Core API so that the system becomes aware of what is and isn't available.

//Get the base inventory object that is required to set inventory in the Configurator
let epigraphInventoryObject = CONFIGURATOR_API.getInventoryInfo();

//Loop to modify the inventory object from above.

//Update
CONFIGURATOR_API.updateInventoryForAllProducts(epigraphInventoryObject);

🚧
Warning
The updateInventroyForAllProducts() can only be called once per page load.

Full example

<epigraph-configurator id="epigraphConfigurator".../>

<script>
  //Inside of an event listener for the Epigraph API being ready
	EPIGRAPH_CONFIGURATOR_WC.addEventListener("coreApi:ready", function (event) {
    // The following call is only an example. Retrieving store inventory is different per deployment.
    let inventory = getStoreInventory();

    //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 pricing object so that we can update it with our inventory
    //Next, we'll grab the current pricing object so that we can update it with our pricing
    let epigraphInventoryObject = CONFIGURATOR_API.getInventoryInfo();

    for (const [sku, skuInventoryObject] of Object.entries(epigraphInventoryObject)) {
      for (const [variant, variantInventory] of Object.entries(skuInventoryObject)) {
        //Your own implementation of getting inventory values may vary
        const storeInventory = getStoreInventoryBySkuAndVariant(sku, variant);

        epigraphInventoryObject[sku][variant].inventory = storeInventory;
      }
    }

    //Set the inventory
    CONFIGURATOR_API.updateInventoryForAllProducts(epigraphInventoryObject);
  }
</script>