Monkey Patching

Quick Start

You can customize the product designer using monkey patching. With this approach you keep the asset files (JavaScript and CSS) bundled with the designer plugin for you online shop untouched but add your own JavaScript and CSS files which will be loaded additionally.

The following steps will explain to you how to add monkey patches. Please make sure that you have installed and configured the designer beforehand.

CSS customizations

1. Open the designer in our online shop for one of your articles.
2. Use the web developer tools of your browser and find the elements you want to change. For most elements you should use their (or their parents) attribute data-component as an identifier in your CSS selectors.
3. Create a CSS file with your customizations.
4. Upload the CSS file to your server choosing a path which is publicly available.
5. Find out the URL to your CSS file, make sure it’s working and copy it.
6. Open your web shops admin area, open your product designer configuration you want to apply the CSS style to, and paste the URL into the field Custom Stylesheet URL under the tab Advanced.

Examples

Set the background color of all buttons on the left to yellow:

[data-component="action"] button {
    background-color: yellow;
}

Remove QR code button:

[data-component="action.qr-code-button"] {
    display: none;
}

JavaScript Customizations

1. Open the designer in your online shop for one of your articles
2. (optional) Download the Frontend source code of the product designer to get a good understand of how it works - especially the store (file: src/business/store/store.ts).
3. Create a JavaScript file with your customizations.
4. Upload the JavaScript file to your server choosing a path which is publicly available.
5. Find out the URL to your JavaScript file, make sure it’s working and copy it.
6. Open your web shops admin area, open your product designer configuration you want to apply the JavaScript functionality to, and paste the URL into the field Custom JavaScript URL under the tab Advanced.

How To

Because your custom JavaScript file will be simply injected into the HTML source code of the product designer Frontend you can basically do whatever you want.

If you like to add a new element to the designer you could create a DOM element and inject it.

We also provide you the store of the Vue.js application and the watch method of Vue.js using the window object:

• window.productDesigner.store will be an instance of Store inside src/business/store/store.ts
• window.productDesigner.watch will be the watch function from Vue.js

You can use this to listen to changes to designer state variables like the active canvas or active configuration. You are also able to access the fabric.JS canvas.

Pitfalls

Please mind: Some method of the Store will return a Vue.js Ref object you can use as an argument for the watch function. If you like to get the value of an Ref object without using watch make sure you get the value property:

Wrong:

const configuration = window.productDesigner.store.activeConfiguration();

alert(configuration.name)  // fail: configuration is no instance of Configuration but Ref<Configuration> 

Right:

const configuration = window.productDesigner.store.activeConfiguration().value;

alert(configuration.name); 

---

Always check for store.hasActiveCanvas() before reading store.activeCanvas(). If you call store.activeCanvas() and no active canvas is existing a JavaScript error will be thrown:

Wrong:

const canvas = window.productDesigner.store.activeCanvas().value;

Right:

if (window.productDesigner.store.hasActiveCanvas().value) {
    const canvas = window.productDesigner.store.activeCanvas().value;
}

---

If you make changes to the content of the canvas don’t forget to render it again.

if (window.productDesigner.store.hasActiveCanvas().value) {
   const canvas = window.productDesigner.store.activeCanvas().value;
   
   canvas.backgroundColor = 'green';
   canvas.renderAll(); // new background color will not be visible before this call
}

Examples

Inject another DIV element:

const myDiv = document.createElement('div');

myDiv.style.width = '100px';
myDiv.style.height = '100px';
myDiv.style.backgroundColor = 'red';
myDiv.style.color = 'yellow';
myDiv.innerText = 'Thanks for using product designer!';

document.body.append(myDiv);

Disallow drag & dropping of images added to the canvas:

const store = window.productDesigner.store;

window.productDesigner.watch(store.hasActiveCanvas(), (isActiveCanvasExisting) => {
   if (isActiveCanvasExisting) {
      const canvas = store.activeCanvas().value;

      canvas.on('object:added', (event) => {
         const obj = event.target;

         if (obj.type === 'image') {
            obj.lockMovementX = true;
            obj.lockMovementY = true;
            canvas.renderAll();
         }
      });
   }
});