Product configurator
Product configurator for react front with unlimited variables. Specially for construction material or custom-made appliances. Please contact support for a demo and discuss compatibility with your product options.
An additional fixed setup fee is applied. Contact support for more information
The product configurator is an advanced feature for webshops. Customers can order the product directly online and choose between the variable put in through the admin. The configurators are highly customizable and only available on lightR dedicated and Magento 2 storefronts.
Dynamic pricing calculating
- Price per m2
(2 dimension) square calculation
Let your clients calculate their own dynamic price using the 2 dimension values that multiply per a fixed value.
- Price unit value
1 dimension calculation
Your customers can calculate their own product price. Let them select one of the administrator preset variables of products and calculate the price per cm (or any other unit) of length, then the configurator. - Matrix price calculation support
create a csv matrix containing pricing steps for your product based on the X/Y axis variables.
- Conditional multiple matrix calculation support
Depending on selection, the customer selects other pricing matrixes will be applied.
Color Swatches
- Supporting colour swatches heximal library
Select variables using text format to define colour options for your product variations. - Supporting pattern images
Set png or jpg images to load your variables.
- Supporting SVG free pattern
Supporting animated SVG or gradient SVG supporting high resolution artwork.
Upsell Product dependent catalogue support
Create super bundle attribute options with product options that load dynamically from your product catalogue.
Use this and upsell your configurable product, making it super user-friendly to complete the product in the way your customer likes it.
Full responsive behaviour
Optimized for mobile and desktop usability. Easily share the customized with friends.
Magento 2 Frontend only version Features
Canvas rendering support
The Magento 2 version has a canvas real effect live rendering option. Your customers will see a live render of their configuration. The canvas rendering is done based on a .png which is managed through the admin. Building configurators becomes super flexible.
Help dialogue buttons
easy add help texts to the sections to provide your customer with the information required to make the right selection.
Base product creation
To activate the configutor output the product requires.
You can activate the product configurator to any product type.
| Attribute set > configurator |
 |
| Configurator > Value > Yes |
 |
All other base magento functionalities are supported.
Color definitions
Requires:
Attribute yd_conf_colors and .ini file with color swatch presets.
Format
[Groupidentifier]
label =
file =
items[subidentifier] =
| Name | Description | Format | Comment |
| Groupidentifier | A name for the collection of variables that creates the section. | lowercase surrounded by [] | no spaces or special characters allowed. |
| Label | Free tekst area that will print the value of the label. | - | - |
| File | .ini file name definition that is preformatting the options. the option define the fill color or image that needs to be loaded. | filename.ini | |
| Items | The values which are loading the predefined options in the ini file. | value,value | vales need to be comma seperated |
| Subidentifier | the value must exist in a previous loaded groupidentifier in order to be able to load selection dependencies item values | requires earlier groupidentifier. |
Example code:
[Groupidentifier]
label = Description label free tekst
file = colors.ini
items[] = 9006,1015,3004,5011,lam9011,7039,7012,6005,1007,goudeneik,notenhout
[Groupidentifier]
label = Description label free tekst
file = colors.ini
items[configationoption] = 9010,9016,9001,7016,1013,7038,6009,8019,8014,9006,1015,3004,5011,6005
items[configationoption_1] = 9016,9001,7016,7038,1013,8019,8014,9006
items[configationoption_2] = 9016,9001,7016,7038,1013,8019,8014,9006
ini file formattig
| Name | Description | Format | Comment |
| identifyer | Is a unique value inside the ini file indicating the start of a new variable | [value] | No spaces allowed, alphanumeric and _ |
| label | Free text field generating a label to the option inside the configurator | between "" | Recommenden max 30 characters. Value should be entered |
| size | indicating the size to show in a example render | 123.11 | dot decimal seperated |
| price | Price to be added to the configurator. | 123.12 | dot decimal seperated, prices in or excluding VAT depending Magento main settings. |
| price_by | Indicates if value si calulated by the input variable input | height, width, length | preset values |
| value | value for color attribute indicating the fill color of the option | #FF00CC | Hexadecimal |
| image | Indicator to load a images as the option in the configurator | [MagentoRoot]/file/path/filename.ext | can process png, jpg or svg |
| thumb | Indicator to load a thumnail as the option in the configurator | [MagentoRoot]/file/path/filename.ext | can process png, jpg or svg |
[value]
label = ""
size =
price =
price_by = height
value = 3.4
image = /pub/media/configurator/montaje/filename.svg
thumb = /pub/media/configurator/montaje/thumbnail.svg
Size limits definitions
| name | description | Value | Comment |
| identifyer | refereals to which value the limit is applied | [referal_name] | no flexibility |
| min | min value that has to be passed before the add to cart becomes active | numeric | |
| max | max value before the add tocart becomes inactive | numeric | |
| step | The steps that are added when the user select up and down button generated by browser | ||
| default | default value which is shown by upon the inicial configurator load | numeric | dot decimal seperated |
units | indicator which is shown in the configurator | free | recommend to keep it short due to available characters availability. |
[maat_breedte]
min = 75
max = 280
step = 0.1
default = 100.00
units = cm
[maat_hoogte]
min = 30
max = 320
step = 0.1
default = 100.00
units = cm
limits
| Name | description | value | comment |
| [identifyer] | Always [limits] | [limits] | Fixed value |
| minwidth | Minimum width value before warning is printed | numeric | |
| maxwidth | Maximum width value before warning is printed | numeric | |
| minheight | Minimum height vale before warning is printed | numeric | |
| maxheight | Maximum height value before warning is printed | numeric | |
| maxsize | Max total size that the warning is printed. | numeric | value is calculated width X height |
[limits]
minwidth = 75
maxwidth = 280
minheight = 30
maxheight = 320
maxsize = 60000
Price definitions
The admin can select between price calulations. if no definition is made then the configurator will calculate the price using:
Price /m2
the value in Magento attribute_code : yd_conf_buying_price which should be part of the attribute set.
If not values can be entered in the matrix and formatted following:
Format: dotcomma seperator. first column and row contain the value as minimum value. if configurator value entered passes the value the new matrix column or row value is applied.
;100;110;120;130;140;150;160;170;180;190;200;210;220;230;240;250;260;270;280;290;300;310;320;330;340;350;;;;;
100;110;114;122;130;136;145;150;158;165;171;178;185;194;198;207;213;219;229;235;244;249;257;264;271;280;286;;;;;
110;113;122;130;136;145;150;159;167;174;180;188;197;204;212;216;223;233;242;248;254;263;270;278;284;292;299;;;;;
120;117;129;136;145;150;159;168;175;181;193;198;209;215;221;230;238;245;251;258;268;277;283;290;297;303;313;;;;;
130;126;135;145;150;159;168;177;183;193;201;210;218;227;235;244;251;258;268;277;284;292;299;306;315;320;328;;;;;
140;133;142;150;159;168;177;187;196;203;212;219;230;241;248;257;267;275;283;292;300;309;316;323;331;337;344;;;;;
150;138;148;158;167;175;183;196;204;212;219;232;242;249;258;267;278;286;296;303;315;320;328;335;343;351;358;;;;;
160;142;152;165;174;181;193;203;212;219;232;244;249;258;268;278;287;299;309;318;326;334;341;349;357;363;370;;;;;
170;149;161;171;180;193;201;212;219;232;244;252;264;275;283;293;302;315;323;334;343;351;358;366;373;379;386;;;;;
180;158;168;178;188;198;210;219;232;244;252;267;278;286;297;309;319;331;340;349;360;367;374;380;390;396;403;;;;;
190;168;178;193;203;213;223;238;248;258;271;284;296;306;318;328;340;352;363;374;385;393;400;409;415;424;432;;;;;
200;178;193;203;215;227;242;252;267;278;290;300;315;326;337;349;361;374;385;397;412;419;427;435;443;448;457;;;;;
210;183;197;210;221;235;248;261;275;286;299;312;323;337;349;361;374;385;397;412;425;432;441;447;453;462;0;;;;;
220;188;204;216;230;244;254;270;283;296;309;319;334;347;361;374;385;397;412;425;440;445;451;;;;;;;;;
230;196;210;221;238;249;263;278;290;302;318;331;344;358;370;385;397;412;425;440;444;451;;;;;;;;;;
240;198;215;230;244;257;270;284;297;312;325;341;354;369;380;394;411;425;440;445;451;;;;;;;;;;;
250;207;219;235;249;264;280;293;306;319;335;351;366;379;393;408;422;440;444;;;;;;;;;;;;;
260;212;227;244;257;271;286;300;316;331;344;360;376;392;406;419;435;450;;;;;;;;;;;;;;
270;216;233;249;264;280;296;312;325;340;354;370;385;402;415;431;447;;;;;;;;;;;;;;;
280;221;241;254;271;286;302;319;334;349;363;379;396;412;427;443;459;;;;;;;;;;;;;;;
290;230;246;263;280;293;312;326;341;357;374;392;408;422;440;451;;;;;;;;;;;;;;;;
300;238;252;270;286;300;318;334;349;363;385;402;417;431;448;;;;;;;;;;;;;;;;;
310;245;261;277;293;309;325;341;357;370;396;412;427;441;;;;;;;;;;;;;;;;;;
320;251;268;283;300;315;332;347;363;377;408;422;440;;;;;;;;;;;;;;;;;;;
330;258;275;290;309;320;340;354;370;383;417;432;448;;;;;;;;;;;;;;;;;;;
340;267;281;297;315;328;345;361;377;392;427;444;;;;;;;;;;;;;;;;;;;;
350;274;287;303;320;335;352;369;383;397;440;453;;;;;;;;;;;;;;;;;;;;
Matrix calulated
[prices]
prices[] = calculator value.csv
matrix storage location is [ MagentoRoot]/configurators/prices/filename.csv
Multi matrix calculator
[prices]
prices[value_1] = filename_1.csv
prices[value_2] = filename_2.csv
Value_1 and value_2 etc is a referal to a earlier defined identifiyer.
Option definition
The functional option to select for a user
[groupidentifyer]
label =
file = filename.ini
items[] = ini_item_1
items[] = ini_item_2
| Name | Description | Format | Comment |
| Groupidentifier | A name for the collection of variables that creates the section. | lowercase surrounded by [] | no spaces or special characters allowed. |
| Label | Free tekst area that will print the value of the label. | - | - |
| File | .ini file name definition that is preformatting the options. the option define the fill color or image that needs to be loaded. | filename.ini | |
| Items | The values which are loading the predefined options in the ini file. | value,value | vales need to be comma seperated |
Option selector option working with Magento Sku
Values to be entered in attribute yd_conf_bediening_type
[groupidentifyer]
label = value
price = value comma seperated
thumb = [MagentoRoot]/filepath.png
image = [MagentoRoot]/filepath.png
values to be entered in attribute yd_conf_bedienings_opties
[bedieningopties]
file = bedieningopties.ini
items[groupidentyer] = SKUCODE,SKUCODE2,SKUCODE3
ini file format:
[skucode]
label = "custom label"
sku = "skucode"
Length only
The configurator is hybrid and can also work with length value only.
to switch set attribute yd_conf_length_only to YES
NOTE
The configurator is a highly advanced calculator that can work with multiple dynamic calulation methods and multiple calculation layers. It is depending on the base functionalities of Magento 2. Make sure that you master default Magento catalog management before you start to work with the configurator.
Contact support to learn more about the options of the configurator.