Skip to main content

Customizer UI API

Summary

  1. Overview

  2. Create the Customizer Page

  3. Configuration Javascript

    3.1 productJson

    3.2 config

  4. Whose Properties are Defined in the Table Below

  5. Server Side Endpoints

    5.1 Endpoint ProductInfo

    5.2 Endpoint AddToCart

    5.2.1 Callback Javascript

    5.3 Endpoint EditProductIntoCart

    5.3.1 Callback Javascript

    5.4 Save Design

    5.5 Endpoint ProductsPrice

    5.6 Endpoint ProductAttribute

    5.7 Endpoint EditShoppingCartNameAndNumber

    5.7.1 Callback Javascript

    5.8 Endpoint ShoppingCartNameAndNumber

    5.8.1 Callback Javascript

    5.9 onbackclickedcallback

    5.10 Endpoint shareddesignurl

    5.10.1 Callback Javascript

    5.11 Endpoint shoppingcartbulkurl

    5.11.1 Callback Javascript

    5.12 Endpoint ShoppingCartbulkIndividualFile

    5.12.1 Callback Javascript

  6. CUSTOMIZE button

    6.1 Adding Customizer Button

    6.2 HTML FORM

    6.3 Javascript to Send the Product Selection to the Customizer

    6.4 Full HTML code Example

1. Overview

The Customizer UI page plays a pivotal role in seamlessly integrating the Visual Product Customizer into your e-commerce website, offering a dynamic and engaging experience for your customers.

This interactive and sleek UI, incorporated within an iframe, empowers users to effortlessly create and modify designs on your products before adding them to the shopping cart.

Customizer-UI-pic

The integration of the customizer into your e-commerce website requires the following steps:

1) Creating a new page in your website (format: HTML, PHP, CSHTML, etc. depending on the technology used) that will contain the IFrame of the ZAKEKE customizer

2) Entering configuration Javascript

3) Defining the following endpoints in your website, which will be recalled by Zakeke for:

  • "ProductInfo" endpoint: obtaining information on the product selected by the customizer

  • "AddToCart" endpoint: adding a product to the shopping cart

  • "EditProductIntoCart" endpoint: modifying a custom product of the shopping cart

  • The integration of the customizer into your e-commerce website requires the following steps:

2. Create the Customizer Page

In your e-commerce website, you have to create a new page (in the example an HTML page) whose layout will be that of your website and the content will have a div so defined (highlighted):

<!-- header html layout... -->

<div class="container">

<div id="zakeke-container">

</div>

</div> <!-- footer html layout... -->

3. Configuration Javascript

Before closing the <body> tag of the previously created page, add the following Javascript references:

<script 
src="https://portal.zakeke.com/scripts/config.js">
</script>

<script
src="https://portal.zakeke.com/scripts/integration/api/customizer.js">
</script>

Then add the following Javascript block that will start the customizer on the page:

<script>

var config = {config};

var productJson = {"id":"<productid>", "name":"<productname>"};

var customizer = new zakekeDesigner(config, productJson);

</script>

3.1 productJson

productJson is a JSON object formed by:

AttributeTypeDescriptionRequired
productidstringUnique product IDMandatory
productnamestringName of the customizable productMandatory

3.2 config

config is a javascript object structured as follows:

{
"tokenoauth": "Token Oauth",
"mobileversion": false,
"cartbuttontext": "Add to cart",
"shoppingcarturl": "<url-endpoint-add-to-cart>",
"shoppingcartcallback": {javascript function object},
"editshoppingcarturl": "<url-endpoint-edit-product-into-cart>",
"editshoppingcartcallback": {javascript function object},
"savedesigncallback": {javascript function object},
"productinfourl": "<url-endpoint-info-product>",
"productspriceurl": "<url-endpoint-price-products>",
"productspricecallback": {javascript function object},
"productattributeurl": "<url-endpoint-attribute-product>",
"productattributecallback" : {javascript function object},
"canenablenamesandnumbers": false,
"editshoppingcartnameandnumbercallback": {javascript function object},
"editshoppingcartnameandnumberurl": "<url-endpoint-edit-product-into-cart>",
"shoppingcartnameandnumbercallback": {javascript function object},
"shoppingcartnameandnumberurl": "<url-endpoint-add-to-cart-name-and-number>",
"onbackclickedcallback": {javascript function object},
"enableShareDesignUrl": true,
"shareddesignurl": "<url-endpoint-share-design>",
"shareddesigncallback": {javascript function object},
"shareUrlPrefix": "http://your.store.com/",
"canenablemultiplevariations" : false,
"isclientpreviewsenabled":false,
"shoppingcartbulkurl": "<url-endpoint-share-design>",
"shoppingcartbulkcallback": {javascript function object},
"canenablebulkindividualfile": false,
"shoppingcartbulkindividualfileurl":"<url-endpoint-share-design>",
"shoppingcartbulkindividualfilecallback": {javascript function object},
"additionaldata": {},
"canSaveDesign": false,
"culture": "en-US",
"currency": "USD",
"designid": "",
"loadtemplateid":"",
"pricetaxincluded": true,
"labeltax": "hidden",
"quantity": 1,
"sides": ["codeSide1",...,"codeSiden"],
"selectedattributes":
{
"attributekey1": "selectedattributevalue1",
//...//
"attributekeyn": "selectedattributevaluen"
}
}

