banner-client-js

Front end Banner SDK for Linx Banner API customers

Installation

CDN

<script src="https://cdn.jsdelivr.net/npm/@linx-impulse/banner-client-js/dist/linx-banner.min.js"></script>

There will be created a property called banner in global linx object.

const LinxBanner = linx.banner;
// or
const LinxBanner = window.linx.banner;

npm

npm install --save @linx-impulse/banner-client-js

Using some module bundler like Webpack, it should be called this way:

const LinxBanner = require('@linx-impulse/banner-client-js');
// or
import { BannerClient } from '@linx-impulse/banner-client-js';

Usage

getRecommendations

Parameters

• options (object)
  • page(string): current page. Ex: home, product, category, subcategory, cart.
  • source(string): device of user. Ex: app, desktop, mobile.
  • showLayout(boolean): whether or not bring layout properties previously set. Default: false.
  • userId(string): the user identifier, used to personalize slides even when user access a new device.
  • homologation(boolean): enable banner homologation. With this feature enabled the disabled banners will be sent on api response.
  • timeout(number): defines a timeout for request in milliseconds.
  • categories(array): list of categories of the page. This information is used by api to apply the exhibition rules for banners.
  • product(object): object containing product data. Useful for product pages.
  • tags(array): array of tags of the page.
  • url(string): url of the page.
  • testGroup(string): AB test group info.
  • searchQuery(string): query terms used if in a search page.

PS: options parameter is not required, neither any of these properties.

Example

LinxBanner.getRecommendations({
  page: 'home',
  source: 'desktop',
  showLayout: true,
  userId: 'user01',
})
  .then((banners) => {
    console.log('Banners: ', banners);
  })
  .catch((error) => {
    console.error('Banners error: ', error);
  });

LinxBanner.getRecommendations({
  page: 'product',
  source: 'mobile',
  showLayout: true,
  product: {
    id: 'prod001',
  },
  url: 'https://www.yourdomain/product/prod001'
})
  .then((banners) => {
    console.log('Banners: ', banners);
  })
  .catch((error) => {
    console.error('Banners error: ', error);
  });

LinxBanner.getRecommendations({
  page: 'subcategory',
  source: 'desktop',
  homologation: true,
  showLayout: true,
  categories: [
    { id: 'cat01', parents: null },
    { id: 'cat02', parents: [ 'cat01' ] },
  ],
  tags: [
    { id: 'tag01' },
    { id: 'tag02' },
    { id: 'tag03' },
  ],
  url: 'https://www.yourdomain/category/cat01/cat02'
})
  .then((banners) => {
    console.log('Banners: ', banners);
  })
  .catch((error) => {
    console.error('Banners error: ', error);
  });

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

PS: Do not forget the tests ;)

Test

Run test command:

npm test

Release

• Login npm

• Run release command:

  npm run release

Changelog

CHANGELOG

License

MIT