Commerce toolkit

A toolkit for building e-commerce websites with Cromwell CMS

Links#

Read about Cromwell CMS toolkits in general: https://cromwellcms.com/docs/toolkits/intro.
Live demo
See examples of usage in theme-store.

Install#

npm i @cromwell/toolkit-commerce

Some components of this package use react-toastify. If you need notifications add ToastContainer into your custom app:

_app.tsx

import React from 'react';import { ToastContainer } from 'react-toastify';
export default function App() {  return (    <div>      /* ... */      <ToastContainer />    </div>  );}

Add global CSS in cromwell.config.js:

cromwell.config.js

module.exports = {  globalCss: [    '@cromwell/toolkit-commerce/dist/_index.css',    'react-toastify/dist/ReactToastify.css'  ],}

Use#

Example of usage of a component for product category:

category/[slug].tsx

import { MuiCategoryList } from '@cromwell/toolkit-commerce';import React from 'react';
export default function CategoryPage() {  return (      <MuiCategoryList />  )}
export const getStaticProps = MuiCategoryList.withGetProps();

List of components#

HOCs#

Material UI

Material UI HOCs#

Table of contents#

Type aliases#

AccountFieldConfig#

Ƭ AccountFieldConfig: Object

Type declaration#

Name	Type
`Component?`	`React.ComponentType`<`AccountFieldProps`>
`key`	keyof typeof `DefaultAccountFields` \| `string`
`label?`	`string`
`meta?`	`boolean`
`required?`	`boolean`
`validate?`	(`value?`: `null` \| `string`) => { `message`: `string` ; `valid`: `boolean` }

Defined in#

base/AccountInfo/AccountInfo.tsx:51

AccountFieldProps#

Ƭ AccountFieldProps: Omit<TBaseTextFieldProps, "onChange"> & { accountInfoProps?: AccountInfoProps ; actions?: ReturnType<typeof useAccountActions> ; onChange: (value: any) => any }

Defined in#

base/AccountInfo/AccountInfo.tsx:45

AccountInfoProps#

Ƭ AccountInfoProps: Object

Type declaration#

Name	Type	Description
`classes?`	`Partial`<`Record`<`"root"` \| `"saveButton"`, `string`>>	-
`elements?`	`Object`	-
`elements.Button?`	`TBaseButton`	-
`elements.TextField?`	`TBaseTextField`	-
`fields?`	`AccountFieldConfig`[]	User fields to display. Key can be one of enum `DefaultAccountFields` or any string. If key is not part of enum, then it will be treated as part of JSON `address`. If flag `meta` is provided then key will be treated as part of `customMeta`.
`notifier?`	`TCromwellNotify`<`NotifierActionOptions`>	Notifier tool. To disable notifications pass an empty object
`notifierOptions?`	`NotifierActionOptions`	Notifier options
`text?`	`Object`	-
`text.failedToSave?`	`string`	-
`text.fieldIsRequired?`	`string`	-
`text.invalidEmail?`	`string`	-
`text.saved?`	`string`	-

Defined in#

base/AccountInfo/AccountInfo.tsx:12

AccountOrdersProps#

Ƭ AccountOrdersProps: Object

Type declaration#

Name	Type
`classes?`	`Partial`<`Record`<`"root"` \| `"order"` \| `"orderTitle"` \| `"orderCart"` \| `"detailsRow"` \| `"totalText"` \| `"detailsText"`, `string`>>
`elements?`	`Object`
`elements.CartList?`	`React.ComponentType`<`CartListProps`>
`elements.Loadbox?`	`React.ComponentType`
`text?`	`Object`
`text.nothingHere?`	`string`
`text.shipping?`	`string`
`text.status?`	`string`
`text.total?`	`string`
`getOrderTitle?`	(`order`: `TOrder`) => `string`

Defined in#

base/AccountOrders/AccountOrders.tsx:10

BreadcrumbsData#

Ƭ BreadcrumbsData: { categories?: TProductCategory[] } | undefined | null

Defined in#

base/Breadcrumbs/Breadcrumbs.tsx:11

BreadcrumbsProps#

Ƭ BreadcrumbsProps: Object

Type declaration#

