Product Sheet widget · HomeByMe for Home Retailers Documentation

Objective

ProductSheet widget enables user to visualize informations of a product, it also brings together user actions on each product like product insertion, product configuration and add to favorite.

Widget Overview

Access

User can have access to ProductSheet widget, one is the icon "info" from product properties window, another is from icon "i" from catalog browser.

1. Access from Properties Window

Access from Properties Window

2. Access from Catalog Browser

Access from Catalog Browser

Context

Like other default widget, ProductSheet should be embeded 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 subjet, 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 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 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 "Listening" event to inform the application(parent window) that it is ready to listen to parent window messages. This event must ben sent once and only once.

Message Format

Key	Type	Value/Template	Description
event	String	"Listening"	-

Message Example

{
    event: "Listening",
}

"AddProduct"

Context

When user click on "Add to project" button on te ProductSheet widget, send "AddProduct" message to application to inform request of product insertion.

Message Format

Key	Type	Value/Template	Description
event	String	"AddProduct"	-

Message Example

{
    event: "AddProduct",
}

"ConfigureProduct"

Context

For configurable product, there will be the possibility to configure it with a third-party configurator via button "configure" on the ProductSheet widget, when user click on the button "configure", send "ConfigureProduct" message to inform the application of the user request, the application will remove the ProductSheet iframe and switch to external configurator.

Message Format

Key	Type	Value/Template	Description
event	String	"ConfigureProduct"	-

Message Example

{
    event: "ConfigureProduct",
}

"AddToFavorite"

Context

When the user click on the symbol with the shape of heart on the ProductSheet widget, he asks for adding the product to his favorite list, send "AddToFavorite" message to inform the application of his request. This message should contain the information which product to add and also where does the product coming from. The request can comming from product main view, or product browser.

Message Format

Key	Type	Value/Template	Description
event	String	"AddToFavorite"
content	Object	`dbId`: String `from`: String	- `dbId`: dbId of the product to be added to the favorite list - `from`: where does this product coming from, there are two possible values, if the product is the main product currently displayed in the product sheet, it should be “product-sheet”, if the product is one of the similar product in the list, it should be “product-browser”

Message Example

The event is triggered from ProductSheet widget main view.

{
   event:"AddToFavorite",
   content: 
   {
        dbId: "GENERIC_FURNITURE_0270",
          from: "product-sheet"
   }
}

The event is triggered from ProductSheet widget sub section, a similar product in the product browser section.

{
   event:"AddToFavorite",
   content: 
   {
        dbId: "GENERIC_FURNITURE_0270",
          from: "product-browser"
   }
}

"ShareProductByOption"

Context

When user want to share the product through social network platform, like facebook, twitter, pinterest etc.

Message Format

Key	Type	Value/Template	Description
event	String	"ShareProductByOption"
content	Object	`option`: String `name`: String `productSheetUrl`: String	`option`: through which social network to share the product. `name`: name of the product to share. `productSheetUrl`: url of the product in the commercial site web.

Message Example

{
   event:"ShareProductByOption",
   content: 
   {
        option: "pinterest",
          name: "Service Porcelaine 18 pces PERLE CHIC",
          productSheetUrl: " http://www.cdiscount.com/maison/art-de-la-table/assiettes/service-complet/service-porcelaine-18-pces-perle-chic/f-117902305-KATS0321.html",
   }
}

"ProductClicked"

Context

When user click 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	"ShareProductByOption"
content	Object	`dbId`: String	`dbId`: ID of the product stored in the data base.

Message Example

{
   event:"ProductClicked",
   content: 
   {
        dbId: "GENERIC_FURNITURE_0270"
   }
}

"ChangeOptions"

Context

When user modify value of dimension/material parameter, the widget should send this iframe message to inform the changes in parameter value of the selected model.

Message Format

Key	Type	Value/Template	Description
event	String	"ShowPreviousProduct"
content	Object	`id`: String `type`: String `value`: Integer	- `id`: ID of the parameter - `type`: Type of parameter - `value`: New value for the parameter to set

Message Example

{
   event:"ChangeOptions",
   content: 
   {
        id: "width"
        type: "1"
        value: "1400"
   }
}

"ShowPreviousProduct"

Context

When user click on “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: "GENERIC_FURNITURE_0270"
   }
}

"CloseProductSheet"

Context