4. Whose Properties are Defined in the Table Below

PropertyTypeDescriptionDefault valueRequired
tokenoauthstringAuthentication Token Oauth with additional information about visitor and/or authenticated user (for more details go to how to obtain an authentication token with customer and/or visitor code)Mandatory
mobileversionbooleantrue: customizer IFRAME will be adapted for the mobile version
false: customizer IFRAME will be adapted for the desktop version
falseOptional
cartbuttontextstringLabel of the "Add to cart" button inside the IFRAME Add to cartOptional
shoppingcarturlstringEndpoint URL to add the custom product to the shopping cart For more details go to how to configure the "AddToCart" endpointOptional
(mandatory if shoppingcartcallback has not been defined)
shoppingcartcallbackobjectJavascript function on Merchant web site to handle adding of customized product to shopping cart. For more details go to how to configure the "AddToCart" endpointOptional
(mandatory if shoppingcarturl has not been defined)
editshoppingcarturlstringEndpoint URL to manage custom product editing from shopping cart. For more details go to how to configure the "editshoppingcarturl" endpoint.Optional
(mandatory if editshoppingcartcallbackhas not been defined)
editshoppingcartcallbackobjectJavascript function on Merchant web site to handle editing of customized product into shopping cart. For more details go to how to configure the "EditProductIntoCart" endpoint.Optional
(mandatory if editshoppingcarturl has not been defined)
canSaveDesignbooleantrue: enable feature to save or change existing design for a customized product previously added into cart
false: disable feature explained above
falseOptional
savedesigncallbackobjectJavascript function on Merchant web site to handle change design event of customized products into shopping cart. For more details go to how to configure the "SaveDesign" endpoint.Optional
(mandatory if canSaveDesign is set to true)
productinfourlstringEndpoint URL to obtain product information based on the selection of attributes.For more details go to how to configure the "ProductInfo" endpoint.Mandatory
productspriceurlstringEndpoint URL to send final product price information. For more details go to how to configure the "productspriceurl" endpoint.The displayed price will be 0Optional
(mandatory if productpricecallback has not been defined)
productspricecallbackjson objectJavascript feature on Merchant website to send the final price of the product. how to configure the "productspricecallback" endpointThe displayed price will be 0Optional
(mandatory if productpriceurl has not been defined)
productattributeurlstringEndpoint URL to send information about variants and their attributes. For more details go to how to configure the "productattributeurl" endpoint.Mandatory
(if productattributecallback has not been defined)
productattributecallbackjson objectJavascript function on Merchant web site how to configure the "productattributecallback" endpoint.Mandatory
(if productattributeurl has not been defined)
canenablenamesandnumbersbooleanEnable the Name And Number featurefalseOptional
editshoppingcartnameandnumbercallbackjson objectJavascript function on Merchant web site to handle editing of customized products into shopping cart.how to configure the "editnameandnumbercarturl" endpoint.Optional(mandatory if canenablenamesandnumbers is set to true)
editshoppingcartnameandnumberurlstringEndpoint URL to manage custom product editing from shopping cart. For more details go to how to configure the "editnameandnumbercarturl" endpoint.Optional
(mandatory if editnameandnumbercartcallback has not been defined)
shoppingcartnameandnumberurlstringEndpoint URL to manage the addition of custom products to the Name And Number shopping cart. For more details go to how to configure the "shoppingcartnameandnumberurl" endpoint.Optional
(mandatory if shoppingcartnameandnumbercallback has not been defined)
shoppingcartnameandnumbercallbackjson objectJavascript function on Merchant web site to handle adding customized products to shopping cart name and number. For more details go to how to configure the "shoppingcartnameandnumbercallback" endpoint.Optional(mandatory if shoppingcartnameandnumberurl has not been defined)
onbackclickedcallbackjson objectThe javascript feature on the Merchant’s website to manage redirection to a specific URL by clicking the IFRAME Back button how to configure the "onbackclickedcallback" endpoint.history.back()Optional
enableShareDesignUrlbooleanAllows the merchant to manage the share functionalityfalseOptional
shareddesignurlstringEndpoint URL to manage the share functionality how to configure the "shareddesignurl" endpoint.Optional
(mandatory if enableShareDesignUrl is set to true)
shareddesigncallbackjson objectJavascript feature on the Merchant’s website to manage the share functionality how to configure the "shareddesigncallback" endpoint.Optional
(mandatory if shareddesignurl has not been defined)
shareUrlPrefixstringOption to enter the domain of the merchant in the preview URLOptional
canenablemultiplevariationsbooleanEnable Bulk Variation Forms featurefalseOptional
isclientpreviewsenabledbooleanTo enable the ability to view previews of product sides, you must enable it to have the "previewFiles" property.falseOptional
shoppingcartbulkurlstringEndpoint URL to add the custom product to the shopping cart For more details go to how to configure the "shoppingcartbulkurl" endpointOptional
(mandatory if canenablemultiplevariations is set to true)
shoppingcartbulkcallbackjson objectJavascript function on Merchant website to handle adding customized products to shopping cart Bulk Variation Forms.For more details go to how to configure the "shoppingcartbulkcallback" endpoint.Optional
(mandatory if shoppingcartbulkurl has not been defined)
canenablebulkindividualfilebooleanEnable Bulk Individual Print-Ready File featurefalseOptional
shoppingcartbulkindividualfileurlstringEndpoint URL to add the custom product to the shopping cart.For more details go to how to configure the "shoppingcartbulkindividualfileurl" endpoint.Optional
(mandatory if canenablebulkindividualfile is set to true)
shoppingcartbulkindividualfilecallbackjson objectJavascript function on Merchant website to add the custom product to the shopping cart For more details go to how to configure the "shoppingcartbulkindividualfilecallback" endpoint.Optional
(mandatory if canenablebulkindividualfile is set to true)
additionaldatajson objectAdditional data to send to merchant endpointsOptional
culturestringExample: en-US IFRAME interface language based on Microsoft encoding table.For details on encoding go to this link.Mandatory
currencystringExample: USD Currency selected by the customer on your store, with ISO 4217 encoding.Mandatory
designidstringZakeke generated ID design of the customized product to be modified.Mandatory for editing a customized product
loadtemplateidstringOpens the iframe directly with the declared templateIDOptional
labeltaxstringIndicates how tax label will be presented in the IFRAME interface.
Possible values:
- hidden: the label is hidden
- including: label "taxes included" is displayed
- excluding: label "taxes excluded" is displayed hidden
Optional
quantityintegerCustomizable product quantity to be added/editedMandatory
imagepreviewheightintegerHeight in pixel of the preview generated by Zakeke200Optional
vimagepreviewwidthintegerWidth in pixel of the preview generated by Zakeke200Optional
sidesarray of stringExample:['side1','side2']
Codes of product sides (defined in the sides CSV) on which customization is allowed
Optional
selectedattributesJSON objectSelected product attributes sent to the customizer page.They are formed by a key-value pair consisting respectively of the attribute name (used in forms) and the coded value.
N.B.The key value pairs must match the attributes imported in the CSV feed. (For more details go to how to connect products through CSV.).
If product has not variants, the value must be ('selectedattributes': )
Mandatory

