Javascript

This page describes how to integrate Colorlab in your online store without a plugin, to allow customers to customize products.

Add the Javascript library

Add the Colorlab javascript library to your website, right before closing the body tag </body>. Add the library to every page where you need the app (product pages and shopping cart pages):

1
<script src="https://app.colorlab.io/v3/js/include.js"></script>

Integrating the app

Product pages

If the product is customizable, define the parameters of the product you would like to personalize in a Javascript-object:

1
2
3
4
5
6
var colorlabParameters = {
shop: 'your-shop-id',
product: 'product-sku',
language: 'nl',
callback: colorlabCallback
};

Details about these parameters:

Parameter Description
shop Your Shop ID (displayed in the Settings page of the Colorlab Console)
product The Template ID from the Colorlab back-end (matches the SKU you use for the product)
language The language in which you would like to open the app (only languages which are enabled in your store)
callback A javascript callback function which will execute as soon as the customer clicks on “Add to cart” in the Colorlab app.

You can now open the app using this line of code:

1
colorlab.open(colorlabParameters);

When the customer clicks on Add to cart, the callback defined in the parameters will be executed.

Add this callback in your code to close the app:

1
2
3
var colorlabCallback = function(id, token) {
colorlab.close();
}

The callback receives an id and a token. You need to save these variables along with the product in the shopping cart to remember the linked customization.

Complete code snippet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var colorlabCallback = function(id, token) {
// Remember the Colorlab ID and Token
document.getElementById('colorlab-id').value = id + '.' + token;

// Close the app
colorlab.close();

// Submit the product to the shopping cart
document.getElementById('form-add-to-cart').submit();
}

var colorlabParameters = {
shop: 'your-shop-id',
product: 'product-sku',
language: 'nl',
callback: colorlabCallback
};

document.getElementById().addEventListener('click', function(e) {
// Open the Colorlab app
colorlab.open(colorlabParameters);

// Prevent the default event
e.preventDefault();
});

Shopping cart pages

If you want to enable your customers to change customizations from within the shopping cart, you need to use the ID and token you received before on the product page.

1
2
3
4
5
6
var colorlabParameters = {
shop: 'your-shop-id',
id: 'customization-id',
token: 'customization-token',
callback: colorlabCallback
};

If multiple products were customized and added to the cart, you can add a link to each of these products in the shopping cart, allowing the customer to change each customization:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var colorlabLinks = document.querySelectorAll('a.colorlab-edit-personalisation');
for(var i = 0; i < colorlabLinks.length; i++) {
// Get the current link
var link = colorlabLinks[i];

// Add a click event to the link
link.addEventListener('click', function(e) {
// Open the app with ID and token
colorlab.open({
shop: 'your-shop-id',
id: link.getAttribute('data-id'),
token: link.getAttribute('data-token'),
callback: colorlabCallback
});

// Prevent the default event
e.preventDefault();
});
}