@smartwithfood/js-sdk v2.0.2

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.

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

object RecipeObject

object ModalOptions

object ButtonOptions

enum Language

enum ButtonType

object GenericEventData