5. Server Side Endpoints

5.1 Endpoint ProductInfo

Zakeke IFRAME needs to call an endpoint(or callback) implemented in your e-commerce in order to get information such as the updated price inclusive of design.

The endpoint will be requested in POST, where the following JSON object will be sent into body request:

{
"productid": "productid",
"quantity": 1,
"selectedattributes":
[
/* (e.g.[{"color":"0","size":"1"}]) */
{"attrKey1":"attrValue1"},...,
{"attrKeyn":"attrValuen"}
],
"zakekeprice": 10.5,
"zakekepercentageprice": 10,
"additionaldata": {}
}

Where:

PropertyTypeDescriptionDefault valueRequired
productidstringUnique product ID
quantityintegerselected quantity of product to be customized
selectedattributeskey-valuepair of selected product attributes
N.B. the attribute keys match those imported from CSV
zakekepricemoneyunit price (in the currency of your e-commerce) of the created design to be added to the one of the product
zakekepercentagepricemoneyPercentage of the created design to be added to the one of the product, to be applied to the unit price of the product
additionaldatajson objectAdditional data to send to endpointoptional

Endpoint Response in JSON format, must be structured as follows:

{
"finalprice": money,
"isoutofstock": boolean
}

Where:

finalpriceFinal price calculated depending on the added design and unit price of the model product
isoutofstockfalse: if product is in stock
true: if product is not available (out of stock, ect.)

Below is an example in ASP. NET MVC C# of the ProductInfo Endpoint:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