Name	Type	Description
`classes?`	`Partial`<`Record`<`"root"` \| `"breadcrumb"` \| `"link"`, `string`>>	-
`data?`	`BreadcrumbsData`	Override data by manually calling `getData` function and passing its result
`elements?`	`Object`	-
`elements.Breadcrumb?`	`React.ComponentType`<`Object`>	-
`elements.HomeIcon?`	`React.ComponentType`	-
`elements.Wrapper?`	`React.ComponentType`<`Object`>	-
`maxItems?`	`number`	Max breadcrumb items. Currently is not implemented by base component. Can be implemented by wrappers. Implemented by MuiBreadcrumbs.
`showHome?`	`boolean`	Show first breadcrumb as a link to home page `/`
`text?`	`Object`	-
`text.home?`	`string`	-
`getBreadcrumbLink?`	(`crumb`: `TProductCategory`) => `undefined` \| `string`	-

Defined in#

base/Breadcrumbs/Breadcrumbs.tsx:20

CartListProps#

Ƭ CartListProps: Object

Type declaration#

Name	Type	Description
`cart?`	`TStoreListItem`[]	Pass custom cart to override retrieved cart from CStore
`classes?`	`Partial`<`Record`<`"root"` \| `"list"` \| `"listItem"` \| `"cartHeader"` \| `"cartTotal"` \| `"cartTotalText"` \| `"productList"` \| `"imageBlock"` \| `"imageLink"` \| `"image"` \| `"captionBlock"` \| `"productName"` \| `"priceBlock"` \| `"oldPrice"` \| `"price"` \| `"attributesBlock"` \| `"actionsBlock"` \| `"attributeValue"`, `string`>>	-
`elements?`	`Object`	-
`elements.Button?`	`TBaseButton`	-
`elements.DeleteIcon?`	`React.ComponentType`	-
`elements.HeaderActions?`	`React.ComponentType`	-
`elements.ListItem?`	`React.ComponentType`<`CartListItemProps`>	-
`elements.Loadbox?`	`React.ComponentType`	-
`hideDelete?`	`boolean`	Hide delete button for products from the list?
`sumPosition?`	`"top"` \| `"bottom"` \| `"none"`	Position of cart header with sums (cart total)
`text?`	`Object`	-
`text.total?`	`string`	-
`getProductLink?`	(`product`: `TProduct`) => `undefined` \| `string`	-
`onProductClick?`	(`event`: `MouseEvent`<`Element`, `MouseEvent`>, `product`: `TProduct`) => `void`	-

Defined in#

base/CartList/CartList.tsx:11

CategoryFilterProps#

Ƭ CategoryFilterProps: Object

Type declaration#

Name	Type
`classes?`	`Partial`<`Record`<`"root"` \| `"plugin"`, `string`>>

Defined in#

base/CategoryFilter/CategoryFilter.tsx:11

CategoryListData#

Ƭ CategoryListData: Object

Type declaration#

Name	Type
`category`	`TProductCategory` \| `null`
`firstPage?`	`TPagedList`<`TProduct`> \| `null`

Defined in#

base/CategoryList/CategoryList.tsx:21

CategoryListProps#

Ƭ CategoryListProps: Object

Type declaration#

Name	Type	Description
`cardProps?`	`Partial`<`ProductCardProps`>	Override product card props
`classes?`	`Partial`<`Record`<`"root"` \| `"list"`, `string`>>	-
`data?`	`CategoryListData`	-
`elements?`	`Object`	-
`elements.Pagination?`	`React.ComponentType`<`TPaginationProps`>	-
`elements.ProductCard?`	`React.ComponentType`<`ProductCardProps`>	-
`listId?`	`string`	Provide custom CBlock id to use for underlying CList
`listProps?`	`Partial`<`TCListProps`<`TProduct`, `any`>>	CList props to pass, such as `pageSize`, etc.

Defined in#

base/CategoryList/CategoryList.tsx:31

CategorySortProps#

Ƭ CategorySortProps: Object

Type declaration#

Name	Type	Description
`classes?`	`Partial`<`Record`<`"root"` \| `"list"`, `string`>>	-
`elements?`	`Object`	-
`elements.Select?`	`TBaseSelect`	-
`listId?`	`string`	Provide another target CList id. Usually it is not needed, since this component can "detect" id of `CategoryList` on the same page.
`overrideOptions?`	`TSortOption`[]	Override sort options
`text?`	`Object`	-
`text.default?`	`string`	-
`text.highestRated?`	`string`	-
`text.mostPopular?`	`string`	-
`text.priceHighest?`	`string`	-
`text.priceLowest?`	`string`	-
`text.sort?`	`string`	-

