Price Info Widget
Objective
The price information widget enables the user to visualize the project price and editor price. This widget consists of two versions, the embed and the full page version. The embed version is the one integrated with HomeByMe For Kitchen Retailers planner and Bryo Home Website. According to different integration contexts, the widget has different manners of interactions with the integration context.
Widget Overview
Access
User can have access to Price information from Kitchen Retailer Application.
From Kitchen Retailer Application
1. Access from planner
The project price information can be accessed from the (i) step- 2 - Pick a Layout, (ii) step- 3 - Design Your Kitchen, and (iii) step- 4 Summary steps.
a. Access from Pick a layout Step
b. Access from Design your kitchen Step
c. Access from Summary Step
2. Access from Editors
The price information can be accessed in the worktop, wall panel, wall edge strip, or product editor after click on the information icon in the respective editor.
Access from worktop editor (similar in other editors)
Context
Like other default widgets, Price information should be embedded in the application as an iframe, the communication between the application and default widget should be established on iframe messages. To have an overview of the subject, please refer to
window.postMessage() 🔗.
Every Message published or subscribed by the Price information default widget should respect the following format:
| Key | Type | Description |
|---|---|---|
| event | String | Name of the event, which is used as a unique identifier |
| content | Object | Content of the event, which brings arguments helps to event handling |
Example
{
"event": "event name",
"content": {
"key1": "value for key1",
"key2": "value for key2"
}
}
Overview of the Synchronization Process
The following sequence diagram explains possible data synchronization between the application and Price information default widget.
Published Events (Output events)
Published events are those events that go from default widget to application.
"Listening"
Context
When the document and all sub-resources have finished loading, send the "Listening" event to inform the application (parent window) that it is ready to listen to parent window messages. This event must be sent once and only once.
Message Format
| Key | Type | Value/Template | Description |
|---|---|---|---|
| event | String | "Listening" | - |
Message Example
{
"event": "Listening"
}
"FormatPrice"
Context
When the calculation of prices under flitered categories is done, send the "FormatPrice" event to inform the application to format the prices according to locale.
Message Format
| Key | Type | Value/Template | Description |
|---|---|---|---|
| event | String | "FormatPrice" | - |
| content | Object | categories: Object totalPrice: Object filterList: Array translation: Object language: String namespace: String | - categories: filtered products in categories with respective total price - entryPoint: to determine the entryPoint for price information pop-in - filterList: For every entryPoint, list of closed tags to filter products with. - translation: Mapping of translations, with which to override the default one in the widget - language: locale code - namespace: namespace |
Message Example
{
"event": "FormatPrice",
"content":{
"categories": [
{
"categoryName": "linears",
"items": [
{
"children": [
{
"dbID": "14032",
"reference": "RUWOOD_2",
"name": "RUWOOD_2",
"typeID": 443,
"type": "material",
"freeTags": [
"pbd_linear"
],
"commercialDescription": "",
"shortDescription": "",
"thumbnailURLLarge": "",
"thumbnailURLMedium": "",
"thumbnailURLSmall": "",
"startDate": null,
"endDate": null,
"isExpired": false,
"brandID": 1,
"brandName": "Bryo",
"clientMetadata": null,
"width": 2460,
"height": 28,
"depth": 635,
"computedWidth": 2038,
"computedDepth": 635,
"quantity": 1,
"boardID": [
1
],
"isPriceless": false,
"price": {
"regular": {
"value": 100,
"type": "regular",
"startDate": null,
"endDate": null,
"additionalData": null
},
"current": {
"value": 100,
"type": "regular",
"startDate": null,
"endDate": null,
"additionalData": null
},
"discountType": "regular"
},
"totalPrice": {
"regular": 100,
"current": 100,
"type": "regular"
}
},
{
"dbID": "14032",
"reference": "RUWOOD_2",
"name": "RUWOOD_2",
"typeID": 443,
"type": "material",
"freeTags": [
"pbd_linear"
],
"commercialDescription": "",
"shortDescription": "",
"thumbnailURLLarge": "",
"thumbnailURLMedium": "",
"thumbnailURLSmall": "",
"startDate": null,
"endDate": null,
"isExpired": false,
"brandID": 1,
"brandName": "Bryo",
"clientMetadata": null,
"width": 2460,
"height": 28,
"depth": 635,
"computedWidth": 2280,
"computedDepth": 636,
"quantity": 1,
"boardID": [
2
],
"isPriceless": false,
"price": {
"regular": {
"value": 100,
"type": "regular",
"startDate": null,
"endDate": null,
"additionalData": null
},
"current": {
"value": 100,
"type": "regular",
"startDate": null,
"endDate": null,
"additionalData": null
},
"discountType": "regular"
},
"totalPrice": {
"regular": 100,
"current": 100,
"type": "regular"
}
}
],
"dbID": "14130",
"reference": "RUWOOD",
"name": "WOOD OAK",
"typeID": 443,
"type": "material",
"freeTags": [
"pbd_linear"
],
"commercialDescription": "",
"shortDescription": "Precut, 28mm Wood",
"thumbnailURLLarge": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/materials/878CD43D-20B3-49AA-95CD-131661ED8BD3/Thumbnails/512.jpg",
"thumbnailURLMedium": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/materials/878CD43D-20B3-49AA-95CD-131661ED8BD3/Thumbnails/256.jpg",
"thumbnailURLSmall": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/materials/878CD43D-20B3-49AA-95CD-131661ED8BD3/Thumbnails/64.jpg",
"startDate": null,
"endDate": null,
"isExpired": false,
"brandID": 1,
"brandName": "Bryo",
"clientMetadata": null,
"isPriceless": false,
"price": {
"regular": 200,
"current": 200,
"type": "regular"
},
"totalPrice": {
"regular": 200,
"current": 200,
"type": "regular"
}
}
],
"price": {
"regular": 200,
"current": 200,
"type": "regular",
"isRegular": true
}
},
{
"categoryName": "accessories_extras",
"items": [
null
],
"price": {
"regular": 24,
"current": 24,
"type": "regular",
"isRegular": true
}
}
],
"totalPrice": {
"regular": 224,
"current": 224,
"type": "reduced",
"vatInformation": "VAT included",
"isRegular": false
},
"monthlyPrice": 119.13,
"financeActivated": false,
"duration": 48,
"unavailablePrice": false
}
}
"CloseProjectPriceInfo"
Context
When the user clicks on the "close" icon on the Price information default widget, send the "CloseProjectPriceInfo" event to inform the application that the default widget has been destroyed.
Message Format
| Key | Type | Value/Template | Description |
|---|---|---|---|
| event | String | "CloseProjectPriceInfo" | - |
Message Example
{
"event": "CloseProjectPriceInfo"
}
Subscribed Events (Input events)
Subscribed events are those events that go from the application to default widget.
"BuildProjectPriceInfo"
Context
When the default widget has finished being loaded, the application will send this event to Price information default widget asking for products to be categorized according to a predefined list of closed tags.The total price of categories will also be calculated.
Message Format
| Key | Type | Value/Template | Description |
|---|---|---|---|
| event | String | "BuildProjectPriceInfo" | |
| content | Object | projectPriceInfoData: Object entryPoint: string filterList: Array translation: Object namespace: String | - projectPriceInfoData: Contains the project BOM. Refer to Bill of Material Reference for a complete description of BOM in JSON format. See also SetUpSettings to set the BOM version. - entryPoint: to determine the entryPoint for price info pop-in - filterList: For every entryPoint, list of closed tags to filter products with. - translation: Mapping of translations, with which to override the default one in the widget - namespace: namespace |
Message Example
{
"event": "BuildProjectPriceInfo",
"content":{
"projectPriceInfoData": {
"products": [
{
"dbID": "833",
"reference": "generique_archmodels_18_kit_gad_037",
"name": "DRAINING RACK",
"typeID": 420,
"type": "furniture",
"freeTags": [
"RemoveFromPlans"
],
"commercialDescription": "Draining rack.",
"shortDescription": "",
"thumbnailURLLarge": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/geometries/78959EC4-B353-43C2-BC30-13332C594D2A/Thumbnails/512.jpg",
"thumbnailURLMedium": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/geometries/78959EC4-B353-43C2-BC30-13332C594D2A/Thumbnails/256.jpg",
"thumbnailURLSmall": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/geometries/78959EC4-B353-43C2-BC30-13332C594D2A/Thumbnails/64.jpg",
"startDate": null,
"endDate": null,
"isExpired": false,
"brandID": 1,
"brandName": "Bryo",
"clientMetadata": null,
"uuid": "1F94063A-E400-4BE7-BD93-1F0F52AD2399",
"isPriceless": false,
"packs": []
}
],
"linears": [],
"packs": [],
"totalPrice": {
"regular": 5637.98,
"current": 5537.98,
"discountType": "reduced",
"vatInformation": "VAT included",
"startDate": null,
"endDate": null
},
"finance": {
"deposit": 553.8,
"monthly": 119.13,
"duration": 48,
"activated": false
},
"locale": "en-GB",
"currency": "EUR",
"distributionID": "SbNBXd",
"version": 9
},
"entryPoint": "Projectprice",
"filterList": [],
"translation": {
"common": {
"back": "Back",
"cancel": "Cancel",
"close": "Close",
"copy_clipboard": "Copy to clipboard",
"delete": "Delete",
"delete_overlay_title": "Delete this media?",
"download": "Download",
"no": "No",
"ok": "Ok",
"save": "Save",
"share": "Share",
"yes": "Yes",
"show_more": "Show more",
"search": "Search",
"open": "Open",
"duplicate": "Duplicate"
},
"price_info": {
"title": "Price information",
"footnote_1": "Products marked as 'Illustration purpose only' are for visual use and not included in the project price.",
"project_price_footnote_2": "* 48 months loan period with a 6.9% APR. Applying for finance is subject to application, financial circumstances and borrowing history.",
"cabinets": "Cabinets",
"linears": "Worktops and wall panels",
"appliance_sanitaries": "Appliances, sinks and taps",
"accessories_extras": "Accessories and extras",
"worktops_waterfall": "Worktops and waterfall",
"cutouts_cuts_joints_edge": "Cut-outs, cuts, joints, edges",
"wallpanel": "Wall panels",
"walledgestrip": "Wall edge strips",
"edges": "Edges",
"cabinets_fittings": "Cabinets and Fittings",
"noprice_p1": "The price cannot be calculated for the current design",
"noprice_p2": "Please click on the help center icon to check for possible errors:",
"alt": "Click on help center",
"cabinet_editor_footnote_2": "Items such as plinth, legs, worktop, etc are sold separately."
}
},
"namespace": "translation"
}
}
}
"OpenProjectPriceInfo"
Context
When the application has formatted price according to locale, it will send this event to Price information default widget asking for visualization of price information.
Message Format
| Key | Type | Value/Template | Description |
|---|---|---|---|
| event | String | "OpenProjectPriceInfo" | |
| content | Object | categories: Object totalPrice: Object filterList: Array translation: Object language: String namespace: String | - categories: filtered products in categories with respective total price - entryPoint: to determine the entryPoint for price information pop-in - filterList: For every entryPoint, list of closed tags to filter products with. - translation: Mapping of translations, with which to override the default one in the widget - language: locale code - namespace: namespace |
Message Example
{
"event": "OpenProjectPriceInfo",
"content":{
"categories": [
{
"categoryName": "linears",
"items": [
{
"children": [
{
"dbID": "14032",
"reference": "RUWOOD_2",
"name": "RUWOOD_2",
"typeID": 443,
"type": "material",
"freeTags": [
"pbd_linear"
],
"commercialDescription": "",
"shortDescription": "",
"thumbnailURLLarge": "",
"thumbnailURLMedium": "",
"thumbnailURLSmall": "",
"startDate": null,
"endDate": null,
"isExpired": false,
"brandID": 1,
"brandName": "Bryo",
"clientMetadata": null,
"width": 2460,
"height": 28,
"depth": 635,
"computedWidth": 2038,
"computedDepth": 635,
"quantity": 1,
"boardID": [
1
],
"isPriceless": false,
"price": {
"regular": {
"value": 100,
"type": "regular",
"startDate": null,
"endDate": null,
"additionalData": null
},
"current": {
"value": 100,
"type": "regular",
"startDate": null,
"endDate": null,
"additionalData": null
},
"discountType": "regular"
},
"totalPrice": {
"regular": 100,
"current": 100,
"type": "regular"
}
},
{
"dbID": "14032",
"reference": "RUWOOD_2",
"name": "RUWOOD_2",
"typeID": 443,
"type": "material",
"freeTags": [
"pbd_linear"
],
"commercialDescription": "",
"shortDescription": "",
"thumbnailURLLarge": "",
"thumbnailURLMedium": "",
"thumbnailURLSmall": "",
"startDate": null,
"endDate": null,
"isExpired": false,
"brandID": 1,
"brandName": "Bryo",
"clientMetadata": null,
"width": 2460,
"height": 28,
"depth": 635,
"computedWidth": 2280,
"computedDepth": 636,
"quantity": 1,
"boardID": [
2
],
"isPriceless": false,
"price": {
"regular": {
"value": 100,
"type": "regular",
"startDate": null,
"endDate": null,
"additionalData": null
},
"current": {
"value": 100,
"type": "regular",
"startDate": null,
"endDate": null,
"additionalData": null
},
"discountType": "regular"
},
"totalPrice": {
"regular": 100,
"current": 100,
"type": "regular"
}
}
],
"dbID": "14130",
"reference": "RUWOOD",
"name": "WOOD OAK",
"typeID": 443,
"type": "material",
"freeTags": [
"pbd_linear"
],
"commercialDescription": "",
"shortDescription": "Precut, 28mm Wood",
"thumbnailURLLarge": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/materials/878CD43D-20B3-49AA-95CD-131661ED8BD3/Thumbnails/512.jpg",
"thumbnailURLMedium": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/materials/878CD43D-20B3-49AA-95CD-131661ED8BD3/Thumbnails/256.jpg",
"thumbnailURLSmall": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/materials/878CD43D-20B3-49AA-95CD-131661ED8BD3/Thumbnails/64.jpg",
"startDate": null,
"endDate": null,
"isExpired": false,
"brandID": 1,
"brandName": "Bryo",
"clientMetadata": null,
"isPriceless": false,
"price": {
"regular": 200,
"current": 200,
"type": "regular"
},
"totalPrice": {
"regular": 200,
"current": 200,
"type": "regular"
}
}
],
"price": {
"regular": "200,00 €",
"current": "200,00 €",
"type": "regular",
"isRegular": true
}
},
{
"categoryName": "accessories_extras",
"items": [
null
],
"price": {
"regular": "24,00 €",
"current": "24,00 €",
"type": "regular",
"isRegular": true
}
}
],
"totalPrice": {
"regular": "224,00 €",
"current": "224,00 €",
"type": "reduced",
"vatInformation": "VAT included",
"isRegular": false
},
"monthlyPrice": "119,13 €",
"financeActivated": false,
"duration": 48,
"unavailablePrice": false
}
}