Developers

Elements

Getting Started Store Locator Retailer Details Product Detail Page Checkout Lead List

React Elements

Store Locator Store Details Product Form Cart Form

API

Reference

Product Form React

Installation

yarn add @colabcommerce/elements

npm install @colabcommerce/elements

Example Usage

import ProductForm from '@colabcommerce/elements/ProductForm'
import '@colabcommerce/elements/dist/style.css'

<ProductForm
  id="colab-id"
  locale="en"
  product={{
    name: "Product Name",
    sku: "product-sku",
    external_id: "product-external-id",
    image: "https://via.placeholder.com/150",
    options: [
      {
        key: "Size",
        value: "Large"
      }
    ],
    additionalData: {}
    }}
  onSuccess={handleSuccess}
  onCancel={handleCancel}
  onClose={handleClose}
/>

Note: The onSuccess, onCancel, and onClose props are optional, but recommended to handle user interactions with the form.

Props

id

Stringrequired

The Colab ID of the organization that is using the cart form element.

locale

String

The locale that the store locator element is being used in. Default behavior is to use the browser's locale.

product

Objectrequired

name -The name of the product.
sku - The SKU of the product. Used to determine eligibility for the cart form.
external_id - The external id of the product.
quantity - The quantity of the product to add to the cart.
image - The URL of the product image.
options - An array of options for the product. Each option should have a key and value.
additionalData - An object of additional data for the product.

onSuccess

Callback

(leadData) => { console.log({leadData}) }

A callback fired when the form is successfully completed.

id - The ID of the lead.
first_name - The first name of the lead.
last_name - The last name of the lead.
email - The email of the lead.
phone - The phone number of the lead.
assignee - The retailer assigned to the lead.

onClose

Callback

(null) => {  }

A callback fired when the form is closed, usually after a successful submission.

onCancel

Callback

(null) => {  }

A callback fired when the form is cancelled.