Defined in#

base/CategorySort/CategorySort.tsx:15

CheckoutFieldConfig#

Ƭ CheckoutFieldConfig: Object

Type declaration#

Name	Type
`Component?`	`React.ComponentType`<`CheckoutFieldProps`>
`key`	keyof typeof `DefaultCheckoutFields` \| `string`
`label?`	`string`
`meta?`	`boolean`
`required?`	`boolean`
`validate?`	(`value?`: `null` \| `string`) => { `message`: `string` ; `valid`: `boolean` }

Defined in#

base/Checkout/Checkout.tsx:22

CheckoutFieldProps#

Ƭ CheckoutFieldProps: Omit<TBaseTextFieldProps, "onChange"> & { checkout: ReturnType<typeof usuCheckoutActions> ; checkoutProps: CheckoutProps ; onChange: (value: any) => any }

Defined in#

base/Checkout/DefaultElements.tsx:19

CheckoutProps#

Ƭ CheckoutProps: Object

Type declaration#

Name	Type	Description
`classes?`	`Partial`<`Record`<`"root"` \| `"blockTitle"` \| `"delimiter"` \| `"detailsRow"` \| `"withoutDiscountText"` \| `"withoutDiscountValue"` \| `"detailsRowName"` \| `"detailsRowValue"` \| `"totalText"` \| `"totalValue"` \| `"Coupons"` \| `"couponList"` \| `"coupon"` \| `"couponActions"` \| `"placedOrder"` \| `"loadBoxCover"` \| `"actionsBlock"` \| `"placedOrderText"`, `string`>>	-
`elements?`	`Object`	-
`elements.AddCouponButton?`	`TBaseButton`	-
`elements.ApplyCouponButton?`	`TBaseButton`	-
`elements.Button?`	`TBaseButton`	-
`elements.CouponAppliedIcon?`	`React.ComponentType`	-
`elements.CouponProblemIcon?`	`React.ComponentType`	-
`elements.EmptyCartAlert?`	`React.ComponentType`	-
`elements.Loadbox?`	`React.ComponentType`	-
`elements.PlacedOrder?`	`React.ComponentType`<`Object`>	-
`elements.RadioGroup?`	`TBaseRadio`	-
`elements.RemoveCouponButton?`	`TBaseButton`	-
`elements.RemoveCouponIcon?`	`React.ComponentType`	-
`elements.TextField?`	`TBaseTextField`	-
`fields?`	`CheckoutFieldConfig`[]	Order fields to display. Key can be one of enum `DefaultCheckoutFields` or any string. If key is not part of enum, then it will be treated as part of JSON `customerAddress`. If flag `meta` is provided then key will be treated as part of `customMeta`.
`notifier?`	`TCromwellNotify`<`NotifierActionOptions`>	Notifier tool. To disable notifications pass an empty object
`notifierOptions?`	`NotifierActionOptions`	Notifier options
`text?`	`Object`	-
`text.addCoupon?`	`string`	-
`text.apply?`	`string`	-
`text.cartTotal?`	`string`	-
`text.cartWithoutDiscount?`	`string`	-
`text.choosePaymentMethod?`	`string`	-
`text.coupons?`	`string`	-
`text.failedCreateOrder?`	`string`	-
`text.fieldIsRequired?`	`string`	-
`text.fillOrderInformation?`	`string`	-
`text.invalidEmail?`	`string`	-
`text.noPaymentsAvailable?`	`string`	-
`text.orderDetails?`	`string`	-
`text.pay?`	`string`	-
`text.payLater?`	`string`	-
`text.paymentMethods?`	`string`	-
`text.placeOrder?`	`string`	-
`text.shipping?`	`string`	-
`text.shippingAddress?`	`string`	-
`text.shippingMethods?`	`string`	-
`text.somethingWrongWithPayment?`	`string`	-
`text.standardShipping?`	`string`	-
`text.total?`	`string`	-
`text.yourCartIsEmpty?`	`string`	-
`text.yourOrderPlaced?`	`string`	-
`getPaymentOptions?`	(`session?`: `null` \| `TOrderPaymentSession`) => `TPaymentOption`[] \| `Promise`<`TPaymentOption`[]>	-
`onGetOrderTotal?`	(`data`: `undefined` \| `null` \| `TOrderPaymentSession`) => `void`	-
`onPay?`	(`success`: `boolean`) => `void`	-
`onPlaceOrder?`	(`placedOrder`: `undefined` \| `null` \| `TOrder`) => `void`	-