When the user click on "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 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 visulization of product informations.

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 `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 `sharingOptions`: Array	- `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 - `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. - `sharingOptions` : possible options to share the product.

Message Example

{
  "event": "OpenProductSheet",
  "content": {
    "dbID": "GENERIC_FURNITURE_0295",
    "reference": "banc_05",
    "name": "Bench",
    "typeID": 225,
    "type": "furniture",
    "freeTags": [],
    "commercialDescription": "Bench",
    "shortDescription": "",
    "thumbnailURLLarge": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/geometries/760E0ED0-4F2D-4694-92A7-700DBD87B327/Thumbnails/512.jpg",
    "thumbnailURLMedium": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/geometries/760E0ED0-4F2D-4694-92A7-700DBD87B327/Thumbnails/256.jpg",
    "thumbnailURLSmall": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/geometries/760E0ED0-4F2D-4694-92A7-700DBD87B327/Thumbnails/64.jpg",
    "startDate": null,
    "endDate": null,
    "isExpired": false,
    "brandID": 5,
    "brandName": "BryoForHR",
    "clientMetadata": null,
    "price": {
      "regular": {
        "value": 7,
        "type": "regular",
        "startDate": null,
        "endDate": null
      },
      "current": {
        "value": 7,
        "type": "regular",
        "startDate": null,
        "endDate": null
      },
      "discountType": "regular"
    },
    "prices": {
      "regularPrice": "£7.00",
      "standard": true
    },
    "width": 1400,
    "height": 900,
    "depth": 500,
    "isProductReadOnly": false,
    "parameters": [
      {
        "id": "width",
        "type": 1,
        "name": "Width",
        "isLength": true,
        "currentValue": 1800,
        "displayValue": "4 seats",
        "possibleValueSet": [
          {
            "value": 1800,
            "displayName": "4 seats"
          },
          {
            "value": 1400,
            "displayName": "3 seats"
          },
          {
            "value": 800,
            "displayName": "2 seats"
          }
        ]
      },
      {
        "id": "banc",
        "type": 6,
        "name": "Materials",
        "isMaterial": true,
        "possibleValueSet": [
          {
            "value": "GENERIC_PUBMAT_0198",
            "displayName": "bois_noyer_05",
            "imageURL": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/materials/D52D5DFD-A5E4-442E-81B7-50DE383038C9/Thumbnails/64.jpg"
          }
        ],
        "currentValue": "GENERIC_PUBMAT_0198",
        "displayValue": "bois_noyer_05",
        "imageURL": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/materials/D52D5DFD-A5E4-442E-81B7-50DE383038C9/Thumbnails/64.jpg"
      }
    ],
    "isProductSet": false,
    "subProducts": [
      {
        "dbID": "GENERIC_FURNITURE_0063",
        "reference": "banc_06",
        "name": "Mike bench",
        "typeID": 225,
        "type": "furniture",
        "freeTags": [],
        "commercialDescription": "This functional leather and metal bench will lend itself to all roles: as a seat around a dining table, decorated with a few cushions in an entrance hall or simply installed at the end of the bed.",
        "shortDescription": "",
        "thumbnailURLLarge": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/geometries/A65BBDA0-FD85-4D30-A94E-9C371C6B0383/Thumbnails/512.jpg",
        "thumbnailURLMedium": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/geometries/A65BBDA0-FD85-4D30-A94E-9C371C6B0383/Thumbnails/256.jpg",
        "thumbnailURLSmall": "https://byme-enterprise-preprod-stgg.s3.eu-west-1.amazonaws.com/data/geometries/A65BBDA0-FD85-4D30-A94E-9C371C6B0383/Thumbnails/64.jpg",
        "startDate": null,
        "endDate": null,
        "isExpired": false,
        "brandID": 5,
        "brandName": "BryoForHR",
        "clientMetadata": null,
        "width": 1897,
        "height": 421,
        "depth": 512
      }
    ],
    "sharingOptions": [
      {
        "name": "facebook",
        "enabled": true
      }
      {
        "name": "embed",
        "enabled": true
      }
    ],
    "hasBackButton": false,
    "productSheetURL": "",
    "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"
      },
      "product_sheet": {
        "tab_infomation": "Information",
        "configuration_title": "You can configure this product",
        "more_detailes": "+ more detailes",
        "add_product_title": "Add in project",
        "configure_title": "Configure",
        "visit_store": "Visit store",
        "share_title": "Share",
        "sharing_options": {
          "facebook": "Facebook",
          "twitter": "Twitter",
          "pinterest": "Pinterest",
          "mail": "Mail",
          "embed": "Embed"
        },
        "product_browser": {
          "info": "More info"
        },
        "share_product": {
          "title": "Share this product",
          "copy_title": "Copy to clipboard",
          "cancel": "Cancel"
        }
      }
    },
    "language": "en-GB",
    "namespace": "translation",
    "medias": [
      {
        "key": "banc6",
        "order": null,
        "type": "IMAGE",
        "extension": "JPG",
        "uuid": "13D09232-AD07-47D2-81E2-47E0D7F7B1AF",
        "lastProcessingStatus": {
          "media": {
            "statusID": 3,
            "reportFile": "data/worker-reports/2020/07/21/GENERIC_FURNITURE_0295-media-banc6-13_29_29"
          }
        },
        "dateCreation": "2020-07-21T09:54:32.000Z",
        "dateUpdate": "2020-07-21T13:28:44.000Z"
      }
    ]
  }
}

Library

Website:

Website could be default Website powered by 3DVia, or any client Website where embed the HomeByMe For Home Retailers planner and ProductSheet widget. In the context of integration of ProductSheet widget, it refers to be the parent window of widget iframe.

Application:

HomeByMe for Home 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 the Integrate Branding section 🔗.