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:

import React from 'react';
import { ToastContainer } from 'react-toastify';

export default function App() {
  return (
    <div>
      /* ... */
      <ToastContainer />
    </div>
  );
}

Add global CSS in 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:

import { MuiCategoryList } from '@cromwell/toolkit-commerce';
import React from 'react';

export default function CategoryPage() {
  return <MuiCategoryList />;
}

export const getStaticProps = MuiCategoryList.withGetProps();

List of components

• AccountInfo
• AccountOrders
• Breadcrumbs
• CartList
• CategoryFilter
• CategoryList
• CategorySort
• Checkout
• CurrencySwitch
• ProductActions
• ProductAttributes
• ProductCard
• ProductGallery
• ProductReviews
• ProductSearch
• ViewedItems
• Wishlist

HOCs

• Material UI

Material UI HOCs

• MuiAccountInfo
• MuiAccountOrders
• MuiBreadcrumbs
• MuiCartList
• MuiCategoryList
• MuiCategorySort
• MuiCheckout
• MuiCurrencySwitch
• MuiProductActions
• MuiProductAttributes
• MuiProductCard
• MuiProductReviews
• MuiProductSearch
• MuiViewedItems
• MuiWishlist