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 |