react-shopping-cart-starter-kit

React Shopping Cart Starter Kit

This component comes with no batteries included. It was initially designed for creating and editing orders, but is likely to be applicable in other contexts where a selection of some kind is involved.

Installation

npm install react-shopping-cart-starter-kit

How to use

Preparation

Assign a unique id to each item. For demonstration, we will use the following key-value object with a catalog of five products.

var myProducts = {
  "product-1" : { "name": "Canned Unicorn Meat", "price" : "9.99" },
  "product-2" : { "name": "Disappearing Ink Pen", "price" : "14.99" },
  "product-3" : { "name": "USB Rocket Launcher", "price" : "29.99" },
  "product-4" : { "name": "Airzooka Air Gun", "price" : "29.99" },
  "product-5" : { "name": "Star Trek Paper Clips", "price" : "19.99" }
};

Hello, World!

todo

Props

Required

Property	Type	Description
columns	Array	The columns used in the table of items currently in the cart. Items added to the cart should have keys matching the entries of this array.

Optional

Property	Type	Description	Default
items	Object	Normally, you pass an item's data with the call to addItem. As an alternative, you may provide an object here mapping each key to an object with this data.
selection	Array	Initial selection. (Used when editing an existing order or selection of items).	[]
onItemAdded	Function	Called when an item is added to the cart.	() => {}
onItemRemoved	Function	Called when an item is removed from the cart.	() => {}
onItemQtyChanged	Function	Called when an item's quantity has changed.	() => {}
onChange	Function	Called when the state of the component changes. (You may want to implement this callback to toggle the visibility of a submit button, based on whether the cart is empty or not.)	() => {}
iterator	Function	A function used to pass state between rows. The real raison d'être for this function is to sum up the price of each product in an order and output a total in the footer.
mainComponent	Component	A custom container component.
rowComponent	Component	A custom row component.
tableClassName	String	The css class name to apply to the table element. Whether this value is actually used or not depends on the implementation of mainComponent.
cartEmptyMessage	Node	A message shown when the cart is empty.	'The cart is empty.'

Initial data

If the user is editing an existing selection, use the selection prop to pass the collection as an array in the following format.

var orderData = [
  {
    "id"       : "item-1",
    "quantity" : 2,
    "data"     : { "name": "Canned Unicorn Meat", "price" : "9.99" }
  },
  {
    "id"       : "item-2",
    "quantity" : 1,
    "data"     : { "name": "Disappearing Ink Pen", "price" : "14.99" }
  }
];

API

addItem(key, quantity, item)

---

To add an item to the cart, provide its id, a quantity, and the item itself. (The third argument may not be required if you have previously supplied an object to the component's items props.)

cart.addItem('product-1', 1, myProducts['product-1']);

If an item with the given id already exists in the cart, no new item is inserted. Instead, the quantity is adjusted for the existing entry.

cart.addItem('product-1', 1, myProducts['product-1']);
cart.addItem('product-1', 1);

cart.getSelection();

[
  {
    "id"       : "product-1",
    "quantity" : 2,
    "data"     : { "name": "Canned Unicorn Meat", "price" : "9.99" }
  }
]

emptyCart()

---

Clears the cart.

reset()

---

Does the same as emptyCart(), unless you specify the selection prop, in which case the initial selection will be restored. That is, when editing an existing order, this method will revert the cart back to a state consistent with the order being edited.

getSelection()

---

Return the current selection.

[
  {
    "id"       : "item-1",
    "quantity" : 2,
    "data"     : { "name": "Canned Unicorn Meat", "price" : "9.99" }
  },
  {
    "id"       : "item-2",
    "quantity" : 1,
    "data"     : { "name": "Disappearing Ink Pen", "price" : "14.99" }
  }
];

isEmpty()

---

Return true if the cart is empty, otherwise false.

removeItem(index)

---

In a typical implementation, it is not necessary to call this method directly. Instead, use this.props.removeItem from within the row component.

updateQuantity(index, quantity)

---

In a typical implementation, it is not necessary to call this method directly. Instead, use this.props.setItemQty from within the row component.

Customization

todo

Recipes

todo