Defined in#

base/Checkout/Checkout.tsx:31

CurrencySwitchProps#

Ƭ CurrencySwitchProps: Object

Displays select component of all available currencies in the store. Configure currencies in admin panel settings.

Type declaration#

Name	Type
`classes?`	`Partial`<`Record`<`"root"` \| `"select"`, `string`>>
`elements?`	`Object`
`elements.Select?`	`TBaseSelect`

Defined in#

base/CurrencySwitch/CurrencySwitch.tsx:13

NotifierActionOptions#

Ƭ NotifierActionOptions: ToastOptions & { Wrapper?: React.ComponentType<Object> }

Defined in#

helpers/notifier.tsx:5

ProductActionsProps#

Ƭ ProductActionsProps: Object

Type declaration#

Name	Type	Description
`attributes?`	`TAttribute`[]	All available attributes in DB. If not passed will be fetched and cached automatically.
`classes?`	`Partial`<`Record`<`"root"` \| `"actionsCartBlock"` \| `"actionButton"` \| `"actionsWishlistBlock"`, `string`>>	-
`disableEdit?`	`boolean`	Disable editing of inner blocks in Theme editor
`elements?`	`Object`	-
`elements.AddShoppingCartIcon?`	`React.ComponentType`	-
`elements.Alert?`	`TBaseAlert`	-
`elements.Button?`	`TBaseButton`	-
`elements.FavoriteIcon?`	`React.ComponentType`	-
`elements.QuantityField?`	`React.ComponentType`<`Object`>	-
`elements.ShoppingCartIcon?`	`React.ComponentType`	-
`modifiedProduct?`	`TProduct` \| `null`	Override modified product by `onChange` of `ProductAttributes` component. (not recommended since modifications already stored in the `moduleState`)
`notifier?`	`TCromwellNotify`<`NotifierActionOptions`>	Notifier tool. Will show notifications when user adds a product to the cart or wishlist. To disable notifications pass an empty object
`notifierOptions?`	`NotifierActionOptions`	Notifier options
`product`	`TProduct`	Product data. Required
`text?`	`Object`	-
`text.addToCart?`	`string`	-
`text.addToWishlist?`	`string`	-
`text.addedClickToOpenCart?`	`string`	-
`text.addedClickToOpenWishlist?`	`string`	-
`text.onBackorder?`	`string`	-
`text.openCart?`	`string`	-
`text.openWishlist?`	`string`	-
`text.outOfStock?`	`string`	-
`text.pickFollowingAttributes?`	`string`	-
`text.productIsInCart?`	`string`	-
`text.productIsInWishlist?`	`string`	-
`text.updateQuantity?`	`string`	-
`onCartOpen?`	() => `any`	-
`onWishlistOpen?`	() => `any`	-

Defined in#

base/ProductActions/ProductActions.tsx:18

ProductAttributesProps#

Ƭ ProductAttributesProps: Object

Type declaration#

Name	Type	Description
`attributes?`	`TAttribute`[]	All available attributes
`canValidate?`	`boolean`	Show error if some required attributes weren't selected?
`classes?`	`Partial`<`Record`<`"root"` \| `"attribute"` \| `"headerWrapper"` \| `"valuesWrapper"` \| `"attributeValueIcon"` \| `"attributeValueText"` \| `"productAttributesValidate"` \| `"attributeValueChecked"` \| `"invalidAttributeValue"`, `string`>>	-
`elements?`	`Object`	UI elements to replace default ones
`elements.AttributeTitle?`	`React.ComponentType`<`Object`>	Title of attribute block
`elements.AttributeValue?`	`React.ComponentType`<`Object`>	Component for a value of an attribute. Must implement onClick prop
`product`	`TProduct`	Product data. Required
`onChange?`	(`checkedAttributes`: `Record`<`string`, `string`[]>, `modifiedProduct`: `TProduct`) => `void`	-

Defined in#

base/ProductAttributes/ProductAttributes.tsx:10

ProductCardProps#

Ƭ ProductCardProps: Object

Type declaration#

