Skip to content
On this page

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):

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

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:

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

Details about these parameters:

ParameterDescription
shopYour Shop ID (displayed in the Settings page of the Colorlab Console)
productThe Template ID from the Colorlab back-end (matches the SKU you use for the product)
languageThe language in which you would like to open the app (only languages which are enabled in your store)
callbackA 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:

js
colorlab.open(colorlabParameters);
1

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:

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

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:

js
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();
});
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

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.

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

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:

js
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();
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19