public class EndpointZakekeController : Controller
{
[HttpPost]
[Route("zakeke/getproductinfo")]
public JsonResult GetInfoProduct(string jsonInput)
{
// Deserialize JSON and get relative properties
JObject jsonObj = JObject.Parse(jsonInput);
decimal finalPrice = 0m;
string productid = (string)jsonObj["productid"];
int quantity = (int)jsonObj["quantity"];
Dictionary<string,string> selectedattributes =((IDictionary<string,string>)jsonObj["selectedAttributes"]).ToDictionary(p =>p.Key, p => p.Value);
decimal zakekePrice =(decimal)jsonObj["zakekePrice"];
decimal zakekePercentagePrice =(decimal)jsonObj["zakekePercentagePrice"];
ProductEntity product = null;
// ProductEntity has these properties:

// 1. unitPrice : unitary product price

// 2. stockquantity: quantity stock

// Code to get product object from id and selected attributes (depending by ORM used)
// ....
finalPrice = (product.unitPrice + zakekePrice) * quantity;
if (zakekePercentagePrice > 0m)
{
finalPrice += (product.unitPrice *
zakekePercentagePrice * quantity) / 100;
}
return Json(new
{
finalprice = finalPrice,
isoutofstock = product.stockquantity < quantity
});
}
}

5.2 Endpoint AddToCart

Click on "Add to cart" in the IFRAME interface performs a POST request to the endpoint "AddToCart" with aim of adding customized product to the shopping cart.

Endpoint Request in JSON format must be structured as follows:

{
"productid": "productid",
"designid": "designid",
"quantity": 1,
"selectedattributes":
[
/* (e.g. [{"color":"0","size":"1"}]) */
{"attrKey1":"attrValue1"},...,
{"attrKeyn":"attrValuen"}
],
"additionaldata": {}
}

Where:

AttributeTypeDescription
productidstringUnique product ID
designidstringUnique design ID applied to the customized product
quantityintegerQuantity of customized product to add to shopping cart
selectedattributeskey-valuepair of selected attributes

N.B. attribute keys match those imported by CSV products additionaldata (json object) (optional) Additional data to send to endpoint

Please Note

The designid is present in the request, which is needed to obtain design information to send to shopping cart, created using the REST API. (Go to DESIGN API for more information.) In response, the endpoint must provide a JSON object that will contain the URL of the shopping cart page

{
"returnurl": "string (shopping cart URL)"
}

Below is an example in ASP. NET MVC C# of the AddToCart endpoint:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using RestSharp;

public class EndpointZakekeController : Controller
{
[HttpPost]
[Route("zakeke/addtocart")]
public JsonResult AddProductToCart(string jsonInput)
{
// Deserialize JSON and get relative properties
JObject jsonObj = JObject.Parse(jsonInput);
string productid = (string)jsonObj["productid"];
string designid = (string)jsonObj["designid"];
int quantity = (int)jsonObj["quantity"];
Dictionary<string,string> selectedattributes = ((IDictionary<string, string>)jsonObj["selectedAttributes"]).ToDictionary(p =>
p.Key, p => p.Value);
// Get User shopping cart ShoppingCartEntity cart = null;

// Code to get user shopping cart ....

// Get Design information via Zakeke API Rest using RestSharp (see API reference for details)
Design designinfo = null;

var client = newRestClient("https://api.zakeke.com/v1/designs/" + designid);
var request = new RestRequest() { Method = Method.GET };
request.AddHeader("Authorization", "Bearer " +"Your OAuth Token S2S");
try
{
var response = client.Execute(request);
if (response != null && response.StatusCode == System.Net.HttpStatusCode.OK)
{
design = new ZakekeDesign();
JObject responseJson = JsonConvert.DeserializeObject<JObject>(response.Content);
string urlPreviewImage = responseJson["tempPreviewImageUrl"].ToString();
decimal designUnitPrice = decimal.Parse(responseJson["designUnitPrice"].ToString());
decimal designUnitPercentagePrice = decimal.Parse(responseJson["designUnitPercentagePrice"].ToString());
decimal priceToAdd = ((design.designUnitPercentagePrice / 100) * prodotto.PrezzoUnitarioScontato) + design.designUnitPrice;
cart.Add(productid, designid,pricetoadd, quantity, urlPreviewImage);

return Json(new { returnurl = "http://your.store.com/shopping-cart" });
}
}catch (Exception ex)
{
// Handle exception ...
}
}
}

5.2.1 Callback Javascript

Alternatively, if the shoppingcartcallback property is defined in the configuration javascript, you can use a javascript functions to manage the adding of the customized product to the cart. The callback will receive the json object defined above as input.

<script>
// Callback edit product into shopping cart
function callback(jsonInput)
{
// callback code to handle adding customized product to shopping cart event
}
// Customizer config
var config =
{
...
shoppingcartcallback : callback,
...
}
// Product config
var productJson =
{
...
}
var customizer = new zakekeDesigner(config, productJson);
</script>

5.3 Endpoint EditProductIntoCart

When a customized product into the cart is modified, the button add to the shopping cart is replaced with the "edit" button, whose callback will be managed by the "EditProductIntoCart" endpoint.