Name	Type	Description
`attributes?`	`TAttribute`[]	All available attributes in DB. If not passed will be fetched and cached automatically.
`classes?`	`Partial`<`Record`<`"root"` \| `"horizontal_variant"` \| `"image"` \| `"image_container"` \| `"actions"` \| `"action_button"` \| `"title"` \| `"price_block"` \| `"description"` \| `"rating"`, `string`>>	-
`elements?`	`Object`	-
`elements.AddCartButton?`	`React.ComponentType`<`TBaseButtonProps`>	-
`elements.AddWishlistButton?`	`React.ComponentType`<`TBaseButtonProps`>	-
`elements.OtherActions?`	`React.ComponentType`<`Object`>	-
`elements.Rating?`	`React.ComponentType`<`TBaseRatingProps`>	-
`elements.Tooltip?`	`React.ComponentType`<`TBaseTooltipProps`>	-
`imageProps?`	`Partial`<`ImageProps`>	Override props to underlying CImage
`noImagePlaceholderUrl?`	`string`	URL to a placeholder image to use if a product has no primary image set.
`notifier?`	`TCromwellNotify`<`NotifierActionOptions`>	Notifier tool. Will show notifications when user adds a product to the cart or wishlist. To disable notifications pass an empty object
`notifierOptions?`	`NotifierActionOptions`	Notifier options
`product`	`TProduct`	Product data. Required
`text?`	`Object`	-
`text.addToCart?`	`string`	-
`text.addToWishlist?`	`string`	-
`text.clickToOpenCart?`	`string`	-
`text.inCart?`	`string`	-
`text.inWishlist?`	`string`	-
`text.openCart?`	`string`	-
`text.reviews?`	`string`	-
`variant?`	`"vertical"` \| `"horizontal"`	In `vertical` variant image at top and text at bottom (takes more vertical space). In `horizontal` variant image at left and text at right (takes more horizontal space).
`getProductLink?`	(`product`: `TProduct`) => `undefined` \| `string`	-
`onAddedToCart?`	(`item`: `TStoreListItem`, `result`: `TCStoreOperationResult`) => `void`	-
`onFailedAddToCart?`	(`item`: `TStoreListItem`, `result`: `TCStoreOperationResult`) => `void`	-
`onOpenCart?`	() => `void`	-
`onOpenWishlist?`	() => `void`	-
`onProductLinkClick?`	(`event`: `MouseEvent`<`HTMLAnchorElement`, `MouseEvent`>, `link`: `string`) => `any`	-

Defined in#

base/ProductCard/ProductCard.tsx:28

ProductGalleryProps#

Ƭ ProductGalleryProps: Object

Type declaration#

Name	Type	Description
`blockProps?`	`TCromwellBlockProps`	Settings to pass to underlying CGallery block
`classes?`	`Partial`<`Record`<`"root"`, `string`>>	-
`gallerySettings?`	`TGallerySettings`	Gallery settings to pass to underlying CGallery block
`noImagePlaceholder?`	`string`	URL to a placeholder image to use if a product has no primary image set.
`product`	`TProduct`	Product data. Required

Defined in#

base/ProductGallery/ProductGallery.tsx:8

ProductReviewsProps#

Ƭ ProductReviewsProps: Object

Type declaration#

Name	Type	Description
`classes?`	`Partial`<`Record`<`"root"` \| `"ReviewForm"` \| `"reviewFormTitle"` \| `"reviewInput"` \| `"submitBtnWrapper"` \| `"ReviewItem"` \| `"itemHeader"` \| `"itemUsername"` \| `"itemCreateDate"` \| `"itemTitle"` \| `"itemDescription"`, `string`>>	-
`disableEdit?`	`boolean`	Disable editing of inner blocks in Theme editor
`elements?`	`Object`	-
`elements.Alert?`	`TBaseAlert`	-
`elements.Button?`	`TBaseButton`	-
`elements.Pagination?`	`React.ComponentType`<`TPaginationProps`>	-
`elements.Rating?`	`TBaseRating`	-
`elements.ReviewForm?`	`React.ComponentType`<`ReviewFormProps`>	Replace ReviewForm component by custom
`elements.ReviewItem?`	`React.ComponentType`<`ReviewItemProps`>	Replace ReviewItem component by custom
`elements.TextField?`	`TBaseTextField`	-
`elements.Title?`	`React.ComponentType`	-
`elements.Tooltip?`	`TBaseTooltip`	-
`listProps?`	`TCListProps`<`TProductReview`, `TReviewListItemProps`>	Override props to CList
`notifier?`	`TCromwellNotify`	Notifier tool
`productId`	`number`	Target product's ID. Required
`text?`	`Object`	-
`text.failedToSubmit?`	`string`	-
`text.fieldNameLabel?`	`string`	-
`text.fieldRequired?`	`string`	-
`text.fieldReviewLabel?`	`string`	-
`text.fieldTitleLabel?`	`string`	-
`text.submitButton?`	`string`	-
`text.submitSuccess?`	`string`	-
`text.writeReview?`	`string`	-

