Zakeke uses cookies to provide necessary site functionality and improve your experience. By using our website, you agree to our privacy policy and our cookie policy.   

API integration

Product page

If the product can be customized, the corresponding product page must include the customize button as shown in the figure below:

The following implementations are required in order to add this feature:

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.

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:

Customizer URL URL of the created customizer page (refer to the reference section of the documentation)
quantity Quantity to add to cart
productid Unique product ID
attributeKey Product 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.

3. Javascript to send the product selection to the customizere

After the HTML form and before closing the body, enter the following script. This will allow 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.elements["attributeKey1"].value;
        ...
        formCustomizer.elements["attributeKeyn"].value = formProductPage.elements["attributeKeyn"].value;
        formCustomizer.submit();
    });
</script>

Where:

idFormProduct FORM tag ID of the product page
productid Unique product ID

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>