JFY client-side configuration

Rendering

The easiest way to integrate JFY features is to use the following example code every place where you want there to be a JFY link:

Example JFY link

<a href="" class="jfy-link">Just For You</a>
<script type="text/javascript">
  $('.jfy-link').attr('href', BR.mobile.getJfyUrl("jfy,dynamic_categories"));
</script>

The BR.mobile.getJfyURL() method retrieves the URL of the personalized items page that you want to show to your customers.

Custom rendering

Alternately, you can render results yourself, using the BR.pers.getJusyForYou(options, callback) function. The following code snippet demonstrates the simplest template implementation:

Example of simplest rendering implementation

var personalizationConfig = {
  account_id: <Bloomreach Provided Account ID>,
  domain_key: "merchant_com",
  environment: "prod",
}
function renderPersonalizationResults (response) {
// render logic for data coming from JFY plugin
}
Br.pers.getJustForYou(personalizationConfig, renderPersonalizationResults);

Customer rendering parameters

The following code snippet is an example of a complex template implementation:

Example of complex rendering implementation
 

// Default JFY configuration
var jfyConfig = {
  accountId: <Bloomreach Provided Account ID>,
  authKey: '',
  domainKey: 'example_com',
  environment: 'standalone'
};

BR.pers.getJustForYou(jfyConfig, showJfy);

/* Callback function to show JFY results */
function showJfy(results, successFlag, errorMessage) {
  if (!successFlag) {
    console.log('Error: ', errorMessage);
    return;
  }

  console.log('jfyResults', results);
  
  $('#jfy-title').html(results.title);

  var jfyContainer = $('#jfy-container');
  jfyContainer.html('');

  var productGrid = $('<div></div>', {'class': 'productgridpage'});
  jfyContainer.append($('<div></div>', {'class': 'productgrid'}).append(productGrid));
  for (var i = 0; i < results.products.length; i++) {
    renderProduct(results.products[i], productGrid, results.brTrkData)
  }
}

/* Render an individual product */
function renderProduct(product, productGrid, brTrkData) {
  var productCell = $([
                       '<a href="', product.url, '" onclick="return false;">',
                         '<div class="product">',
                           '<img src="', product.thumb_image, '" />',
                           '<span class="name">', product.title, '</span>',
                           '<div class="pricing">',
                             '<div class="price">$',
                             product.price_range && product.price_range.length ? product.price_range[0].toFixed(2) + '-$' + product.price_range[1].toFixed(2) : product.price.toFixed(2),
                             '</div>',
                           '</div>',
                           '<div class="clear"></div>',
                         '</div>',
                       '</a>',
                     ].join(''));
  productCell.data('brTrkData', brTrkData);
  productGrid.append(productCell);
}

Blacklist

You can specify excluded categories from Dynamic Categories. For example, you might decide to exclude sexual wellness categories from Dynamic Categories. Putting these categories on a blacklist prevents them from being automatically suggested when a user browses for other drugstore items. To blacklist items from Product Recommendations, you need to contact your Bloomreach Technical Manager.