Defined in#

base/ProductReviews/ProductReviews.tsx:25

ProductSearchProps#

Ƭ ProductSearchProps: Object

Type declaration#

Name	Type	Description
`classes?`	`Partial`<`Record`<`"root"` \| `"content"` \| `"notFoundText"` \| `"item"` \| `"itemImage"` \| `"itemTitle"` \| `"priceBlock"` \| `"oldPrice"` \| `"price"`, `string`>>	-
`customFragment?`	`DocumentNode`	Custom GraphQL fragment on Product
`customFragmentName?`	`string`	Name of custom fragment
`elements?`	`Object`	-
`elements.ListItem?`	`React.ComponentType`<`ListItemProps`>	-
`elements.Popper?`	`React.ComponentType`<`BasePopperProps`>	-
`elements.TextField?`	`TBaseTextField`	-
`text?`	`Object`	-
`text.notFound?`	`string`	-
`text.searchLabel?`	`string`	-

Defined in#

base/ProductSearch/ProductSearch.tsx:13

ReviewFormProps#

Ƭ ReviewFormProps: Object

Type declaration#

Name	Type
`notifier?`	`TCromwellNotify`
`parentProps`	`ProductReviewsProps`
`productId`	`number`

Defined in#

base/ProductReviews/ReviewForm.tsx:14

ReviewItemProps#

Ƭ ReviewItemProps: Object

Type declaration#

Name	Type
`data?`	`TProductReview`
`parentProps`	`ProductReviewsProps`

Defined in#

base/ProductReviews/ReviewItem.tsx:10

TSortOption#

Ƭ TSortOption: Object

Type declaration#

Name	Type
`direction?`	`"ASC"` \| `"DESC"`
`key`	keyof `TProduct`
`label`	`string`

Defined in#

base/CategorySort/CategorySort.tsx:9

ViewedItemsProps#

Ƭ ViewedItemsProps: Object

Type declaration#

Name	Type
`classes?`	`Partial`<`Record`<`"root"` \| `"product"`, `string`>>
`elements?`	`Object`
`elements.Loadbox?`	`React.ComponentType`
`elements.ProductCard?`	`React.ComponentType`<`ProductCardProps`>

Defined in#

base/ViewedItems/ViewedItems.tsx:9

WishlistProps#

Ƭ WishlistProps: Object

Type declaration#

Name	Type
`classes?`	`Partial`<`Record`<`"root"` \| `"product"`, `string`>>
`elements?`	`Object`
`elements.Loadbox?`	`React.ComponentType`
`elements.ProductCard?`	`React.ComponentType`<`ProductCardProps`>

Defined in#

base/Wishlist/Wishlist.tsx:9

Variables#

DefaultAccountFields#

• Const DefaultAccountFields: Object

Type declaration#

Name	Type
`address`	`string`
`avatar`	`string`
`bio`	`string`
`email`	`string`
`fullName`	`string`
`phone`	`string`

Defined in#

base/AccountInfo/DefaultElements.tsx:7

DefaultCheckoutFields#

• Const DefaultCheckoutFields: Object

Type declaration#

Name	Type
`customerComment`	`string`
`customerEmail`	`string`
`customerName`	`string`
`customerPhone`	`string`

Defined in#

base/Checkout/DefaultElements.tsx:7

MuiBreadcrumbs#

• Const MuiBreadcrumbs: typeof Breadcrumbs

Defined in#

mui/index.ts:42

MuiCategoryList#

• Const MuiCategoryList: typeof CategoryList

Defined in#

mui/index.ts:89

moduleState#

• Const moduleState: ModuleState

Defined in#

helpers/state.ts:115

muiNotifier#

• Const muiNotifier: Notifier

Defined in#

mui/Notifier/Notifier.tsx:17

