The Class List component displays a list of language classes offered at a Berlitz language center. Users can request more info about a class or register immediately by adding it to their shopping cart. Content editors can optionally provide promo messages to display below each session. If a session is sold out, the "Request Info" CTA is removed and the "Add to Cart" CTA is disabled.
yarn add @berlitz/class-list
Prop | Type | Required | Default | Notes |
---|---|---|---|---|
classData | Array of objects | X | Class and session data to display | |
location | String | Location name to display to user (e.g. "New York City Language Center") | ||
salesforceLocation | String | Location name as stored in Salesforce (e.g. "Rockefeller Center") | ||
productId | String | Product ID for eCommerce | ||
handleRequestInfo | Func | Function to execute when user requests info about a class | ||
addToCartLink | Func | Function to execute when user wants to register for a class | ||
requestInfoLabel | String | Label for CTA to request info about a class | ||
addToCartLabel | String | Label for CTA to register for a class | ||
soldOutLabel | String | Label for disabled CTA when a class is sold out | ||
languageColLabel | String | X | Label for language column header | |
levelColLabel | String | X | Label for level column header | |
daysColLabel | String | X | Label for days column header | |
classTimesColLabel | String | X | Label for class times column header | |
sessionsColLabel | String | X | Label for sessions column header |
import React from 'react'
import ClassList from '@berlitz/class-list'
const MyApp = () => (
<ClassList
classData={data}
location="New York City Language Center"
salesforceLocation="Rockefeller Center"
productId="289"
handleRequestInfo={handleRequestInfo}
addToCartLink={addToCartLink}
requestInfoLabel="Request Info"
addToCartLabel="Register"
soldOutLabel="Sold Out"
languageColLabel="Language"
levelColLabel="Level"
daysColLabel="Days"
classTimesColLabel="Class Times"
sessionsColLabel="Sessions"
/>
)