Product Sheet Widget
Objective
ProductSheet widget enables the user to visualize information of a product, it also brings together user actions on each product like product insertion and product configuration.
Widget Overview
Access
Users can have access to ProductSheet widget:
1. Access from Properties Window
2. Access from Catalog Browser
Context
Like other default widgets, ProductSheet should be embedded in the application as an iframe, the communication between the application and default widget should be established and maintained on iframe messages. To have an overview of the subject, please refer to
window.postMessage() 🔗. .
Every Message published or subscribed by the ProductSheet 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 data synchronization between the application and ProductSheet widget, and also the necessary user interactions.
Published Events (Output events)
Published events are those events that ProductSheet widget will send to its parent window (the 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",
}
"ProductClicked"
Context
When the user clicks on one of the product in the similar product section, this message is sent to the planner to display the selected product
Message Format
Key | Type | Value/Template | Description |
---|---|---|---|
event | String | "ProductClicked" | |
content | Object | dbId : String | dbId : ID of the product stored in the data base. |
Message Example
{
event:"ProductClicked",
content:
{
dbId: "13801"
}
}
"ShowPreviousProduct"
Context
When the user clicks on the “back” button on the product sheet view, he/she asks to see the previous product to be displayed in the product sheet.
Message Format
Key | Type | Value/Template | Description |
---|---|---|---|
event | String | "ShowPreviousProduct" | |
content | Object | dbId : String | - dbId : ID of the product stored in the data base |
Message Example
{
event:"ShowPreviousProduct",
content:
{
dbId: "13801"
}
}
"CloseProductSheet"
Context
When the user clicks on the "close" icon on the ProductSheet widget, send "CloseProductSheet" message to inform the application that the ProductSheet widget has been destroyed.
Message Format
Key | Type | Value/Template | Description |
---|---|---|---|
event | String | "CloseProductSheet" | - |
Message Example
{
event: "CloseProductSheet",
}
Subscribed Events (Input events)
Subscribed events are those events that go from Website to default widget.
"OpenProductSheet"
Context
When the ProductSheet widget has finished being loaded (thus with the reception of message "Listening" from widget), the application will send "OpenProductSheet" event to ProductSheet widget to ask for visualization of product information.
Message Format
Key | Type | Value/Template | Description |
---|---|---|---|
event | String | "OpenProductSheet" | |
content | Object | dbID : String reference : String name : String typeID : Integer freeTags : Array commercialDescription : String shortDescription : String thumbnailURLLarge : String thumbnailURLMedium : String thumbnailURLSmall : String startDate : String endDate : String isExpired : Boolean brandID : Integer brandName : String clientMetaData : Object width : Integer height : Integer depth : Integer disableFavorites : Boolean hasDimensionLabel : Boolean hasFooter : Boolean hasDropdown : Boolean ecoFeeLabel : String ecoFeePrice : String ecoFeeType : String energyLabel : String energyLabel2 : String isProductReadOnly : Boolean parameters : Array isProductSet : Boolean productSheetURL : String hasBackButton : Boolean translation : Object language : String namespace : String medias : Array standard : Boolean price : Object prices : Object projectDateTranslation : String regularPriceLabel : String reduced : Boolean subProducts : Array showDimensions : Boolean | - dbID : ID of the product stored in the data base. - reference : Reference of the product defined in the 3DCloud. - name : Name of the product defined in the 3DCloud - typeID : ID of the type of the product - freeTags : A list of freeTags that the products belongs to - commercialDescription : Commercial description of the product - shortDescription : Short description of the product - thumbnailURLLarge : Url of the product thumbnail of high definition - thumbnailURLMedium : Url of the product thumbnail of medium definition - thumbnailURLSmall : Url of the product thumbnail of low definition - startDate : Begining date of the current price - endDate : Ending date of the current price - isExpired : Whether the product in expired in the catalog - brandID : ID of the brand that the product belongs to - brandName : Name of the brand that the product belongs to - clientMetaData : Addition information of the product that the client can add/edit/delete. - width : Value of the width parameter - height : Value of the height parameter - depth : Value of the depth parameter - disableFavorites : Whether favorites should be disabled or not - hasDimensionLabel : Whether dimension Label is displayed or not- hasFooter : Whether footer is displayed or not- hasDropdown : Whether dropdown is displayed or not- ecoFeeLabel : Label for eco fee - ecoFeePrice : Price for eco fee - ecoFeeType : Type for eco fee - energyLabel : Energy Label on product scale 1 - energyLabel2 : Energy Label on product scale 2 - isProductReadOnly : Whether is product sheet is read only - parameters : An Array of Parameters concerning the product rule to display in the product sheet - isProductSet : Whether the current product is type of ProductSet - productSheetURL : URL of the product to share - hasBackButton : Whether there should be button back display on the main view of the product sheet - translation : Mapping of translations, with which to override the default one in widget - language : locale code - namespace : namespace - medias : List of thumbnails to display for the current product - standard : Whether current price is a standard price - price : Different kind of price methods that has been associated to the current product - prices : Current price - projectDateTranslation : a text explains the validity period of the current price - regularPriceLabel : text label to display near the regular price amount - reduced : whether the current price is a reduced price - subProducts : a list of similar products to display in the right-side list, OR a collection of furnitures in the current product set.- showDimensions : whether the dimesions of the product is displayed or not. Parameters that are displayed for the dimensions are fixed and are as follows: width, depth, height, thickness and length. |
Message Example
{
"event": "OpenProductSheet",
"content": {
"dbID": "13801",
"reference": "KIR18V60",
"name": "FRIDGE",
"typeID": 188,
"type": "furniture",
"freeTags": ["pbd_appliance"],
"commercialDescription": "Bosch refrigerator KIR18V69",
"shortDescription": "",
"thumbnailURLLarge": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/geometries/7ADA5A1D-EFE6-4ABC-91D3-0DCB2F5F3989/Thumbnails/512.jpg",
"thumbnailURLMedium": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/geometries/7ADA5A1D-EFE6-4ABC-91D3-0DCB2F5F3989/Thumbnails/256.jpg",
"thumbnailURLSmall": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/geometries/7ADA5A1D-EFE6-4ABC-91D3-0DCB2F5F3989/Thumbnails/64.jpg",
"startDate": null,
"endDate": null,
"isExpired": false,
"brandID": 1,
"brandName": "Bryo",
"clientMetadata": null,
"price": {
"regular": {
"value": 395,
"type": "regular",
"startDate": null,
"endDate": null
},
"current": {
"value": 395,
"type": "regular",
"startDate": null,
"endDate": null
},
"ecoFee": {
"value": 2,
"type": "regular",
"startDate": null,
"endDate": null
},
"discountType": "regular"
},
"prices": {
"regularPrice": "£395.00",
"standard": true
},
"width": 540,
"height": 873,
"depth": 549,
"disableFavorites": true,
"hasDimensionLabel": true,
"hasFooter": true,
"hasDropdown": true,
"ecoFeeLabel": "eco-fee",
"ecoFeePrice": "2,00 €",
"ecoFeeType": null,
"energyLabel": "A",
"energyLabel2": "B",
"isProductReadOnly": false,
"parameters": [
{
"id": "width",
"type": 1,
"name": "Width",
"isLength": true,
"currentValue": "540 mm",
"displayValue": undefined,
"possibleValueSet": [
{
"value": 540,
"displayName": undefined
},
]
},
{
"id": "height",
"type": 1,
"name": "height",
"isLength": true,
"currentValue": "873 mm",
"displayValue": undefined,
"possibleValueSet": [
{
"value": 873,
"displayName": undefined
},
]
},
],
"showDimensions": true,
"isProductSet": false,
"subProducts": [],
"hasBackButton": false,
"productSheetURL": "",
"translation": {
"common": {
"back": "Back",
"cancel": "Cancel",
"close": "Close",
},
"product_sheet": {
"tab_infomation": "Information",
"product_browser": {
"info": "More info"
},
}
},
"language": "en-GB",
"namespace": "translation",
"medias": []
}
}
Library
Website:
The website could be the default Website powered by 3DVIA, or any client Website where embed the HomeByMe For Kitchen Retailers planner and ProductSheet widget. In the context of integration of ProductSheet widget, it refers to be the parent window of the widget iframe.
Application:
HomeByMe for Kitchen Retailers planner
Branding
This widget, like all other widgets, will benefit from branding styles when opened from the planner or the website. To learn more on how to customize the look of the widgets, please refer to the Integrate Branding section 🔗.