Functions#

AccountInfo#

▸ AccountInfo(props): null | Element

Displays account fields (such as phone, address, email, etc) and allows users to change them. User must be logged in via SignIn component of @cromwell/core-frontend or via AuthClient (getAuthClient) for this component to work.

Parameters#

Name	Type
`props`	`AccountInfoProps`

Returns#

null | Element

Defined in#

base/AccountInfo/AccountInfo.tsx:66

AccountOrders#

▸ AccountOrders(props): null | Element

Displays all store orders placed by currently logged in account. User must be logged in via SignIn component of @cromwell/core-frontend or via AuthClient (getAuthClient) for this component to work.

Parameters#

Name	Type
`props`	`AccountOrdersProps`

Returns#

null | Element

Defined in#

base/AccountOrders/AccountOrders.tsx:37

Breadcrumbs#

▸ Breadcrumbs(props): Element

Represents breadcrumbs of categories on a product page.

withGetProps - optional or use getData
getData - available
useData - available

Parameters#

Name	Type
`props`	`BreadcrumbsProps`

Returns#

Element

Defined in#

base/Breadcrumbs/Breadcrumbs.tsx:75

CartList#

▸ CartList(props): Element

Displays product list of user cart. Use CStore API from @cromwell/core-frontend package to add products in the list

Parameters#

Name	Type
`props`	`CartListProps`

Returns#

Element

Defined in#

base/CartList/CartList.tsx:56

CategoryFilter#

▸ CategoryFilter(props): Element

Renders product filter on a category page. A wrapper for plugin from @cromwell/plugin-product-filter

withGetProps - required

Parameters#

Name	Type
`props`	`CategoryFilterProps`

Returns#

Element

Defined in#

base/CategoryFilter/CategoryFilter.tsx:21

CategoryList#

▸ CategoryList(props): Element

Renders product list on category page

withGetProps - required. Data on the frontend can be overridden
useData - available

Parameters#

Name	Type
`props`	`CategoryListProps`

Returns#

Element

Defined in#

base/CategoryList/CategoryList.tsx:63

CategorySort#

▸ CategorySort(props): Element

A component for picking method of sorting for products in CategoryList.

Parameters#

Name	Type
`props`	`CategorySortProps`

Returns#

Element

Defined in#

base/CategorySort/CategorySort.tsx:44

Checkout#

▸ Checkout(props): Element

Displays checkout session. Handles order calculations, coupons, payments and order placement. Provide prop fields to display any input field, such as: email, phone, etc.

Parameters#

Name	Type
`props`	`CheckoutProps`

Returns#

Element

Defined in#

base/Checkout/Checkout.tsx:114

CurrencySwitch#

▸ CurrencySwitch(props): Element

Parameters#

Name	Type
`props`	`CurrencySwitchProps`

Returns#

Element

Defined in#

base/CurrencySwitch/CurrencySwitch.tsx:21

MuiAccountInfo#

▸ Const MuiAccountInfo(props): null | Element

Parameters#

Name	Type
`props`	`AccountInfoProps`

Returns#

null | Element

Defined in#

mui/index.ts:167

MuiAccountOrders#

▸ Const MuiAccountOrders(props): null | Element

Parameters#

Name	Type
`props`	`AccountOrdersProps`

Returns#

null | Element

Defined in#

mui/index.ts:183

MuiCartList#

▸ Const MuiCartList(props): Element

Parameters#

Name	Type
`props`	`CartListProps`

Returns#

Element

Defined in#

mui/index.ts:127

MuiCategorySort#

▸ Const MuiCategorySort(props): Element

Parameters#

Name	Type
`props`	`CategorySortProps`

Returns#

Element

Defined in#

mui/index.ts:94

MuiCheckout#

▸ Const MuiCheckout(props): Element

Parameters#

Name	Type
`props`	`CheckoutProps`

Returns#

Element

Defined in#

mui/index.ts:133

MuiCurrencySwitch#

▸ Const MuiCurrencySwitch(props): Element

Parameters#

Name	Type
`props`	`CurrencySwitchProps`

Returns#

Element

Defined in#

mui/index.ts:118

MuiPagination#

▸ Const MuiPagination(props): Element

Parameters#

Name	Type
`props`	`Object`
`props.count`	`number`
`props.page`	`number`
`props.onChange`	(`page`: `number`) => `void`

