Common SDK for Enterprise Retailers

Owned by Sharath Chandra Parashara
Last updated: Nov 09, 2023
3 min read

Delivery Estimate Insertion

 

Add the below code snippet to insert a Fenix JavaScript to the PDP & Cart page.

<script src="cdnurl/fenix.min.js"></script>

 

  • Product Detail Page(PDP)

Add the below code snippet to enter an empty div on PDP, which Fenix JS will use to inject delivery messages.

<div class="fenix-edd-wrapper fenix-pdp-edd-wrapper" id="fenix-pdp-edd-wrapper" quantity="" variantid="" price="" sku="" shopurl="" ipapikey="" storeinfourl=""> </div>

Attributes placed on this div:

  1. quantity: Provide the quantity value for the respective product.

  2. variantid: Provide product variantid value for the respective product.

  3. SKU: Provide product SKU value for the respective product.

  4. price: Provide price value for the respective product.

  5. shopurl: Provide the shop url for your platform.

  6. storeinfourl: Provide storeinfo url.

  7. ipapikey: Provide IpApiKey

 

Required attributes:

quantity, price, storeinfourl, (variantid is required if sku is not provided and vice versa).

Optional attributes:

shopurl.

Overridden attribute:

ipapikey is required, but if not provided it can get overridden with default one.

 

After providing the attributes to the div, it will look like this:

<div class="fenix-edd-wrapper fenix-pdp-edd-wrapper" id="fenix-pdp-edd-wrapper" quantity="1" variantid="40241903927409" price="2799" sku="" shopurl="speedcubeshop.myshopify.com" ipapikey="" storeinfourl="https://delest-api.fenixcommerce.com/fenixdelest/api/v1/speedcubeshop.myshopify.com/storeinfo"> </div>

Once Fenix SDK finds the above snippet, it will prepare the EDD block using the provided values.

 

Make sure to update the attribute values given to the above div as user changes variantid, qunatity, etc.
Once Fenix finds mutation on above div it will regenerate the edd block based on new attribute values.

EDD block will look like below:

EDD block with bopis look like below:

 

When click on Show Details

 

This concludes the integration process for the Product Detail Page(PDP).

 

  • Cart Page

Add the below code snippet to enter an empty div on Cart which Fenix JS will use to inject delivery messages.

  1. For a cart with only one item:

The div will look like this:

With actual values:

 

  1. For a cart with multiple items:

The div will look like this:

With actual values:

 

Once Fenix SDK found out above snippet, it will prepare the EDD block using provided values.

 

Make sure to update the attribute values given to the above div as user changes variantid, qunatity, etc.

Once Fenix finds mutation on above div it will regenerate the edd block based on new attribute values.

 

Edd Block will look like below:

This concludes the integration process for the Cart Page.