BrainDW IO

The BrainDW App for VTEX IO configures your store to properly interact with BrainDW services.

The installation of the app set up the BrainDW pixel app, the BrainDW recommendation-resolver and allows you to use use the exported front-end components inside the pages of your store theme.

The BrainDW recommendation-resolver an implementation of the VTEX recommendation protocol for recommendation shelves that is defined by the schema GraphQL recommendation-graphql.

Pixel App

The pixel app is responsible from capturing live store events and sending them to BrainDW to feed the recommendation strategies.

Store blocks

bdw-recommendation-shelf

The recommendation shelf is component that shows a collection of products using recommendation strategies.

This behavior is defined based on the context page where the shelf is placed. Based on this information, BrainDW evaluates which business rules are being followed on one specific shelf to provide the appropiate recommended products.

General

These is a set of rules that you can define for a bdw-shelf, regardless of the page where it is.

  • Best offers (for a specific category, a specific collection, across the site)
  • Most added to the cart (for a specific category, a specific collection, across the site)
  • Most viewed by ranking (for a specific category, a specific collection, across the site)
  • Last products viewed

Product page (PDP)

These is a set of specific rules that you can define for bdw-shelf that are inside the product page.

  • Parent category shelf.
  • Category shelf.
  • Cross shelf by SKUs.
  • Cross shelf by categories.

Up to 5 cross selling shelfs can be incorporated.

Category page (PLP)

These is a set of specific rules that you can define for a bdw-shelf that is inside the category page.

  • Header category shelf

Search no result

These is a set of specific rules that you can define for a bdw-shelf that is inside the no results page.

  • Search result shelf
  • Best offer shelf by search query.
  • Most viewed shelf
  • Last category viewed shelf

Prerequisites

The front end components and the BrainDW's recommendation algorithms are depending on the pixel app to fetch user data.

In order to have the pixel app and, there by, the BrainDW app working properly, you need to notify the BrainDW team about your insterest in installing the application in your store. For this, you can send a message to soporte@braindw.com. You should expect as response a Client Key (save this key for the configuration steps) and credentials to access the BrainDW configuration panel of your components.

Configuration

It is possible to install in your store either by using App Store or the VTEX IO Toolbelt.

Using VTEX App Store

  1. Access the Apps section in your account's admin page and look for the BrainDW IO box;
  2. Then, click on the Install button;
  3. You'll see a warning message about needing to enter the necessary configurations. Scroll down and type in your CLIENT KEY and your google analytic's TRACKING ID.
  4. You don't need to change the default API URL.
  5. Click on Save.
  6. You can now insert the bdw-recommendation-shelf blocks into your store theme.

Using VTEX IO Toolbelt

  1. Install the braindw.braindw-io@0.x app. You can confirm that the app has now been installed by running vtex ls again.
  2. Access the Apps section in your account's admin page and look for the BrainDW IO box. Once you find it, click on the box.
  3. Fill in the "BrainDW IO" field with your CLIENT KEY and Google Analytics TRACKING ID.
  4. You don't need to change the default API URL.
  5. Click on Save.

Once installed

You can now insert the bdw-recommendation-shelf blocks into your store theme. You are going to have access to the BrainDW panel. From here you will be able to set up the rules for the different blocks inserted into your store theme.

  1. Add the BrainDW IO app to your theme's dependencies on the manifest.json, for example:
  "dependencies": {
    "braindw.braindw-io": "0.x",
  }
  1. Add the bdw-recommendation-shelf block into your theme.

The props of the bdw-recommendation-shelf are:

Prop name Type Description Default value
title String Title to display above the shelf. ''
id String ID of the shelf, it links the shelf with the BrainDW configuration panel. BY_PAGE

Advanced configuration

The bdw-recommendation-shelf is a fork of the original recommendation-shelf implemented by VTEX. As such it can be customized by building the default-shelf component that the recommendation-shelf render.

To do this, you'll need to add the shelf-components app to your theme's dependencies on the manifest.json file:

  "dependencies": {
+   "vtex.shelf-components": "0.x"
  }
`

Below, you can find an implementation example:

  "store.home": {
    "blocks": [
      "flex-layout.row#row-recommendation-shelf",
    ]
  },
  "flex-layout.row#row-recommendation-shelf": {
    "children": ["bdw-recommendation-shelf"]
  },
  "bdw-recommendation-shelf": {
    "blocks": ["default-shelf"]
  },
  "default-shelf": {
    "blocks": ["list-context.product-list", "list-context.product-list-static"]
  },
  "list-context.product-list": {
    "blocks": ["product-summary.shelf#demo1"],
    "children": ["slider-layout#demo-products"]
  },
  "list-context.product-list-static": {
    "blocks": ["product-summary.shelf#demo1"],
    "children": ["slider-layout#demo-products"]
  },
  "product-summary.shelf#demo1": {
    "children": [
      "stack-layout#prodsum",
      "product-summary-name",
      "product-rating-inline",
      "product-summary-space",
      "product-summary-price",
      "product-summary-buy-button"
    ]
  },
  "slider-layout#demo-products": {
    "props": {
      "itemsPerPage": {
        "desktop": 5,
        "tablet": 3,
        "phone": 1
      },
      "infinite": true,
      "fullWidth": false
    }
  }

Customization

No CSS Handles are available yet for the app customization.