Returns#

Element

Defined in#

mui/index.ts:40

MuiProductActions#

▸ Const MuiProductActions(props): Element

Parameters#

Name	Type
`props`	`ProductActionsProps`

Returns#

Element

Defined in#

mui/index.ts:61

MuiProductAttributes#

▸ Const MuiProductAttributes(props): JSX.Element

Parameters#

Name	Type
`props`	`ProductAttributesProps`

Returns#

JSX.Element

Defined in#

mui/index.ts:47

MuiProductCard#

▸ Const MuiProductCard(props): Element

Parameters#

Name	Type
`props`	`ProductCardProps`

Returns#

Element

Defined in#

mui/index.ts:73

MuiProductReviews#

▸ Const MuiProductReviews(props): null | Element

Parameters#

Name	Type
`props`	`ProductReviewsProps`

Returns#

null | Element

Defined in#

mui/index.ts:52

MuiProductSearch#

▸ Const MuiProductSearch(props): Element

Parameters#

Name	Type
`props`	`ProductSearchProps`

Returns#

Element

Defined in#

mui/index.ts:98

MuiViewedItems#

▸ Const MuiViewedItems(props): Element

Parameters#

Name	Type
`props`	`ViewedItemsProps`

Returns#

Element

Defined in#

mui/index.ts:113

MuiWishlist#

▸ Const MuiWishlist(props): Element

Parameters#

Name	Type
`props`	`WishlistProps`

Returns#

Element

Defined in#

mui/index.ts:108

ProductActions#

▸ ProductActions(props): Element

Displays actions (buttons) on product page such as: add to cart/wishlist, amount picker. Handles cart and shows notifications.

Parameters#

Name	Type
`props`	`ProductActionsProps`

Returns#

Element

Defined in#

base/ProductActions/ProductActions.tsx:92

ProductAttributes#

▸ ProductAttributes(props): JSX.Element

Displays product's attributes. When user picks an attribute applies product variant and returns modified product from onChange function prop.

Parameters#

Name	Type
`props`	`ProductAttributesProps`

Returns#

JSX.Element

Defined in#

base/ProductAttributes/ProductAttributes.tsx:60

ProductCard#

▸ ProductCard(props): Element

Displays product cart with short product info. Used to display in product list of a product category

Parameters#

Name	Type
`props`	`ProductCardProps`

Returns#

Element

Defined in#

base/ProductCard/ProductCard.tsx:108

ProductGallery#

▸ ProductGallery(props): Element

Displays a gallery of product images.

Parameters#

Name	Type
`props`	`ProductGalleryProps`

Returns#

Element

Defined in#

base/ProductGallery/ProductGallery.tsx:33

ProductReviews#

▸ ProductReviews(props): null | Element

Displays customer reviews of a product. Fetches data client-side

Parameters#

Name	Type
`props`	`ProductReviewsProps`

Returns#

null | Element

Defined in#

base/ProductReviews/ProductReviews.tsx:90

ProductSearch#

▸ ProductSearch(props): Element

Search input field. Queries products in the store. Results are shown in pop-up window on user input.

Parameters#

Name	Type
`props`	`ProductSearchProps`

Returns#

Element

Defined in#

base/ProductSearch/ProductSearch.tsx:42

ViewedItems#

▸ ViewedItems(props): Element

List of products that have been added into ViewedItems of CStore

Parameters#

Name	Type
`props`	`ViewedItemsProps`

Returns#

Element

Defined in#

base/ViewedItems/ViewedItems.tsx:20

Wishlist#

▸ Wishlist(props): Element

List of products that have been added into Wishlist of CStore

Parameters#

Name	Type
`props`	`WishlistProps`

Returns#

Element

Defined in#

base/Wishlist/Wishlist.tsx:20

useModuleState#

▸ Const useModuleState(): ModuleState

A hook that gives an access to the store of this toolkit. It will also re-render component on store updates.

Returns#

ModuleState

Defined in#

helpers/state.ts:121

useProductVariants#

▸ Const useProductVariants(original?): TProduct

A hook that will track selection of product attributes by user and apply product variants, so returned value will be modified product (new object). Store this value in a separate variable and do not pass this modified value back.

Parameters#

Name	Type	Description
`original?`	`null` \| `TProduct`	Original, unmodified product

Returns#

TProduct

Defined in#

helpers/useProductVariants.ts:12