Product Sheet Widget · HomeByMe for Kitchen Retailers Documentation

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

Access from Properties Window

2. Access from Catalog Browser

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.

Sequence Diagram of Data Synchronization

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 🔗.