The Custom Product Builder For Magento – User Guide

In Admin Panel Catalog/Product add new product. By clicking on «Configure» button you can configure your custom options by adding new panels, categories and options.

Also you can create rules to specify behavior (when panels and categories are visible or hidden)

Export Custom Product Builder configuration

You can export created product configuration in Admin Panel Catalog/Products by clicking on «Export» button in «Custom Product Builder» field. This is an example of exported JSON file:

{“settings”:{“isAdmin”:true,”theme”:{“id”:”alpine-white”},”views”:{“front”:true,”back”:false,”left”:false,”right”:false,”top”:false,”bottom”:false},
“currentView”:”front”,”currentTab”:0,”defaultView”:”front”,”viewControls”:”arrows”,”hasSummary”:true,”layout”:”col-tabs”,”custom”:{“js”:””,”css”:””},
“defaultOptions”:{},”cdnPath”:”https://magento.thecustomproductbuilder.com/media/”,”currency”:”USD”},
“data”:{“name”:null,”base”:{“price”:null,”image”:{“front”:”blob:https://magento.thecustomproductbuilder.com/dc563d64-112f-40af-bca8-bb9a6fd6a93a”}},
“panels”:[{“id”:”zNlxQyvJG1AJWrZiUvOkAfLz”,”categories”:[{“id”:”qxzG5v9vUY8jK6oJD1HtqHvF”,”zIndex”:1,
“type”:”text”,”options”:[{“preview”:{“type”:”img”,”data”:{“front”:null,”back”:null,”left”:null,”right”:null,”top”:null,”bottom”:null}},
“option”:{“data”:{“label”:”Maple”,”value”:”100″}},”price”:”0100″,”inStock”:true,”logic”:{“rules”:[],”action”:”hide”},”id”:”m9bWDxXoVIYVzpvmZdR1SOTp”},
{“preview”:{“type”:”img”,”data”:{“front”:null,”back”:null,”left”:null,”right”:null,”top”:null,”bottom”:null}},”option”:{“data”:{“label”:”Ash”,”value”:”50″}},
“price”:0,”inStock”:true,”logic”:{“rules”:[],”action”:”hide”},”id”:”AA_Sud03Y5zwseKovI6bQnDB”}],”title”:”Maple”,”description”:””,”clearNext”:””,”logic”:{“rules”:[],”action”:”hide”}},{“id”:”WS0HXzoi1l78IZj4Vghw0y83″,”zIndex”:1,”type”:”text”,”options”:[],”title”:”Ash”,”description”:””,”clearNext”:””,”logic”:{“rules”:[],”action”:”hide”}}],
“title”:”Finish”,”description”:””,”logic”:{“rules”:[],”action”:”hide”}},{“id”:”xiHEOjpHEkAaR4awCFM9SBBJ”,”categories”:[],”title”:”hardware”,”description”:””,
“logic”:{“rules”:[],”action”:”hide”}}],”layers”:[{“panel”:”base”,”category”:”base”,”option”:”base”,
“preview”:{“front”:”blob:https://magento.thecustomproductbuilder.com/dc563d64-112f-40af-bca8-bb9a6fd6a93a”},”price”:null,”zIndex”:1},
{“panel”:”zNlxQyvJG1AJWrZiUvOkAfLz”,”category”:”qxzG5v9vUY8jK6oJD1HtqHvF”,”option”:”AA_Sud03Y5zwseKovI6bQnDB”,
“preview”:{“front”:null,”back”:null,”left”:null,”right”:null,”top”:null,”bottom”:null},”value”:”50″,”price”:0,”zIndex”:1}],”customLayers”:[{“id”:”rrfrGN7dXyL8eNfY16EaxaeI”,
“title”:null,”position”:{“x”:0.5,”y”:0.5},”selectPanel”:null,”points”:[{“x”:0.4,”y”:0.6},{“x”:0.6,”y”:0.6},{“x”:0.6,”y”:0.4},
{“x”:0.4,”y”:0.4}],”value”:null,”view”:”front”,”type”:”path”,”hoverColor”:false,”zIndex”:1,”logic”:{“rules”:[],”action”:”hide”},”active”:false},
{“id”:”F5GcUDgpsNwv_tGU6LzoieX8″,”title”:null,”position”:{“x”:0.5,”y”:0.5},”selectPanel”:null,”points”:[{“x”:0.4,”y”:0.6},{“x”:0.6,”y”:0.6},{“x”:0.6,”y”:0.4},
{“x”:0.4,”y”:0.4}],”value”:null,”view”:”front”,”type”:”path”,”hoverColor”:false,”zIndex”:1,”logic”:{“rules”:[],”action”:”hide”},”active”:true}],
“price”:0,”isFetchingCategories”:true}}

Import Custom Product Builder configuration

 

1. From Admin PanelGo to Catalog/Products, choose product (or add new one).
   In «Custom Product Builder» field click on «Import» button, specify a path to JSON
2. From command linecurl -X POST –data @<(cat <path/to/json/file>) http://cpb.loc2/customproductbuilder/product/import/id/3[popup id=”`Export`” title=”Export” theme_id=”5481″ size=”small” width=”200″ width_unit=”px” height=”200″ height_unit=”px” location=”center top” position_right=”0″ position_left=”0″ position_bottom=”0″ position_top=”100″ animation_type=”fade” animation_speed=”350″ animation_origin=”center top”]{“settings”:{“isAdmin”:true,”theme”:{“id”:”alpine-white”},”views”:{“front”:true,”back”:false,”left”:false,”right”:false,”top”:false,”bottom”:false},”currentView”:”front”,”currentTab”:0,”defaultView”:”front”,”viewControls”:”arrows”,”hasSummary”:true,”layout”:”col-tabs”,”custom”:{“js”:””,”css”:””},”defaultOptions”:{},”cdnPath”:”https://magento.thecustomproductbuilder.com/media/”,”currency”:”USD”},”data”:{“name”:null,”base”:{“price”:null,”image”:{“front”:”blob:https://magento.thecustomproductbuilder.com/dc563d64-112f-40af-bca8-bb9a6fd6a93a”}},”panels”:[{“id”:”zNlxQyvJG1AJWrZiUvOkAfLz”,”categories”:[{“id”:”qxzG5v9vUY8jK6oJD1HtqHvF”,”zIndex”:1,”type”:”text”,”options”:[{“preview”:{“type”:”img”,”data”:{“front”:null,”back”:null,”left”:null,”right”:null,”top”:null,”bottom”:null}},”option”:{“data”:{“label”:”Maple”,”value”:”100″}},”price”:”0100″,”inStock”:true,”logic”:{“rules”:[],”action”:”hide”},”id”:”m9bWDxXoVIYVzpvmZdR1SOTp”},{“preview”:{“type”:”img”,”data”:{“front”:null,”back”:null,”left”:null,”right”:null,”top”:null,”bottom”:null}},”option”:{“data”:{“label”:”Ash”,”value”:”50″}},”price”:0,”inStock”:true,”logic”:{“rules”:[],”action”:”hide”},”id”:”AA_Sud03Y5zwseKovI6bQnDB”}],”title”:”Maple”,”description”:””,”clearNext”:””,”logic”:{“rules”:[],”action”:”hide”}},{“id”:”WS0HXzoi1l78IZj4Vghw0y83″,”zIndex”:1,”type”:”text”,”options”:[],”title”:”Ash”,”description”:””,”clearNext”:””,”logic”:{“rules”:[],”action”:”hide”}}],”title”:”Finish”,”description”:””,”logic”:{“rules”:[],”action”:”hide”}},{“id”:”xiHEOjpHEkAaR4awCFM9SBBJ”,”categories”:[],”title”:”hardware”,”description”:””,”logic”:{“rules”:[],”action”:”hide”}}],”layers”:[{“panel”:”base”,”category”:”base”,”option”:”base”,”preview”:{“front”:”blob:https://magento.thecustomproductbuilder.com/dc563d64-112f-40af-bca8-bb9a6fd6a93a”},”price”:null,”zIndex”:1},{“panel”:”zNlxQyvJG1AJWrZiUvOkAfLz”,”category”:”qxzG5v9vUY8jK6oJD1HtqHvF”,”option”:”AA_Sud03Y5zwseKovI6bQnDB”,”preview”:{“front”:null,”back”:null,”left”:null,”right”:null,”top”:null,”bottom”:null},”value”:”50″,”price”:0,”zIndex”:1}],”customLayers”:[{“id”:”rrfrGN7dXyL8eNfY16EaxaeI”,”title”:null,”position”:{“x”:0.5,”y”:0.5},”selectPanel”:null,”points”:[{“x”:0.4,”y”:0.6},{“x”:0.6,”y”:0.6},{“x”:0.6,”y”:0.4},{“x”:0.4,”y”:0.4}],”value”:null,”view”:”front”,”type”:”path”,”hoverColor”:false,”zIndex”:1,”logic”:{“rules”:[],”action”:”hide”},”active”:false},{“id”:”F5GcUDgpsNwv_tGU6LzoieX8″,”title”:null,”position”:{“x”:0.5,”y”:0.5},”selectPanel”:null,”points”:[{“x”:0.4,”y”:0.6},{“x”:0.6,”y”:0.6},{“x”:0.6,”y”:0.4},{“x”:0.4,”y”:0.4}],”value”:null,”view”:”front”,”type”:”path”,”hoverColor”:false,”zIndex”:1,”logic”:{“rules”:[],”action”:”hide”},”active”:true}],”price”:0,”isFetchingCategories”:true}}[/popup]

When someone sharing product by clicking «Share» button on frontend product page, the hash parameter «configid» is adding to current URL. For example, #configid=TEnEZ3ECIq9WHhixVOnKV6UJ

JSON configuration data is sending in request and saving in database in «cpb_product_config» table. We save «configid», «technicalData» (panel, category and option ids) and path to image.

And when someone opens shared link this stored data is loading on page.

To upload the Custom Product Builder plugin to your magento store you should:

1)  download it from git.buildateam.io, and then open a command line, where you should write the direction for your magento folder and ‘setup:upgrade’ and click enter    

 

2)    After the process finished write the second command: ‘deploy:mode:set production’  ,click enter and wait till the end of compilation.

3)  After it successfully ended you should go to the admin panel of your magento store  , enter the login and password, and you will come to the main page.

 

4)  There you should go to ‘stores’ on the left menu (1), and click on ‘configuration’ button in the settings menu (2) 

 

5)  Make sure that Product Builder is installed successfully, you will see it in that page 

 

6) After you uploaded the Builder to your magento store you can add different products using it, for this you should go to ‘catalog’ on the left menu (1), and there select ‘products’ button (2).

 

7)  You will see a list of your products, and then you should press the ‘edit’ button on the right of the product

8)  You will see the settings of the chosen product. After that you should scroll down till you find the ‘Custom Product Configuration’ option (1), and then click on ‘import’ button (2) and select the file of the product which you’d like to import and click open. After that please wait some time for product to be loaded. After the load finished you will see the appeared third button of export .

 

 

 

9)  Copy SKU of the product – you can see it almost on the top of the list of options (1), and then press save button on the left (2).

 

10)  After that go to your magento store, and in the search bar paste the SKU you copied. Make sure you can work with the Custom Product Builder

You can also see the video instructions for installing The Custom Product Builder plugin for your magento store:

Custom Layers

Custom layers are one of the main parts of the system. With their help, you can create engraving on objects, upload a custom image to any part of the product, paint parts of the product without loading additional images. And much more …

Types of Custom Layers

1. Path – This type is used to create click areas and load custom photos on a product, bounded by the layer area.
2. Text – This type is used to add text to the product. For example, an inscription on a T-shirt or other object or engraving.
3. Image – This type is used to add image whose color can be changed later. Or adding textures to objects whose colors can also be changed.

Create Custom Layers

Steps to create “Path” Custom Layer

Click button. The form for creating a new layer has been opened.

Click button “Add New Custom Layer”. The new layer added. Click it in the Layer Selection Column.

Fill in the following fields in the Settings tab

Title: some title
Type: Path
View: change view
Panel to select: The panel to which to go after clicking on the custom layer

Next, if you want to change the shape, the size of the layer and the position on the page, you must drag the layer or individual points with the mouse cursor. To delete unnecessary points, you need to press the Shift and click on it with the mouse.

Fill in the following fields in the Advanced tab

Use Color Hover – If you want to use color hover, turn on the switch. This functionality is only for painting the layer when it has hovered over the mouse

Image Upload – If you want to upload some image, for example, print on a T-shirt, you need turn on the switch.

Fill in the following fields

Panel: the panel in which the necessary category is located
Category: the category in which the required option is located
Option: option with “File Upload” type only.

Click Save and collapse settings by pressing the button 

Steps to create “Text” Custom Layer

Click button. The form for creating a new layer has been opened.

Click button “Add New Custom Layer”. The new layer added. Click it in the Layer Selection Column.

Fill in the following fields in the Settings tab

Title: some title
Type: Text
View: change view
Panel to select: there is no need to fill
Text: add some text

Fill in the following fields in the Advanced tab

Font Size
Font Family
Font Color

Panel: the panel in which the necessary category is located
Category: the category in which the required option is located
Option: option with “Text Field” type only.

Click Save and collapse settings by pressing the button 

If you want to add several fonts you must to create one Custom Layer for each font.

Steps to create “Image” Custom Layer

Click button. The form for creating a new layer has been opened.

Click button “Add New Custom Layer”. The new layer added. Click it in the Layer Selection Column.

Fill in the following fields in the Settings tab

Title: some title
Type: Image
View: change view
Panel to select: there is no need to fill
Image: You need to upload PNG image with transparency and image positioning

Fill in the following fields in the Advanced tab

Colorize image layer – If you want to change colors of any texture, for example, aquaprinting pattern colors on any thing, you need turn on the switch.

Fill in the following fields

Panel: the panel in which the necessary category is located
Category: the category in which the required option is located with “Color thumbnail” type only
Alpha Transparency: alpha transparency level.

Image Upload – If you want to upload some image, for example, print on a T-shirt, you need turn on the switch.

Fill in the following fields

Panel: the panel in which the necessary category is located
Category: the category in which the required option is located
Option: option with “File Upload” type only.

Click Save and collapse settings by pressing the button 

Layer colorization and on the fly

1. Create a new custom layer with “Image” type. How to do this, see the tab “Custom Layers”.
2. Create a new Panel with the “Color thumbnail” category and add some color options.
3. Enjoy the result

Now, the functionality is ready to use. Switch colors and your image will be painted in the right color without the need to upload new images.

Overlaying textures

 

Changing the colors of individual elements

Inserting user image

1. Create a new custom layer with “Path” type. How to do this, see the tab “Custom Layers”.
2. Create a new Panel with the “File upload” category and add file upload option.
3. Enjoy the result

Custom user text

With the help of this instruction you can not just add text, but give the buyer the opportunity to choose from the options for color, size and font. We present you a powerful tool for working with text layers.

One color, one font, one size.

For most interesting ideas, you do not need more than one type of font design. And you need to perform just a couple of simple actions.

1. Create a new custom layer with “Text” type. How to do this, see the tab “Custom Layers”.
2. Create a new Panel with the “Text field” category and add text field option.
3. Enjoy the result

Support:

Please email to support@buildateam.io if you have any questions or problems.