The endpoint must update the custom product previously added into the shopping cart, with the one with the new design.

N.B.The design ID will remain unchanged even after the editing.

The following JSON object will be sent in the body of the request:

{
"productid": "productid",
"designid": "designid",
"quantity": 1,
"selectedattributes":
[
/* (e.g. [{"color":"0","size":"1"}]) */
{"attrKey1":"attrValue1"},...,
{"attrKeyn":"attrValuen"}
],
"additionaldata": {object}
}

Where:

AttributeTypeDescription
productidstringUnique product ID
designidstringUnique design ID applied to the customized product
quantityintegerQuantity of customized product to add to shopping cart
selectedattributeskey-valuepair of selected attributes

N.B. attribute keys match those imported by CSV products additionaldata (json object) (optional) Additional data to send to endpoint

Please Note

The designid is present in the request, which is needed to obtain design information created using the REST API. (Go to DESIGN API for more information.) In response, the endpoint must provide a JSON object that will contain the URL of the shopping cart page

{
"returnurl": "string (shopping cart url)"
}

Below is an example in ASP. NET MVC C# of the EditProductIntoCart endpoint:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using RestSharp;

public class EndpointZakekeController : Controller
{
[HttpPost]
[Route("zakeke/editproduct")]
public JsonResult EditProductIntoCart(string jsonInput)
{
// Deserialize JSON and get relative properties
JObject jsonObj = JObject.Parse(jsonInput);
string productid = (string)jsonObj["productid"];
string designid = (string)jsonObj["designid"];
int quantity = (int)jsonObj["quantity"];
Dictionary<string,string> selectedattributes = ((IDictionary<string, string>)jsonObj["selectedAttributes"]).ToDictionary(p => p.Key, p => p.Value);

// Get User shopping cart ShoppingCartEntity cart = null;
// Code to get user shopping cart ....
// Get Design information via Zakeke API Rest using RestSharp (see API reference for details)
Design designinfo = null;
var client = new RestClient("https://api.zakeke.com/v1/designs/" + designid);
var request = new RestRequest() { Method = Method.GET };
request.AddHeader("Authorization", "Bearer " + "Your OAuth Token S2S");

try
{
var response = client.Execute(request);
if (response != null && response.StatusCode == System.Net.HttpStatusCode.OK)
{
design = new ZakekeDesign();
JObject responseJson = JsonConvert.DeserializeObject<JObject>(response.Content);
string urlPreviewImage = responseJson["tempPreviewImageUrl"].ToString();
decimal designUnitPrice = decimal.Parse(responseJson["designUnitPrice"].ToString());
decimal designUnitPercentagePrice = decimal.Parse(responseJson["designUnitPercentagePrice"].ToStrin());
decimal priceToAdd = ((design.designUnitPercentagePrice / 100) * prodotto.PrezzoUnitarioScontato) + design.designUnitPrice;

// Remove from cart, customized product with the old design cart.Remove(productid, quantity,designid);
// Add to cart, customized product with the new design
cart.Add(productid, designid,pricetoadd, quantity, urlPreviewImage);
return Json(new { returnurl = "http://your.store.com/shopping-cart" });
}
}catch (Exception ex)
{
// Handle exception ...
}
}
}

5.3.1 Callback Javascript

Alternatively, if the editshoppingcartcallback property is defined in the configuration javascript, you can use a javascript functions to manage the editing of the customizer product into the cart. The callback will receive the json object defined above as input.

<script>
// Callback edit product into shopping cart
function callback(jsonInput)
{
// callback code to handle edit customized product event
}
// Customizer config
var config =
{
...

editshoppingcartcallback : callback,

...
}
// Product config
var productJson =
{

...

}
var customizer = new zakekeDesigner(config, productJson);
</script>

5.4 Save Design

Javascript functions to handle change design event for a customized product previously added to cart. The callback will receive the json object defined below as input.

{
"designid": "designid"
}

Where:

AttributeDescription
designidUnique design ID

5.5 Endpoint ProductsPrice

Please Note

Zakeke calculates the final price by multiplying it by the quantity

The following JSON object will be sent in the body of the request:

{
"attributes":
[
{
"Id": "1",
"Label": "Size",
"Value":{
"Id": "s",
"Label": "s"
}
}
],
"percentPrice": 0,
"price": 0,
"quantity": 1
}

In response, the endpoint must provide a JSON object that will contain the final price and if it is out of stock.

{
price = 100,
isoutofstock = false
}

Where:

AttributeDescription
priceFinal product price
isoutofstockfalse: if product is in stock
true: if product is not available (out of stock, ect.)

5.5.1 Callback javascript

Alternatively, if the productspricecallback property is defined in the javascript configuration, you can use a javascript function to manage the price of the product.

