Starter Kit Components - Others

AddToCartButton

The AddToCartButton Component is a wrapper around the Button UI Primitive that handles the logic to add a given product to the cart.

Props

prop

type

description

product

Shopify Product | BigCommerce Product

The product object which contains the data required.

productVariant

Shopify Product variant | BigCommerce Product variant

The product variant object which contains the data required.

quantity

number

The product quantity that should be added to the cart.

availableForSaleText

string

Text to be shown when the product is available for sale. Default is "Add to Cart".

outOfStockText

string

Text to be shown when the product is out of stock. Default is "Sold out".

Any other prop

This Component accepts any other prop you pass to it.

In addition, any prop from Chakra UI Button can be used.

Code overview


AddressFields

The AddressFields is used to handle all the address input fields. This Component is used by the AccountAddress Section.

Props

prop

type

description

addressData

AddressData

Object containing the address data.

isDisabled

boolean

Whether the form inputs should be disabled or not.

all

boolean

Show all fields.

densed

boolean

Whether the Country && State, City && Zip fields should be displayed in the same line.

onFieldChange

(key: AddressDataKey, event: {target: { value: string }}) => void

Function to handle field's change.

Code overview


App

The App Component wraps the entire store. This is a special Component, read more about it here.

prop

type

description

children

React.ReactNode

The children that represents the whole store.

Code overview


AuthGuard

The AuthGuard Component will redirect your customer to a given URL if the allowedAuthStatus condition is not met.

Props

prop

type

description

children

React.ReactNode

The children that represents the Component that should be under authentication.

allowedAuthStatus

authenticated | unauthenticated

Controls whether the user should be redirected or not. If the allowedAuthStatus condition is met, not redirect will happen.

redirectUrl

string

The url that AuthGuard should redirect the users if the allowedAuthStatus condition is not met.

Code overview


BackgroundImage

The BackgroundImage Component can be used to wrap a children element within an image.

Props

prop

type

description

src

string

The image to be used as background.

children

React.ReactNode

The children that will have the BackgroundImage wrapped around.

Any other prop

This Component accepts any other prop you pass to it.

Code overview


Badge

The Badge Component can be used to display a children element with a badge over them.

Props

prop

type

description

containerProps

ContainerProps

Props to be passed down to the Badge Container wrapper.

badgeContent

React.ReactChild

The Badge content.

badgePosition

top-left | top-right | bottom-left | bottom-right

The Badge position.

xOverhang

number

The Badge horizontal overhang.

yOverhang

number

The Badge vertical overhang.

variant

string

The Badge variant.

children

React.ReactNode

The children content that will be wrapped by the Badge.

Any other prop

This Component accepts any other prop you pass to it.

In addition, any prop from Chakra UI Button can be used.

Code overview


Breadcrumb

The Breadcrumb Component makes it easy for users to navigate through page levels of a website, without losing the track of where they are.

Props

prop

type

description

items

BreadcrumbItem[]

Array of object containing label: string, url: string and isCurrentPage: boolean.

variant

LinkVariant

The Breadcrumb link variant.

Any other prop

This Component accepts any other prop you pass to it.

Code overview


Carousel

The Carousel Component can be used to display multiple images. This Component is used within the ProductBox Section

Props

prop

type

description

media

Media

Array of images.

backIcon

React.ReactElement

Icon to be used as back button.

forwardIcon

React.ReactElement

Icon to be used as forward button.

Code overview


CartDrawer

The CartDrawer Component is a wrapper that allows the cart items to be shown inside a drawer in a slide in style.


CartItem

The CartItem Component is a representation of a single item in the cart.

Props

prop

type

description

product

CheckoutProduct

Shopify Checkout Product | BigCommerce Checkout Product

inDrawer

boolean

Whether CartItem is being used inside a Drawer. This will change the styles accordingly the context where the CartItem is being used, for instance, inside the Drawer.

Code overview


CartItems

The CartItems Component is a list of cart items.

Props

prop

type

description

inDrawer

boolean

Whether CartItem is being used inside a Drawer. This will change the styles accordingly the context where the CartItem is being used, for instance, inside the Drawer.

Code overview


Drawer

The Drawer Component handles the CartDrawer slide in functionality.

Props

prop

type

description

children

React.ReactNode

