SmartWithFood JS SDK

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

Table of Contents

• SmartWithFood JS SDK
  • Table of Contents
  • Installation
  • Usage
  • API
    • function Recipe2Basket.initialize(options: InitializeOptions)
    • function Recipe2Basket.openModal(options: ModalOptions)
    • function Recipe2Basket.closeModal()
    • function Recipe2Basket.renderButtons(options: ButtonOptions): CleanupFunction
    • function Recipe2Basket.getBasketUri(options: ModalOptions): String
    • function Recipe2Basket.on(name: String, callback: Function)
    • function CleanupFunction
    • type Recipe
    • object InitializeOptions
    • object RecipeObject
    • object ModalOptions
    • object ButtonOptions
    • enum Language
    • enum ButtonType
    • object GenericEventData

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