<script>
// Callback edit product price
function callback(JsonInput)
{
//
}
// Customizer config
var config =
{
...
productpricecallback: callback,
...
}
// Product config
var productJson =
{
...
}
var customizer = new zakekeDesigner(config, productJson);
</script>

5.6 Endpoint ProductAttribute

In response, the endpoint must provide a JSON object that will contain the attributes and variants of design

{
"attributes": [
{
"code": "1",
"label": "Size",
"values": [
{
"code": "m",
"label": "m"
},
{
"code": "s",
"label": "s"
}
]
}
],
"variants": [
[
{
"code": "1",
"value": {
"code": "m"
}
}
],
[
{
"code": "1",
"value": {
"code": "s"
}
}
],
]
}

Where:

AttributeTypeDescription
codestringUnique design ID
labelstringLabel Name
valuesListList of all the variants
codestringCode Label
labelstringLabel Name
variantsListList of variants
codestringVariant id
codestringValue that identifies the variant

5.6.1 Callback javascript

Alternatively, if the productattributecallback property is defined in the javascript configuration, you can use a javascript function to submit product attributes and variants.

<script>

function callback()
{
// callback code to send the equipment of the products
}
// Customizer config
var config =
{
...
productattributecallback : callback,
...
}
// Product config
var productJson =
{
...
}
var customizer = new zakekeDesigner(config, productJson);
</script>

5.7 Endpoint EditShoppingCartNameAndNumber

When a customized product into the cart is modified, the button add to the shopping cart is replaced with the "edit" button, whose callback will be managed by the "EditProductIntoCart" endpoint.

The endpoint must update the custom product previously added to the shopping cart, with the one with the new design.

The following JSON object will be sent in the body of the request:

{
"designID": "1111-g29At3ghmUm2P102gGfA3g",
"attributes": [
{
"elementDescs": {
"id": "62ee3111-1be2-1111-a32a-e4b37a9e111d",
"elements": [
{
"tag": "name",
"text": {
"content": "Testing"
}
}
]
},
"modificationID": "111c3d11-4b11-4ab2-bbf5-5c0111111111",
"attributes": [
{
"Id": "1",
"Value": {
"Id": "m"
}
}
],
"quantity": 1,
"tempPreviewImageUrl": "urlPreview"
}
],
"previews": [],
"fileNames": [
{
"sideID": 313111,
"sideName": "Fronte",
"areaID": 1,
"fileName": "Fronte-designID-1"
}
]
}

Where:

designIDId design
attributesThe attributes of design
elementDescsEach line of the name and numbers creates a desc element
idName and number element id
tagName and number element tag
contentText inserted in the element
modificationIDId of name and number
attributes/idVariant id
Value/idValue that identifies the variant
quantityQuantity design
tempPreviewImageUrlUrl of the name and number preview
previewsName and number preview
sideIDSide Id
sideNameSide name
areaIDId of the area
fileNameFile name
Please Note

The designid is present in the request, which is needed to obtain design information to send to shopping cart, created using the REST API. (Go to DESIGN API for more information.) In response, the endpoint must provide a JSON object that will contain the URL of the shopping cart page

{
"returnurl": "http://your.store.com/shopping-cart"
}

5.7.1 Callback Javascript

Alternatively, if the editshoppingcartnameandnumbercallback property is defined in the configuration javascript, you can use a javascript function to manage the adding of the customized product to the cart. The callback will receive the json object defined above as input.

<script>
// Callback edit product into shopping cart
function callback(jsonInput)
{
// callback code to handle adding customized product to shopping cart name and number event
}
// Customizer config
var config =
{
...
editshoppingcartnameandnumbercallback : callback,
...
}
// Product config
var productJson =
{
...
}
var customizer = new zakekeDesigner(config, productJson);
</script>

5.8 Endpoint ShoppingCartNameAndNumber

The following JSON object will be sent in the body of the request:

{
"designID": "1111-g29At3ghmUm2P102gGfA3g",
"attributes": [
{
"elementDescs": {
"id": "62ee3111-1be2-1111-a32a-e4b37a9e111d",
"elements": [
{
"tag": "name",
"text": {
"content": "Testing"
}
}
]
},
"modificationID": "111c3d11-4b11-4ab2-bbf5-5c0111111111",
"attributes": [
{
"Id": "1",
"Value": {
"Id": "m"
}
}
],
"quantity": 1,
"tempPreviewImageUrl": "urlPreview"
}
],
"previews": [],
"fileNames": [
{
"sideID": 313111,
"sideName": "Fronte",
"areaID": 1,
"fileName": "Fronte-designID-1"
}
]
}

Where:

