SmartWithFood JS SDK

SmartWithFood JS SDK is designed to integrate a widget on your website or SPA

SmartWithFood JS SDK

Installation

npm install @smartwithfood/js-sdk

Using yarn:

yarn add @smartwithfood/js-sdk

Alternatively, you can include it in your project from our CDN. Replace {version} with the desired package version.

<script src="https://unpkg.com/@smartwithfood/js-sdk@{version}/dist/index.min.js"></script>

Usage

ESModules

import Recipe2Basket, { Language } from '@smartwithfood/js-sdk';

Recipe2Basket.initialize({
  token: '<your-widget-token>',
  language: Language.NL,
});

Recipe2Basket.renderButtons({ ... });

Browser

<script src="https://unpkg.com/@smartwithfood/js-sdk@{version}/dist/index.min.js"></script>
<script>
  window.Recipe2Basket.initialize({
    token: '<your-widget-token>',
    language: 'fr',
  });

  Recipe2Basket.renderButtons({ ... });
</script>

API

`function` Recipe2Basket.initialize(options: InitializeOptions)

Recipe2Basket.initialize({
  token: '<your-widget-token>',
  language: Language.NL,
});

`function` Recipe2Basket.openModal(options: ModalOptions)

Open the widget modal.

Recipe2Basket.openModal({
  partnerId: '00000000-0000-0000-0000-000000000000',
  recipes: [
    {
      name: 'Recept',
      language: 'nl',
      media: 'https://example.com/image.png',
      ingredients: [
        "1 ei",
        "100 g aardappelen"
      ],
      yield: 4
    }
  ]
});

`function` Recipe2Basket.closeModal()

Recipe2Basket.closeModal();

`function` Recipe2Basket.renderButtons(options: ButtonOptions): CleanupFunction

Render a button which opens the widget modal when pressed. Returns a CleanupFunction which will remove the button when called.

Recipe2Basket.renderButtons({
  type: ButtonType.SINGLE_RECIPE,
  selectorOrElement: '.r2b-button-container',
  recipes: [
    {
      name: 'Recept',
      language: 'nl',
      media: 'https://example.com/image.png',
      ingredients: [
        "1 ei",
        "100 g aardappelen"
      ],
      yield: 4
    }
  ],
});

`function` Recipe2Basket.getBasketUri(options: ModalOptions): String

Returns the URI which can be used in an iframe or redirect to show the widget.

Recipe2Basket.getBasketUri({
  partnerId: '00000000-0000-0000-0000-000000000000',
  recipes: [
    {
      name: 'Recept',
      language: 'nl',
      media: 'https://example.com/image.png',
      ingredients: [
        "1 ei",
        "100 g aardappelen"
      ],
      yield: 4
    }
  ]
});

`function` Recipe2Basket.on(name: String, callback: Function)

Each event's Data object extends the GenericEventData object.

Name	Data	Description
inited		Widget interface is loaded and is fetching data
loaded		Widget interface is ready
modalClosed		Widget is closed
basketCompleted	`{ basketId: string }`	User has completed a basket

Sample code to handle events

r2b.on('inited', function() {
  console.log('Recipe2Basket is initialized');
})

`function` CleanupFunction

A cleanup function which when called will remove the previously made element and modal from the DOM. This is usefull when using frameworks like React. Here is some example code on how this could be used.

import React, { useLayout } from 'react';
import Recipe2Basket from '@smartwithfood/js-sdk';

Recipe2Basket.initialize({ ... });

export function MyComponent() {
  useEffect(() => {
    const buttonCleanup = Recipe2Basket.renderButon({
      selectorOrElement: '#add-recipe-button',
      ...
    });

    return () => {
      buttonCleanup();
    }
  });

  return <div id="add-recipe-button"></div>;
}

`type` Recipe

A Recipe is a RecipeObject OR a String. When a string is provided we assume this is a uuid from our Recipe Management service.

`object` InitializeOptions

Property	Default	Type	Description
token*	`None`	String	Your widget identification token
language*	`None`	Language	Language of the widget

`object` RecipeObject

Property	Type
name	String
language	Language
media	String
yield	Number
ingredients	[String]

`object` ModalOptions

Property	Default	Type	Description
recipes*	`None`	[Recipe]	Array of recipes to add to the shoppinglist
partnerId*	`None`	String	Id of the warehouse we want to productize the recipes in
externalUrl	`window.location.href`	String	The url where the recipes where selected
warehouseId	`None`	String	Id of the warehouse we want to productize the recipes in

`object` ButtonOptions

Property	Default	Type	Description
type	single_recipe	[ButtonType]	The type of button to render
selectorOrElement	`None`	String \| Element	Where the button should render
recipes*	`None`	[Recipe]	Array of recipes to add to the shoppinglist

`enum` Language

Property	Value
NL	`nl`
FR	`fr`
EN	`en`

`enum` ButtonType

Property	Value
SINGLE_RECIPE	`single_recipe`

`object` GenericEventData

Property	Type
name	String
id	String