Skip to main content

Cart API (Visual Product Customizer)

Summary

  1. Overview

  2. Cart API

1. Overview

You can use the Cart API to enhance the standard shopping cart page of your e-commerce website by incorporating personalized product information generated through Zakeke's customizer. Zakeke equips you with essential details to elevate the shopping experience:

  1. Customized Product Preview (A):

    Display a visual thumbnail of each personalized product directly within the shopping cart. This provides end-users with a clear representation of their unique designs, avoiding any confusion as they see the actual customized product in the cart rather than the standard product.

  2. Price for the Customization (B):

    Zakeke provides the flexibility to establish both simple and complex rules for generating a mark-up price based on how customers personalize their products. This mark-up is then added on top of the base product price. If you choose to leverage this feature, the Cart APIs ensure the accurate display of the updated product price in the shopping cart.

  3. Edit Design Button (C):

    Empower customers with an 'Edit Design' button for each customized product in the cart. This seamless integration redirects buyers back to the ZAKEKE customizer from the shopping cart, allowing them to make additional modifications before finalizing their purchase.

Below is an example of a shopping cart with a Zakeke custom product (where the price includes the cost of design):

shopping-cart

2. Cart API

Each customized product added to your shopping cart must have, in addition to the basic model information (depending on the product size defined in your eCommerce website), the following properties:

PropertyData typeDescription
designIDstringUnique design ID generated by Zakeke
namestringName of design saved in draft mode
modelCodestringSKU of product model of this design
tempPreviewImageUrlstringImage Preview URL
designUnitPercentagePricedecimalUnit design price in percentage to apply (value depends on back office pricing rules settings)
designUnitPricedecimalUnit design price to apply (value depends on back office pricing rules settings.Remember,the price is unit.)
customerCodestringRegistered customer identificator of your store, owner of this design
visitorCodestringVisitor identificator of your store, owner of this design
previewFilesarray objectList of object DesignFile
sideNamestringSide name
urlstringUrl of the specified side preview
public class CustomizedItemCart : ItemCart
{
public string designID { get; set; }
public string name { get; set; }
public string modelCode { get; set; }
public string tempPreviewImageUrl { get; set; }
public decimal designUnitPercentagePrice { get; set; }
public decimal designUnitPrice { get; set; }
public string customerCode { get; set; }
public string visitorCode { get; set; }
public List<DesignClientPreview> previewFiles { get; set; }
public string previewFiles { get; set; }
public string url { get; set; }
}

public class DesignClientPreview
{
public string url { get; set; }
public string sideName { get; set; }
}

public class ItemCart
{
public string productID { get; set; }
public string productName { get; set; }
public decimal price { get; set; }
public int quantity { get; set; }
public int? color { get; set; }
public int? size { get; set; }
public List<DesignClientPreview> previewFiles { get; set; }
}

Additional information for a custom product in the shopping cart must be obtained by making an API REST request at the endpoint:

GET https://api.zakeke.com/v2/designs/{designID}

Where designID is the design ID obtained by the customizer (please refer to DESIGN API documentation).

Usually, this request must be made in the server-side code of the "AddToCart" and "EditProductIntoCart" endpoints of the customizer (see examples in ASP. NET MVC C# in the reference section) in order to, respectively, add and modify a custom product.

Edit design button Edit design button, for each product into the shopping cart, consists of an HTML link to customizer as follows:

https://your.store.com/customizer.html?productid={productid}&quantity={quantity}&designid={designid}&selectedattributekey1={selectedattributevalue1}&..&selectedattributekeyn={selectedattributevaluen}

Where the parameters are defined in this table:

ParameterData typeDescription
productidstringUnique product identifier
quantityintegerCustomizable product quantity to be edited
designidstringUnique design ID of design to be edited
selectedattributeskey-valuepair
selectedattributekey-selectedattributevaluekey-valuepair of selected product attributes

N.B. the attribute keys match those imported from CSV Example of link for editing:

https://your.store.com/customizer.html?productid=A100&quantity=1&designid=000-O3nyDBirb0a2XA49mnbmtQ&color=1&size=1