Findify

Findify Developer Hub

Welcome to the Findify developer hub. You'll find comprehensive guides and documentation to help you start working with Findify as quickly as possible, as well as support if you get stuck. Let's jump right in!

BurstCommerce Flair Stickers

📘

Components

In order to Integrate Flair stickers into Findify, you would need to:

  1. Activate the Flair API as per this documentation.
  2. Add this code snippet into the components/Cards/Product/view.tsx component:
/**
 * @module components/Cards/Product
 */

import React from 'react'
... imports here ...
import { lifecycle } from 'recompose'; //import the lifecycle method

... some code ...

/* Add the code to grab the values from Flair API */
const enhancer = lifecycle({
  async componentDidMount(){
    const item = this.props.item;
    if(FlairApp && FlairApp.getProductBadges){
      const sticker = await FlairApp.getProductBadges({url: item.get('product_url')});
      if(sticker){
        this.setState({
          sticker
        });
      }
    }
  }
});

... some code ...

const ProductCardView: React.SFC<IProductCardProps> = ({
  item,
  config,
  theme,
  sticker //add the sticker state
}: any) => (
  <a
    onClick={item.onClick}
    href={item.get('product_url')}
    className={classNames(
      theme.root,
      config.get('simple') && theme.simple,
      theme.productCard,
    )}
  >
      ... some code ...
      /* Add the sticker content to the Product Card  */
      <div display-id={sticker} className='findify-product-stickers-wrapper' dangerouslySetInnerHTML={{__html:sticker}}></div>
      ... some code ...
  </a>
)

//wrap the Product Card component with an enhancer
export default enhancer(ProductCardView);

The full Product Card component may look like this:

/**
 * @module components/Cards/Product
 */

import React from 'react'
import classNames from 'classnames'
import Image from 'components/common/Picture'
import Truncate from 'components/common/Truncate'
import Text from 'components/Text'
import Rating from 'components/Cards/Product/Rating';
import Price from 'components/Cards/Product/Price';
import template from 'helpers/template';
import { DiscountSticker, OutOfStockSticker  } from 'components/Cards/Product/Stickers';
import { List } from 'immutable'
import { IProduct, MJSConfiguration, ThemedSFCProps } from 'types/index';
import BundleAction from 'components/Cards/Product/BundleAction';
import { lifecycle } from 'recompose'; //import the lifecycle method

const Title: any = ({ text, theme, ...rest }) => (
  <Text display-if={!!text} className={theme.title} {...rest}>{text}</Text>
);

const Description: any = ({ text, theme, ...rest }) => (
  <p
    display-if={!!text}
    className={theme.description}
    {...rest}
  >
    <Truncate>{text}</Truncate>
  </p>
);

/* Add the code to grab the values from Flair API */
const enhancer = lifecycle({
  async componentDidMount(){
    const item = this.props.item;
    if(FlairApp && FlairApp.getProductBadges){
      const sticker = await FlairApp.getProductBadges({url: item.get('product_url')});
      if(sticker){
        this.setState({
          sticker
        });
      }
    }
  }
});


export interface IProductCardProps extends ThemedSFCProps {
  item: IProduct;
  config: MJSConfiguration;
}

const ProductCardView: React.SFC<IProductCardProps> = ({
  item,
  config,
  theme,
  sticker //add the sticker state
}: any) => (
  <a
    onClick={item.onClick}
    href={item.get('product_url')}
    className={classNames(
      theme.root,
      config.get('simple') && theme.simple,
      theme.productCard,
    )}
  >
    <div className={classNames(theme.imageWrap)}>
      /* Add the sticker content to the Product Card  */
      <div display-id={sticker} className='findify-product-stickers-wrapper' dangerouslySetInnerHTML={{__html:sticker}}></div>
      <BundleAction display-if={config.get('bundle')} item={item} />
      <Image
        className={classNames(theme.image)}
        aspectRatio={config.getIn(['product', 'image', 'aspectRatio'], 1)}
        thumbnail={item.get('thumbnail_url')}
        src={item.get('image_url') || item.get('thumbnail_url')}
        alt={item.get('title')}
      />
      <div display-if={config.getIn(['product', 'stickers', 'display'])}>
        <DiscountSticker
          config={config}
          className={theme.discountSticker}
          discount={item.get('discount')}
          display-if={
            config.getIn(['stickers', 'discount']) &&
            config.getIn(['product', 'stickers', 'display']) &&
            item.get('discount', List()).size &&
            item.getIn(['stickers', 'discount'])
          } />
      </div>
    </div>
    <div
      display-if={
        config.getIn(['product', 'reviews', 'display']) &&
        (!!item.getIn(['reviews', 'count']) || !!item.getIn(['reviews', 'total_reviews']))
      }
      className={theme.rating}>
      <Rating
        value={item.getIn(['reviews', 'average_score'])}
        count={item.getIn(['reviews', 'count']) || item.getIn(['reviews', 'total_reviews'])} />
    </div>
    <div
      className={theme.variants}
      display-if={
        config.getIn(['product', 'variants', 'display']) &&
        item.get('variants', List()).size > 1
      }
      >
      {
        template(config.getIn(['product', 'i18n', 'variants'], 'Available in %s variants'))(
          item.get('variants', List()).size
        )
      }
    </div>
    <div className={theme.content}>
      <Title
        theme={theme}
        display-if={config.getIn(['product', 'title', 'display'])}
        text={item.get('title')}
        config={config.getIn(['product', 'title'])} />
      <Description
        theme={theme}
        display-if={config.getIn(['product', 'description', 'display'])}
        text={item.get('description')}
        config={config.getIn(['product', 'description'])} />
      <Price
        className={theme.priceWrapper}
        display-if={config.getIn(['product', 'price', 'display'])}
        price={item.get('price')}
        oldPrice={item.get('compare_at')}
        discount={item.get('discount')}
        currency={config.get('currency_config').toJS()} />
      <OutOfStockSticker
        display-if={item.getIn(['stickers', 'out-of-stock'])}
        config={config} />
    </div>
  </a>
)

//wrap the Product Card component with an enhancer
export default enhancer(ProductCardView);

Updated about a month ago

BurstCommerce Flair Stickers


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.