react-shop-cart

A react shopping cart components with redux with instant updates for e-commerce applications

This package provides several components:

• Cart
• CartReducers
• AddCartButton

Meta

• author: Christian Ballester <[e-mail]>
• 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}. Required
• image string Path to main image. Required.

License