Javascript

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

• Add the Javascript library
• Integrate the designer
  • Product pages
  • Shopping cart pages
• Display thumbnails of designs

Add the Javascript library

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

<script src="https://designer.printlane.com/js/include.js"></script>

Integrate the designer

Product pages

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

var printlaneParameters = {
  shop: 'your-store-id',
  product: 'product-sku',
  language: 'nl',
  callback: printlaneCallback
};

Details about these parameters:

Parameter	Description
shop	Your Store ID (displayed in the Settings page of Printlane Studio)
product	The Template ID from Printlane Studio (matches the SKU you use for the product)
language	The language in which you would like to open the designer (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 Printlane Designer.

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

printlane.open(printlaneParameters);

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

var printlaneCallback = function(id, token) {
  printlane.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 design.

Complete code snippet:

var printlaneCallback = function(id, token) {
  // Remember the Design ID and Token in your add to cart form
  document.getElementById('design-reference').value = id + '.' + token;

  // Close the designer
  printlane.close();

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

var printlaneParameters = {
  shop: 'your-store-id',
  product: 'product-sku',
  language: 'nl',
  callback: printlaneCallback
};

document
  // Replace this selector with an appropriate selector that returns your add to cart button
  .querySelector('.replace-with-add-to-cart-selector')
  // The designer will be opened when the button is clicked
  .addEventListener('click', function(e) {
    // Open the Printlane Designer
    printlane.open(printlaneParameters);

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

Shopping cart pages

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

var printlaneParameters = {
  shop: 'your-store-id',
  id: 'design-id',
  token: 'design-token',
  callback: printlaneCallback
};

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

var printlaneLinks = document.querySelectorAll('a.printlane-edit-personalisation');
for(var i = 0; i < printlaneLinks.length; i++) {
  // Get the current link
  var link = printlaneLinks[i];

  // Add a click event to the link
  link.addEventListener('click', function(e) {
    // Open the designer with ID and token
    printlane.open({
      shop: 'your-store-id', 
      id: link.getAttribute('data-id'), 
      token: link.getAttribute('data-token'), 
      callback: printlaneCallback
    });
    
    // Prevent the default event
    e.preventDefault();
  });
}

Display thumbnails of designs

You can enhance your site's user experience by enabling thumbnail generation in the designer. This feature essentially captures a "screenshot" of the canvas within the designer, creating a visual representation of the user's design.

The thumbnail is generated and stored on the client side immediately when the user clicks on the "Add to cart" button in the designer.

A practical use case is to replace generic images in the shopping cart with these personalized thumbnails, giving users a visual summary of their custom designs.

To activate this functionality, simply include the options.generateThumbnail: true parameter when initializing the designer:

printlane.open({
  shop: 'your-store-id',
  product: 'product-sku',
  language: 'nl',
  options: {
    // Generate and store a thumnail of the design on "add to cart"
    generateThumbnail: true
  },
  callback: function(id, token) {
    // Remember the Design ID and Token in your add to cart form
    document.getElementById('design-reference').value = id + '.' + token;

    // Close the designer
    printlane.close();

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

To integrate these thumbnails into your website, such as the shopping cart, you can retrieve them using the unique combination of the Design ID and Token. This identifier is are typically stored in your shopping cart.

For instance, in the previous example, the ID and token pair is stored as a concatenated string, formatted as id.token. Here’s a sample representation:

45.3618204e-f166-4a53-8a7f-0ce2828b17ca

This code returns an Object URL with a lifetime that's tied to the users' browser:

const url = await printlane.loadThumbnail('45.3618204e-f166-4a53-8a7f-0ce2828b17ca');
// returns an object URL, e.g. blob:http://your-website.com/d2d6017b-59e3-40ee-8938-4983e12252a4

To retrieve the thumbnail as a Blob, you can add a second parameter blob:

const blob = await printlane.loadThumbnail('45.3618204e-f166-4a53-8a7f-0ce2828b17ca', 'blob');
// returns an `Blob`, e.g. Blob {size: 44152, type: 'image/jpeg'}

To retrieve the thumbnail as a base64 encoded String, you can add a second parameter base64:

const blob = await printlane.loadThumbnail('45.3618204e-f166-4a53-8a7f-0ce2828b17ca', 'base64');
// returns an `String`, e.g. data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB...