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.