The children that the Drawer will be wrapped to.

header

React.ReactNode

Drawer's header content.

footer

React.ReactNode

Drawer's footer content.

Code overview


Icon

The Icon Component can be used to render icons.

Props

prop

type

description

icon

ChakraIcon | undefined

size

string (ComponentSize)

Any other prop

This Component accepts any other prop you pass to it.

Code overview


IconButton

The IconButton Component can be used to render a button with an icon.

Props

prop

type

description

variant

string

size

string

Any other prop

This Component accepts any other prop you pass to it.

Code overview


LoginForm

The LoginForm Component allows customers to log in the store.

Props

prop

type

description

emailLabel

string

Email's label text. Default is Email.

passwordLabel

string

Password's label text. Default is Password.

loginButtonText

string

Login button text. Default is Login.

forgotPasswordText

string

Forgot password link text. Default is Forgot password?.

noAccountText

string

Signup callout. Default is Don't have an account?.

registerLinkText

string

Register callout. Default is Register.

redirectTo

string

Url to be redirected after the form's submission. Default is /account'.

Code overview


Logo

The Logo Component render an image of a logo with a link attached to it.

Props

prop

type

description

image

Media

The Logo image.

link

string

The Logo link.

Code overview


Menu

The Menu Component can be used to organize the store's links in easy to access place. This Component is used within the Header Section.

Props

prop

type

description

content

React.ReactChild

links

MenuLinks[]

Array of links containing: subMenuLinks: array of links, label: string and slug: string

Code overview


NumberInput

The NumberInput Component renders an input with increase and decrease buttons.

Props

prop

type

description

containerProps

StackProps

Props to be passed down to the Container that wraps the NumberInput.

inputProps

InputProps

Props to be passed down to the input.

buttonProps

IconButtonProps

Props to be passed down to the buttons.

Code overview


OrderDetails

The OrderDetails Component renders the details of a single order.

Props

prop

default

description

order

Order

Object containing the order data.

Code overview


OrderHistory

The OrderHistory Component renders a list with

Props

prop

type

description

ordersUrl

string

Controls the order page url. This is used as a prefix for a given order details page, for instance /account/orders?order-id=182371239.

Default is /account/orders.

orders

Order[]

Array containing orders objects.

Code overview


OrderProduct

The OrderProduct Component renders the details of a single product within the OrderDetails Component.

Props

prop

type

description

product

Product

Object containing product data.

Code overview


Pagination

The Pagination Component can be used to enable pagination in a page, for instance, the collections page.

Props

prop

type

description

totalPages

number

The quantity of pages.

currentPage

number

Index of the current page is being shown.

onPageChange

(page: number) => void

Function to handle pagination page change.

Code overview


ProductGridItem

The ProductGridItem Component renders a single product within the ProductGrid Section.

Props

prop

type

description

product

CMS Product

Object containing the product data to be shown.

imageLoading

eager | lazy

Whether the image should be lazy loaded or eager loaded.

Code overview


SearchPopover

The SearchPopover Component renders the SearchQueryInput Component as a popover UI.

Props

prop

type

description

variant

SearchPopoverComponentVariant

SearchPopover variant.

size

SearchPopoverComponentSize

SearchPopover size.

icon

React.ReactElement

Icon to be used with the SearchPopover button. Default is <Icon as={BiSearch} size="md" />.

Any other prop

This Component accepts any other prop you pass to it.

Code overview


SearchQueryInput

The SearchQueryInput Component allows customers to search the store.

Props

prop

type

description

variant

SearchQueryInputComponentVariant | undefined

SearchQueryInput variant.

size

SearchQueryInputComponentSize | undefined

SearchQueryInput size.

initialValue

string

The initial value to be passed to SearchQueryInput input.

disabled

boolean

Whether the input should be disabled or not.

placeholder

string

SearchQueryInput placeholder.

icon

React.ReactElement

Icon to be used with the submit button. Default is <Icon icon="SearchIcon" />.

onClick

React.MouseEventHandler<HTMLInputElement>

Function to handle click on the input.

onKeyDown

React.KeyboardEventHandler<HTMLInputElement>

Function to handle keystroke on the input.

onSearchSubmit

(query: string) => void

Function to submit the form.

Code overview


Did this page help you?