designIDId design
attributesThe attributes of design
elementDescsEach line of the name and numbers creates a desc element
idName and number element id
tagName and number element tag
contentText inserted in the element
modificationIDId of name and number
attributes/idVariant id
Value/idValue that identifies the variant
quantityQuantity design
tempPreviewImageUrlUrl of the name and number preview
previewsName and number preview
sideIDSide Id
sideNameSide name
areaIDId of the area
fileNameFile name
Please Note

The designid is present in the request, which is needed to obtain design information to send to shopping cart, created using the REST API. (Go to DESIGN API for more information.) In response, the endpoint must provide a JSON object that will contain the URL of the shopping cart page

{
"returnurl": "http://your.store.com/shopping-cart"
}

5.8.1 Callback Javascript

Alternatively, if the shoppingcartnameandnumbercallback property is defined in the configuration javascript, you can use a javascript function used to manage the adding of the customized product to the cart. The callback will receive the json object defined above as input

<script>
// Callback edit product into shopping cart name and number
function callback(jsonInput)
{
// callback code to handle adding customized product to shopping cart name and number event
}
// Customizer config
var config =
{
...
shoppingcartnameandnumbercallback : callback,
...
}
// Product config
var productJson =
{
...
}
var customizer = new zakekeDesigner(config, productJson);
</script>

5.9 onbackclickedcallback

<script>
function callback() {
window.location.href = "https://www.zakeke.com/";
};

// Customizer config
var config =
{
...
onbackclickedcallback : callback,
...
}
// Product config
var productJson =
{
...
}
var customizer = new zakekeDesigner(config, productJson);
</script>

5.10 Endpoint shareddesignurl

The designid is present in the request, use it to integrate it in the sharing link and use the functionality of the Share

Endpoint Request in JSON format must be structured as follows:

{
"designid": "designid",
}

Where:

AttributeTypeDescription
designidstringUnique design ID applied to the customized product

Endpoint Response in JSON format, must be structured as follows:

{
"url": "http://your.store.com/QjIuKgt7F0SH52YVLGArgg"
}

5.10.1 Callback Javascript

Alternatively, if the shareddesigncallback property is defined in the configuration javascript, you can use a javascript functions used to manage the Share functionality. The callback will receive the json object defined above as input.

<script>

function callback(designID) {
};

// Customizer config
var config =
{
...
shareddesigncallback: callback,
...
}
// Product config
var productJson =
{
...
}
var customizer = new zakekeDesigner(config, productJson);
</script>

5.11 Endpoint shoppingcartbulkurl

The following JSON object will be sent in the body of the request:

"attributes": [
{
"Id": "1",
"Value": {
"Id": "m"
}
}
],
"quantity": 1,
"designID": "",
"previews": [],
"fileNames": [
{
"sideID": 313111,
"sideName": "Fronte",
"areaID": 1,
"fileName": "Fronte-designID-1"
}
]

Where:

designIDId design
attributesThe attributes of design
attributes/idVariant id
Value/idValue that identifies the variant
quantityQuantity design
previewsName and number preview
sideIDSide Id
sideNameSide name
areaIDId of the area
fileNameFile name

Endpoint Response in JSON format, must be structured as follows:

{
"returnurl": "http://your.store.com/shopping-cart"
}

5.11.1 Callback Javascript

Alternatively, if the shoppingcartbulkcallback property is defined in the configuration javascript, you can use a javascript function used to manage the adding of the customized product to the cart. The callback will receive the json object defined above as input

<script>
function callback(JsonInput) {

};
// Customizer config
var config =
{
...
shoppingcartbulkcallback: callback,
...
}
// Product config
var productJson =
{
...
}
var customizer = new zakekeDesigner(config, productJson);
</script>

5.12 Endpoint ShoppingCartbulkIndividualFile

The following JSON object will be sent in the body of the request:

{
"designID": "1111-g29At3ghmUm2P102gGfA3g",
"attributes": [
{
"modificationID": "111c3d11-4b11-4ab2-bbf5-5c0111111111",
"attributes": [
{
"Id": "1",
"Value": {
"Id": "m"
}
}
],
"quantity": 1,
"tempPreviewImageUrl": "urlPreview"
}
],
"previews": [],
"fileNames": [
{
"sideID": 313111,
"sideName": "Fronte",
"areaID": 1,
"fileName": "Fronte-designID-1"
}
]
}

Where:

designIDId design
attributesThe attributes of design
modificationIDId of name and number
attributes/idVariant id
Value/idValue that identifies the variant
quantityQuantity design
tempPreviewImageUrlUrl of the name and number preview
previewsName and number preview
sideIDSide Id
sideNameSide name
areaIDId of the area
fileNameFile name
Please Note

The designid is present in the request, which is needed to obtain design information to send to shopping cart, created using the REST API. (Go to DESIGN API for more information.) In response, the endpoint must provide a JSON object that will contain the URL of the shopping cart page

{
"returnurl": "http://your.store.com/shopping-cart"
}

5.12.1 Callback Javascript

