Client SDK (API Reference) - Web

BILDIT enables you build a scalable Ecommerce Web Application in no time. This is the API Reference for the BILDIT Client SDK for Web applications.

This is the e-commerce Client SDK, not the banner SDK

This page documents @bildit/sdk + @bildit/query (e-commerce), whose BilditProvider takes a client={...} prop. To render BILDIT scheduled content on a Next.js site, you want the separate @bildit-platform/nextjs SDK (BilditProvider banners={...}) — see Production Site Rendering (Next.js). They share a component name but are unrelated.

Getting Started

1. Initial Setup

• Install as dependency: yarn add @bildit/sdk or npm install @bildit/sdk
• Depending on the state management your app uses:
  • yarn add @bildit/query react-query to install hooks based API
  • yarn add @bildit/redux redux redux-saga [...] to install redux based state management

2. Initialize BilditClient

import { BilditClient } from '@bildit/sdk';
import { BilditProvider } from '@bildit/query';

const client = new BilditClient({
  apiKey: 'YOUR API KEY',
  clientId: 'YOUR CLIENT ID',
});

3. Connect to your React Web App

import { BilditClient } from '@bildit/sdk'
import { BilditProvider } from '@bildit/query'

const client = new BilditClient({
  apiKey: 'YOUR API KEY',
  clientId: 'YOUR CLIENT ID',
})

const App = () => {
  return (
      <BilditProvider client={client}>
      // ... your code
      </BilditProvider>
      )
}

4. Use BILDIT queries and mutations

import { useLoginMutation, useShoppingCart } from '@bildit/query'
import { Button } from 'your-ui-library'

const LoginForm = () => {
  const mutation = useLoginMutation();
  const handleLogin = () => {
      mutation.mutate({ email: values.email, password: values.password });
  }

  return (
      <Button onClick={handleLogin} disabled={mutation.isLoading}>
          Login
      </Button>
  );
}

const ShoppingCartScreen = () => {
  const cart = useShoppingCart();

  // ...
}

API Reference

Remote

To use BILDIT Remote component, you need to provide a list of dependencies your component will use internally.

const DEPENDENCY_MAP = {
'react': require('react'),
'react-dom': require('react-dom'),
'your-image-library': require('your-image-library')
};

<BilditProvider client={client} dependencyMap={DEPENDENCY_MAP} />

//...

<Remote source={banner.source} image={banner.image} />

// banner.source code
import React from 'react';
import YourImageComponent from 'your-image-library';

const BannerImage = ({ image }) => {
return <YourImageComponent src={image} alt="Banner" />
}

export default BannerImage;

BilditClient

interface BilditConfig {
apiKey: string,
clientId: string,
sandbox?: boolean
// other configs
}

class BilditClient {
constructor(options: BilditConfig) {}

// API Calls
login()...
logout()...
filterProducts()...
cart()...
}

Using hooks (using react-query)

Redux + Sagas