README
react-shop-cart
A react shopping cart components with redux with instant updates for e-commerce applications
This package provides several components:
Meta
- author: Christian Ballester <ballester_christian@yahoo.com>
- license: MIT
- ** based on Dennis Paler react-cart-component **
Features
- Add and remove product to the cart
- Cart Products persist after page reloads
Demo
demo: https://flintstore.herokuapp.com/
Install
npm install --save react-shop-cart
Usage
With Redux.
import React, { Component } from 'react'
import { Provider } from 'react-redux'
import { createStore, combineReducers } from 'redux'
import { CartReducers } from react-cart-components'
const store = createStore(
combineReducers({
cart: CartReducers
// Your own reducers here,
})
);
import React, { Component } from 'react'
import { Cart, AddCartButton } from 'react-shop-cart'
const products = [
{
id: 1,
name: 'Flamboyant Pink Top',
sku: 'kskskskks',
price: 200.0,
image: 'https://colorlib.com/preview/theme/divisima/img/product/6.jpg'
},
{
id: 2,
name: 'Black and White Stripes Dress',
sku: 'kskskskks',
price: 300.0,
image: 'https://colorlib.com/preview/theme/divisima/img/product/5.jpg'
},
{
id: 3,
name: 'Flamboyant Pink Top',
sku: 'kskskskks',
price: 400.0,
image: 'https://colorlib.com/preview/theme/divisima/img/product/7.jpg'
},
{
id: 4,
name: 'Flamboyant Pink Top',
sku: 'kskskskks',
price: 400.0,
image: 'https://colorlib.com/preview/theme/divisima/img/product/8.jpg'
},
];
class Example extends Component {
render () {
return (
<Cart currency="USD" />
<div>
{products.map((product, key) => {
return (
<div className="col" key={key}>
<div className="product-item">
<div className="pi-pic">
<img src={product.image} />
<div className="pi-links">
<AddCartButton
product={product}
styles={{ backgroundColor: '#009688', color: 'white', border: '0' }}
/>
</div>
</div>
<div className="pi-text">
<p>{product.name}</p>
<h6>{formatter.format(product.price)}</h6>
</div>
</div>
</div>
);
})}
</div>
)
}
}
Props
Cart Component
Name | Type | Default | Description |
---|---|---|---|
currencySymbol | string | USD |
Currency symbol to be used |
checkoutTextLabel | string | Checkout |
A checkout button text on the cart |
cartTextLabel | string | Your Cart |
A cart header title |
subTotalTextLabel | string | Sub Total |
Cart - Sub Total Text |
quantityTextLabel | string | Quantity |
Cart - Product Qty Text |
handleCheckout | Function | null | handleCheckout will be triggered when checkoutLabel button is clicked and return cart products object. |
AddCartButton
Name | Type | Default | Description |
---|---|---|---|
product | Object | null | (Required) Product object to be added to the cart |
styles | Array[Object] | Object | [{}] |
The style used for button |
addLabel | string | Add to Cart |
A add cart button text |
Type: Object
Properties
id
string Product's id. Required.name
string Product Name to display pattern. Required.price
Price {currency: value}. Requiredimage
string Path to main image. Required.