Alternatively, if the shoppingcartbulkindividualfilecallback property is defined in the configuration javascript, you can use a javascript function used to manage the adding of the customized product to the cart. The callback will receive the json object defined above as input

<script>
// Callback edit product into shopping cart name and number
function callback(jsonInput)
{
// callback code to handle adding customized product to shopping cart individual file bulk event
}
// Customizer config
var config =
{
...
shoppingcartbulkindividualfilecallback : callback,
...
}
// Product config
var productJson =
{
...
}
var customizer = new zakekeDesigner(config, productJson);
</script>
Important

To handle the product edit action, you will need to create a function that at Add To Cart will check if there is already a product with the same designID in the cart, If that identifier is present, you will need to replace it with the new one.

6. CUSTOMIZE button

In the standard Zakeke flow, the Customizer UI is opened from the product page through the 'Customize' call to action. This button becomes visible when a product is configured as customizable in the Zakeke back-office. Here's a summary of the standard flow: Customize > Zakeke UI > Add to Cart > Cart.

It's essential to note that this flow is optional, as long as you implement an alternative system to open the iframe. However, if you choose to implement the 'Customize' button, follow these steps:

Product-Page

6.1 Adding Customizer Button

This is usually an HTML button to be placed next to the "ADD TO CART" button:

<button id="btnCustomize" type="button">Customize<button>

Clearly you can use any HTML element as long as it has as btnCustomize identifier.

6.2 HTML FORM

Before closing the body tag, you will need to add the following html FORM:

<form id="frmCustomizer" action="{Customizer URL}">
<input type="hidden" name="quantity" />
<input type="hidden" name="productid" />
<input type="hidden" name="{attributeKey1}" />
..
<input type="hidden" name="{attributeKeyn}" />
</form>

Where:

AttributeDescription
CustomizerURL of the created customizer page (refer to the reference section of the URL documentation).
quantityQuantity to add to cart.
productidUnique product ID.
attributeKeyProduct attribute key (e.g. "color", "size", etc.).
N.B. Attribute keys must match those defined in the imported products CSV. Go to how to import products for more details.

6.3 Javascript to Send the Product Selection to the Customizer

After the HTML form and before closing the body, enter the following script. It allows you to send the product selection to the customizer after clicking the "customize" button:

<script>

var btnCustomizer = document.getElementById('btnCustomize');
btnCustomizer.addEventListener('click',
function(evt) {

evt.preventDefault();
var formCustomizer = document.getElementById("frmCustomizer");
var formProductPage = document.getElementById("{idFormProduct}");
formCustomizer.elements["productid"].value = { productid };
formCustomizer.elements["quantity"].value = formProductPage.elements["quantity"].value;
formCustomizer.elements["attributeKey1"].value = formProductPage.["attributeKey1"].value;
...
formCustomizer.elements["attributeKeyn"].value = formProductPage.elements["attributeKeyn"].value;
formCustomizer.submit();

});

</script>

Where:

AttributeDescription
idFormProductFORM tag ID of the product page
productidUnique product I

6.4 Full HTML code Example

Below the sample code of a product page with the "customize" button integrated:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Customizable T-Shirt</title>
</head>
<body>
<div class="content">
<div class="foto">
<img alt="Customizable T-Shirt" src="http://your.store.com/images/product.jpg" />
</div>
<div class="details">
<h1>Customizable T-Shirt - sku: 00001</h1>
<p>Description product.....</p>
<form id="frmAddToCart" action="https://your.store.com/shopping-cart.html">
<select name="quantity">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<select name="color">
<option value="0">Black</option>
<option value="1">Red</option>
<option value="2">White</option>
<option value="3">Green</option>
</select>
<select name="size">
<option value="0">S</option>
<option value="1">M</option>
<option value="2">L</option>
<option value="3">XL</option>
</select>
<button id="addToCart" type="submit">Add to shopping cart</button>
<button id="btnCustomize" type="button">Customize</button>
</form>
</div>
</div>
<form id="frmCustomizer" action="https://your.store.com/customizer.html">
<input type="hidden" name="sku" />
<input type="hidden" name="quantity" />
<input type="hidden" name="color" />
<input type="hidden" name="size" />
</form>
<script>

var btnCustomizer = document.getElementById('btnCustomize');
btnCustomizer.addEventListener('click',
function(evt)
{
evt.preventDefault();
var formCustomizer = document.getElementById("frmCustomizer");
var formProductPage = document.getElementById("frmAddToCart");
formCustomizer.elements["productid"].value = '00001';
formCustomizer.elements["quantity"].value = formProductPage.elements["quantity"].value;
formCustomizer.elements["color"].value = formProductPage.elements["color"].value;
formCustomizer.elements["size"].value = formProductPage.elements["size"].value;
formCustomizer.submit();
});

</script>
</body>
</html>