Hello Retail

Add account ID and tracker to registry

In order to integrate your flight shop with Hello Retail you must first install it

Copy

Copied

yarn add @jetshop/flight-addwish

To start you must first add the Hello Retail tracker to the tracker registry in your shop.config.js. You can find your Hello Retail account ID by

Open the Hello Retail dashboard of your shop here
Navigate to Settings → Tracking script
Copy the Partner id

Modify your shop config like so.

Copy

Copied

import { addwishTracker } from "@jetshop/flight-addwish";
export default {
  // [..] your shop config
  trackers: [addwishTracker("YOUR_ADDWISH_ACCOUNT_ID")],
};

Usage

Doing this will enable Hello Retail in your shop. However in order to use recommendations you must import the useAddwish hook into the page you would like to render recommendations into.

The useAddwish hook takes an object of boxes which has keys representing the recommendation ids you have set up. You must include all recommendation ids for a given page in the useAddwish hook call or else duplicate products will be returned. You can also include optional filters or the url for the current product.

You must also include a boolean pageLoaded flag to indicate when all the data for the current page has been loaded. This ensures that the path and hierarchies are available to addwish before it starts to fetch the data.

Copy

Copied

const { addWishResponseBoxItems } = useAddwish({
  boxes: {
    ['i-am-an-addwish-recommendation-id']: {
      url: selectedChannel.url + product.primaryRoute.path,
      hierarchies: [data.route.breadcrumbs], // These If needed you can specify multiple hierarchies, like for instance [["Shoes", "Woman"], ["On sale", "Woman"]]
      brand: 'Nike' // This is optional and can be a brand or any other filter
    },
    ['i-am-a-different-addwish-recommendation-id']: {
      url: selectedChannel.url + product.primaryRoute.path,
      brand: 'Nike' // This is optional and can be a brand or any other filter
    }
  }
  pageLoaded: !loading
});

Note that the parents need to be reversed in order to be in the expected order for AddWish.

For upsell recommendation boxes, you will need top provide the information from the cart. In the example below, you will need to send a list of URLs for the parameter urls (note the plural version compared to the example above). If you would like to state to the customer how much they need to buy to get free shipping, you should also pass the price as an argument.

Copy

Copied

const { addWishResponseBoxItems } = useAddwish({
  boxes: {
    "1234567890abcdef12345678": { // This is the recommendation box ID, which is unique to your API call. Contact Hello Retail support to get your own ID.
      // Here, you can specify filter values, and other options for this specific recommendation box.
      // For example, you can specify the url of another product to get recommendations for:
      urls: cart.items.map(item => selectedChannel.url + item.product.primaryRoute.path),
      price: cart.productTotal.incVat,
      // You can specify filter values like this:
      hierarchies: cart.items.map(item => item.product.categories.map(category => category.name)), // If needed you can specify multiple hierarchies, like for instance [["Shoes", "Woman"], ["On sale", "Woman"]]

    },
    "abc4567890abcdef12345432": {} // You can leave the options empty, to use the default url (the current page)
  }
  pageLoaded: !loading
});

The addWishResponseBoxItems will come back as an object with the recommendation ids as keys with a loading state and an array of items. To then use these items extract the productNumber and use is as an articleNumber in a query to the StoreAPI. Make sure to skip the query if the articleNumbers are empty. Additionally, an addwishData property must be added to the products sent to the ProductGrid component in order to enable click tracking.

Copy

Copied

const articleNumbers = (
  addWishResponseBoxItems["i-am-an-addwish-recommendation-id"]?.items || []
).map((item) => item.productNumber);

const addwishProductsQueryResult = useQuery(addwishProductsQuery, {
  variables: {
    articleNumbers: relatedArticleNumbers,
  },
  skip: articleNumbers.length === 0,
});

const products =
  addwishProductsQueryResult?.data?.products.map((product) => {
    return {
      ...product,
      addwishData: addWishResponseBoxItems[relatedId]?.items.find(
        (item) => item.productNumber === product.articleNumber
      ), // Make sure to include the addwishData to enable click tracking
    };
  }) || [];

const loading =
  addWishResponseBoxItems["i-am-an-addwish-recommendation-id"].loading ===
    "LOADING" || addwishProductsQueryResult.loading;
if (loading) {
  return <div>Loading</div>;
} else {
  return <ProductGrid products={products} />;
}

Here is an example AddwishProductQuery that you can use:

Copy

Copied

#import "@jetshop/core/data/fragments/RouteCrumbFragment.gql"
#import "@jetshop/core/data/fragments/ProductPriceFragment.gql"
#import "@jetshop/core/data/fragments/BadgeFragment.gql"

query AddwishProductQuery(
  $articleNumbers: [String] = null
  $ids: [Int] = null
) {
  products(articleNumbers: $articleNumbers, ids: $ids) {
    id
    articleNumber
    name
    subName
    shortDescription
    description
    mainHeader
    primaryRoute {
      ...RouteCrumb
    }
    ...ProductPrice
    images {
      modifiedDate
      alt
      title
      url
    }
    badges {
      ...Badge
    }
  }
}