This article explains how to integrate Printlane into your online store without using a plugin, allowing customers to personalize products.
Add the Javascript library
To load the Printlane Designer on your website, include the JavaScript library just before the closing </body> tag. Add this library to every page where the designer is needed (e.g., product pages and shopping cart pages):
<script src="https://designer.printlane.com/js/include.js"></script>
Integrate the designer
On product pages
If the product is customizable, define the parameters you would like to use when the Designer gets opened:
var printlaneParameters = {
shop: 'your-store-id',
product: 'template-id',
language: 'nl',
// The following function is called when the customer saves their design
callback: function(id, token) {
printlane.close(); // Close the designer
}
};Parameter | Description |
| Your Store ID (displayed in the Settings page of Printlane Studio) |
| The Template ID you entered in from Printlane Studio when creating a product template |
| The language in which you would like to open the Designer. You can only use languages which are enabled in your Printlane account. To dynamically apply the language on your website, you can use following code: |
| A javascript function which will execute as soon as the customer clicks on the “Add to cart” button in the Designer. |
To open the designer, use:
printlane.open(printlaneParameters);
When the customer clicks on Add to cart, the callback defined in the parameters will be executed. The callback receives a Design ID (id) and a Design token (token). Store these values with the product in the shopping cart to retain the design.
Complete code snippet:
var printlaneParameters = {
shop: 'your-store-id',
product: 'template-id',
language: 'nl',
callback: function(id, token) {
// Add the Design ID & Token in a hidden field in the 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();
}
};
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();
});Important: ensure design reference is required
To prevent customers from adding products to the shopping cart without a design, implement server-side validation to ensure the form field storing the design reference is not empty upon submission.
This guarantees that a product cannot be added to the cart without an associated design, even if JavaScript errors or network issues prevent the Designer from loading properly.
On shopping cart pages
To allow customers to edit designs from the shopping cart, use the Design ID (id) and Design token (token) you received earlier on the product page:
var printlaneParameters = {
shop: 'your-store-id',
id: 'design-id', // Design ID
token: 'design-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 review and edit each design from within the shopping cart:
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'), // Design ID from the link
token: link.getAttribute('data-token'), // Design token from the link
callback: printlaneCallback
});
// Prevent opening the link
e.preventDefault();
});
}
Display thumbnails of designs
You can enhance the user experience by generating thumbnails of customized designs. The designer captures a “screenshot” of the canvas when the customer clicks Add to Cart.
The thumbnail is generated and stored on the client side immediately when the user clicks on the "Add to cart" button in the designer.
These thumbnails can replace generic product images in the shopping cart, providing a visual summary of the customization.
Enabling Thumbnail Generation
To enable this feature, include options.generateThumbnail: true when initializing the designer:
printlane.open({
shop: 'your-store-id',
product: 'template-id',
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();
}
});
Retrieving and Displaying Thumbnails
To display thumbnails in your shopping cart or other parts of your website, retrieve them using the Design ID and Design token that you have stored in the shopping cart.
In the code example above, the Design ID and Design token were stored as a concatenated string (id.token), such as:
45.3618204e-f166-4a53-8a7f-0ce2828b17ca
You can use this string to retrieve a thumbnail.
Retrieve the Thumbnail as an Object URL
The function loadThumbnail returns an object URL that remains valid while the user’s browser session is active:
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
Retrieve the Thumbnail as a Blob
To retrieve the image as a Blob, pass 'blob' as the second parameter:
const blob = await printlane.loadThumbnail('45.3618204e-f166-4a53-8a7f-0ce2828b17ca', 'blob');
// returns an `Blob`, e.g. Blob {size: 44152, type: 'image/jpeg'}
Retrieve the Thumbnail as a Base64-Encoded String
To retrieve the image as a base64-encoded string, use base64 as the second parameter:
const base64String = await printlane.loadThumbnail('45.3618204e-f166-4a53-8a7f-0ce2828b17ca', 'base64');
// returns an `String`, e.g. data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQAB...