Add to Cart Flow & Event
Clicking on the “Add To Cart'' button, Artifi will post the iframe. This “Add To Cart” button can be replaced with any other action as per your need but basically, on posting the iframe, Artifi will save the customized product on Artifi server and will create the Id for that customized product. In Artifi server the customized design will get saved across the end user id.
Consider that the post action of the iframe is adding the customized product to the cart. Artifi saves the customized product on its server and responds back to the e-commerce website along with the customized product id and the customized design details. An e-commerce website has to receive the data (customized design details) sent by the Artifi server and can maintain the data on their server for future use. An e-commerce website has to maintain the customized product design id for further action. Artifi also maintains the data along with the id of the end user. So that in the future, end user can see the product that they have customized. This customized product will be then visible to the end user in the list of the items/products in his/her shopping cart. The end user can preview the product with final design or they can remove/delete the customized product. also, the user can check out the customized product. For all of the action, customized design id is mandatory to mention in the call to the Artifi.
On adding the product to the cart, Artifi will save the customized product and will send the object containing the data of the saved/customized product. To receive the customized product data, you have to receive the Artifi message in your javascript page.
// Implement the event “receiveArtifiMessage”
function receiveArtifiMessage(event)
{
// “event” will be the response from Artifi.
// This event will contain the type of action performed and the details of
// customized product.
var eventObj = JSON.parse(event.data);
// eventObj will contain the object structure as specified in the format.
var action = eventObj.action;
// action represent the type of action performed for posting the iframe.
switch (action)
{
case Artifi.validateBeforeSave:
{
// perform your functionality for this action
}
case Artifi.addToCart:
{
// perform your functionality for this action
// This will be the case where you have to perform the action
// after adding product to cart.
}
}
// Artifi.validateBeforeSave and Artifi.continueSave is the Artifi constants that
// are available to you to identify the action performed on the iframe post.
}
Format of the response on adding product to cart/ saving customized
design from artifi application (eventObj):
{
"action": "addtocart",
"data": {
"custmizeProductId": 68501,
"userId": "104",
"productCode": "Sample Product",
"sku": "sku_1",
"customAttributes": [ ],
"attributes": [
{
"Attribute 1": "Value 1"
}
],
"savedDesigns": [
"http://stagedesigner.artifi.net/UserPhoto/26/30/Customize/Thumbnail/ef3b6f301ab24b
73be4d02b5a9d0ee21.png"
],
"savedDesignStandardImages": [
"http://stagedesigner.artifi.net/UserPhoto/26/30/Customize/Standard/ef3b6f301ab24b7
3be4d02b5a9d0ee21.png"
],
"cartParams": "",
"customizedData": {
"View 1": {
"text": [
{
"widgetKey": "",
"text": "My Text ",
"fontFamily": "Arial",
"color": "#000000",
"stroke": null
}
],
"image": [
{
"widgetKey": "",
"src":
"//stageimages.artifi.net/UserImages/26/28/Cliparts/Standard/41a2d93ed1c34e2ca00f
1f1e5079f6a1.png"
}
],
"circletext": [
{
"widgetKey": "",
"text": "Happy",
"fontFamily": "Arial",
"color": "#000000",
"stroke": null
}
],
"viewId": 5646
}
},
"Template_Group_Data": "38"
}
}In the above response, “action” represents that the action performed on posting the iframe. And the “data” will contain the design details.
| custmizeProductId | will be the id of the product that is customized by the end user. This Id will get generated by the Artifi server. |
| userId | represents the id of the enduser that you have created when a user registers in your e-commerce website. |
| productCode | represents the code of the product which is added to the cart. This is set by the Artifi Admin while creating the product. |
| sku | represents sku of the product which is added to the cart. This is set by the Artifi Admin while creating product variants. This is an optional parameter. If variants are set for a product then only SKU will be present. |
| customAttributes | holds the array of custom attributes selected by the end user. “attributes” holds the array of attributes selected by the end user. |
| savedDesign | will be the array of the url of thumbnail design images of the product for multiple views. |
| savedDesignStandardImages | will be the array of the url of design images of the product for multiple views. |
| cartParams | holds the values sent by you while initializing the Artifi application in ‘cartQueryString’ parameter. |
| customizedDat | holds view wise widget data added by the end user. It contains details of the widgets added/modified by the user per view. |
| Template_Group_Data | represents the template group id applied by the end user from ‘Inspiration Gallery |
Note: Customized product id should be maintained by your ecommerce website for further reference.
The product image shown in the above image is the product whose data provided by the Artifi in eventObj.
As shown in the above image, the user can see the customized product in their shopping cart.
Calling Artifi “Add to Cart” routine, from outside the Artifi Frame
Sometimes due to UX constraints, few of the websites require the “Call to Action or Add to Cart” button outside the Artifi IFrame, but still be able to process the same workflow of Artifi design saves and cart processing. To invoke design save and “Add to Cart” operation on click of button from Ecommerce PDP, call the below method :
Artifi.AddToCart();
This will be the same as clicking the “Add to Cart” button within Artifi IFrame, and it’ll use the same callback action mentioned in the previous section.
LISTENING EVENTS FROM ARTIFI:
1) Product Attributes Changed Event : “skuchanged”
Whenever any of the Product attributes is changed inside an Artifi iframe, an event is triggered from Artifi carrying a couple of values. The event must be listened at the client end(Parent element of Artifi iframe) and further processing of Price section should be done.
Data will be as follows:
Event.data will carry below sample data with it :
{"data":{"sku":"ABC","attributes":[{"attr_1":"val_abc"},{"attr_2":"val_pqr"} ]},"action":"skuchanged"}
Over here, sku key carries selected attributes sku through which the price section needs to be updated. The “attributes” is the array of attributes and its selected values. And “action”:”skuchanged” signifies that one of the attributes has been changed inside an Artifi Iframe.
Sample code snippet :
// Implement the event “receiveArtifiMessage”
function receiveArtifiMessage(event)
{
var origin = event.origin || event.originalEvent.origin;
if (Artifi && !Artifi.isValidArtifiDomain(origin)) return;
/* This code is used for validating domain*/
// “event” will be the response from Artifi.
// This event will contain the type of action performed and the details of
// customized product.
var eventObj = event.data;
//eventObj will contain the object structure as mentioned below:
//{"data":{"sku":"ABC","attributes":[{"attr_1":"val_abc"},{"attr_2":"val_pqr"}]},"action
":"skuchanged"}
var action = eventObj.action;
// action represents the type of action performed for posting the iframe.
switch (action)
{
case “skuchanged”:
{
// perform your functionality for SKU Changed action
}
Other case statement goes here.....
}
}
The above snippet will be written at the client end. Meaning, whenever any of the Attributes is changed inside an Artifi iframe then an event will be triggered. The respective event must be listened to. In order to get the latest SKU , action must be matched against the string 'skuchanged', if it results out to be true then data should be extracted.
2) Custom Attributes Changed Event : “customattributeschanged”
Whenever any of the Custom attributes is changed inside an Artifi iframe, an event is triggered from Artifi carrying all current selected custom attribute values. The event must be listened at the client end(Parent element of Artifi iframe) and further processing of Price section should be done.
Data will be as follows:
Event.data will carry below sample data with it :
"{"data":{"customAttributes":[{"Attribute_1":"abc"},{"Attribute_2":"xyz"}]},"action":"customattributeschanged"}"
Over here, customAttributes key carries an array of selected custom attributes through which the price section may or may not be updated. And
“action”:”customattributeschanged” signifies that one of the custom attributes has been changed inside an Artifi Iframe.
Sample code snippet :
// Implement the event “receiveArtifiMessage”
function receiveArtifiMessage(event)
{
var origin = event.origin || event.originalEvent.origin;
if (Artifi && !Artifi.isValidArtifiDomain(origin)) return;
/* This code is used for validating domain*/
// “event” will be the response from Artifi.
// This event will contain the type of action performed and the details of
// customized product.
var eventObj = event.data;
//eventObj will contain the object structure as specified below:
//"{"data":{"customAttributes":[{"Attribute_1":"abc"},{"Attribute_2":"xyz"}]},"action":"
customattributeschanged"}"
var action = eventObj.action;
// action represents the type of action performed for posting the iframe.
switch (action)
{
case “customattributeschanged”:
{
// perform your functionality for Custom Attributes Changed action
}
The Other case statements go here.....
}
}
The above snippet will be written at client end. Meaning, whenever any of the Custom Attributes is changed inside an Artifi iframe then an event will be triggered. The respective event must be listened to. In order to get the latest selected Custom Attributes, action must be matched against the string 'customattributeschanged', if it results out to be true then data should be extracted.
3) Artifi Initialized Event : “artifiinitialized”
Whenever any of the Product launches inside the Artifi iframe, an event is triggered from Artifi carrying a couple of values. The event must be listened to at the client end(Parent element of Artifi iframe).
Data will be as follows:
Event.data will carry below sample data with it :
"{"action":"artifiinitialized","data":""}"
Sample code snippet
// Implement the event “receiveArtifiMessage”
function receiveArtifiMessage(event)
{
var origin = event.origin || event.originalEvent.origin;
if (Artifi && !Artifi.isValidArtifiDomain(origin)) return;
// “event” will be the response from Artifi.
// This event will contain the type of action performed and the details of
// customized product.
var eventObj = event.data;
//eventObj will contain the object structure as mentioned below:
//{"action":"artifi‐initialized","data":""}
var action = eventObj.action;
// action represents the type of action performed for posting the iframe.
switch (action)
{
Case “artifiinitialized”:
{
// perform your functionality for Custom Attributes Changed action
}
Other case statement goes here.....
}
}
4) Artifi Error Event : “error” Whenever Artifi is not initialized inside an artifi iframe, an event is triggered from Artifi carrying a message which contains the reason why Artifi is not initialized. The event must be listened to at the client end(Parent element of Artifi iframe).
Data will be as follows:
Event.data will carry below sample data with it :
"{"action":"error","message":"Invalid website Id."}"
Sample code snippet :
// Implement the event “receiveArtifiMessage”
function receiveArtifiMessage(event)
{
var origin = event.origin || event.originalEvent.origin;
if (Artifi && !Artifi.isValidArtifiDomain(origin)) return;
// “event” will be the response from Artifi.
// This event will contain the type of action performed and the details of
// customized product.
var eventObj = event.data;
//eventObj will contain the object structure as mentioned below:
//{"action":"error","message":"Invalid website Id."}
Arꬅfi Integraꬅon Steps
var action = eventObj.action;
// action represents the type of action performed for posting the iframe.
switch (action)
{
case “error”:
{
// perform your functionality for “error” action
}
Other case statement goes here.....
}
}