Components for E-commerce store: List of products, Individual product page, Thumbnail views, Cart helpers.
The components can be used with React or Next.js.
The library has 2 entry points:
- General -
import {Products, Product} from 'boundless-commerce-components'
- Client -
import {BoundlessCart} from 'boundless-commerce-components/dist/client'
The client entry point uses client's hooks (useEffect
and so on) and in Next.JS v14 should be used with use client
directive. Read more about Client components in Next.js
API’s First Headless E-commerce CMS: We Provide An Admin-Side For Store Management, Powerful API, And Ready-To-Use Checkout Area.
There is an option for Running Boundless-Commerce on your own server. Read more at Open-Source Headless eCommerce Platform
yarn add boundless-commerce-components
Or via NPM:
npm install boundless-commerce-components --save
import {Products, Product} from 'boundless-commerce-components';
<Products
all={{gap: 10, perRow: 2}}
lg={{gap: 30, perRow: 4}}
xxl={{gap: 30, perRow: 6}}
>
{products.map((product) =>
<Product
product={product}
key={product.product_id}
link={{component: Link, href: `/product/${product.url_key || product.product_id}`}}
apiClient={apiClient}
settings={settings}
/>
)}
</Products>
Products
accepts all, sm, md, lg, xl, xxl
to determine the number of products per row and the spacing between them.
Product view can be customized by redefining internal components:
<Product
components={{
image: <div>My own Img view</div>,
title: <div>My own Title view</div>,
price: <div>My own Price view</div>
}}
/>
If you want to use cart hooks you need to wrap the application in BoundlessCart
.
//if you are using NextJS - add client directive:
'use client';
import {BoundlessCart} from 'boundless-commerce-components/dist/client';
<BoundlessCart apiClient={apiClient}>
{children}
</BoundlessCart>
The wrapper inits the context, retrieves cart_id from the server and saves it in Cookie.
'use client';
import {useCart} from 'boundless-commerce-components/dist/client';
const {cartId, addToCart, total} = useCart();
Please see examples of usage:
'use client';
import {useCustomer} from 'boundless-commerce-components/dist/client';
const {customerAuthToken, setCustomerAuthToken, customer, setCustomer, login, logout, customerIsInited} = useCustomer();
Please see examples of usage: