0.1.0 • Published 3 years ago
cart-system-hexipi v0.1.0
Cart System React.JS Component by #HexiPi
Installation:
npm install cart-system-hexipi --save
OR
yarn add cart-system-hexipi
Example of Usage:
import React, { Component } from 'react';
import { CartButton, AddToCartButton } from 'cart-system-hexipi';
import { getCurrentPageBgColor, getMonochromeColor } from 'color-functions-hexipi';
import CheckoutPage from './checkout';
import './App.css';
class CartButtonDemo extends Component {
state = {
cartItems: [], //Holds the items added to the cart as an array of JSON objects
wasItemAdded: false, //Flag that indicates whether an item was recently
//added to the cart
};
//Used to add items to the cart array
addItemToCart = (item) => {
const currentCart = [...this.state.cartItems];
currentCart.push(item);
this.setState({
cartItems: currentCart,
wasItemAdded: true,
});
}
//Used to reset the "wasItemAdded" flag
resetItemAddedFlag = () => this.setState({ wasItemAdded: false });
//Used to update the cart items, whenever the user updates a cart item's quantity
updateCart = (items) => this.setState({ cartItems: items });
//Used to clear the cart items
clearCart = () => this.setState({ cartItems: [] });
render() {
return (
<div className="App-header">
<CartButton
sidePanelBgColor={
getMonochromeColor(getCurrentPageBgColor(), 4)
}
cartItems={this.state.cartItems}
wasItemAdded={this.state.wasItemAdded}
resetWasItemAddedFlag={this.resetItemAddedFlag}
updateCart={this.updateCart}
clearCart={this.clearCart}
checkoutPage={<CheckoutPage />}
/>
<section>
Test Item #1
<AddToCartButton
itemData={
{
_id: 1,
name: "Test Item #1",
unit_price: 4.99,
quantity: 1
}
}
addItemToCart={this.addItemToCart}
/>
<br />
<br />
Test Item #2
<AddToCartButton
itemData={
{
_id: 2,
name: "Test Item #2",
unit_price: 10.99,
quantity: 1
}
}
addItemToCart={this.addItemToCart}
target={
<button className="button-transparent">
Add to Cart
</button>
}
/>
</section>
</div>
);
}
}
export default CartButtonDemo;
Attributes & Data Types for CartButton:
Below is a list of all the available attributes:
interface CartButtonProps {
//The array of the type "CartItemData" that will contain the items that are
//in the user's cart;
//This is simply a property that is passed into the CartButton component;
//Its state should be maintained externally
cartItems: CartItemData[],
//The tax percentage that will be charged
taxPercentage: number,
//The flag that indicates whether an item was recently added to the cart;
//This is simply a property that is passed into the CartButton component;
//Its state should be maintained externally
wasItemAdded: boolean,
//The custom checkout page that would appear when the
//user is ready to check out
checkoutPage: React.Component,
//The optional custom icon that is displayed on the CartButton
buttonIcon?: object,
//The optional color value that determines the color of the CartButton;
//The colors are based on Bootstrap button colors
buttonColor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning'
| 'info' | 'light' | 'dark' | 'link',
//The optional custom color of the cart side panel
sidePanelBgColor?: string,
//The optional custom text that would be displayed whenever the user
//adds an item to the cart
toastText?: string,
//The optional custom text that would be displayed on the cart side panel
//whenever the user's cart is empty
cartEmptyText?: string,
//The callback that is executed so that the "wasItemAdded"
//flag can be reset
resetWasItemAddedFlag: () => void,
//The callback that is executed so that the cart items
//can be updated
updateCart: (cartItems: CartItemData[]) => void,
//The callback that is executed so that the cart items
//can be cleared
clearCart: () => void
}
Note: Most attributes are technically optional since they already have default values assigned to them (with the exception of the cartItems and the wasItemAdded attributes). However the ones that are actually optional (marked with a "?") will not be shown or used by default. All callback functions are required if you actually want the cart system to work properly.
Below are all the available values of the CartButtonProps default values:
CartButtonProps.defaultProps = {
//A tax percentage of 8.25%
taxPercentage: 8.25,
buttonColor: 'primary' as 'primary' | 'secondary' | 'success' | 'danger'
| 'warning' | 'info' | 'light' | 'dark' | 'link',
sidePanelBgColor: 'grey',
toastText: 'Added to Cart!',
cartEmptyText: 'Oh No! Your Cart is Empty!'
}
The following describes the props that are made available to the component that is passed into the checkout attribute, which could then be used as needed.
Below are all the available values of the CheckoutPageProps interface:
interface CheckoutPageProps {
//The array of the type "CartItemData" that will contain the items that are
//in the user's cart
cartItems: CartItemData[],
//The JSON object of the type "CartItemsTotalsData" that will contain the
//subtotal, tax, and grand total values of the items in the user's cart
totalsData: CartItemsTotalsData,
//Triggers the checkout page to close
closeCheckoutModal: () => void,
//Triggers the checkout process to cancel
checkoutModalCancel: () => void
}
Below are all the available values of the CartItemData interface:
interface CartItemData {
//The item's unique ID;
//This should be the same ID that represents your item on your database
_id: string,
//The name of the item or a title that describes it
name: string,
//Cost per unit item in USD;
//More supported currencies will be added in the future
unit_price: number,
//Quantity of the item
quantity: number,
//The optional ID that is assigned to the item while it is in the cart;
//This is different from the "_id" field, as this is only used while the item
//is in the cart and is not static, meaning it could be different every time
//the item is added to the cart;
//It is recommended that this field is left empty, as the AddToCartButton
//component automatically assigns this field a value
cart_item_id?: string,
}
Note: This is the format of the JSON object that should be used whenever assigning the itemData attribute on the AddToCartButton component. You may add additional properties or data to the JSON object as necessary (example: color, category, yearOfManufacture, etc.), but the above properties are the essential properties that are required so that cart system can work properly.
Below are all the available values of the CartItemsTotalsData interface:
interface CartItemsTotalsData {
//Subtotal amount of the items in the user's cart
subtotal: number,
//Total tax amount of the items in the user's cart
tax: number,
//Grand total amount (subtotal + tax) of the items in the user's cart
grandTotal: number,
}
Below is a (crappy 😅) sample checkout page showing how to use the CheckoutPageProps :
import React from 'react';
const Checkout = props => {
const renderItems = cartItems => {
return cartItems.map(item => (
<p>
{item.name}:<br />
Quantity: {item.quantity}<br />
Unit Price: ${item.unit_price}<br />
Total Price: ${item.quantity * item.unit_price}
</p>
));
}
return (
<div>
<button onClick={props.checkoutModalCancel}>Cancel</button>
<button onClick={props.closeCheckoutModal}>Submit Order</button>
<br /><br />
<div>
{renderItems(props.cartItems)}
</div>
<br /><br />
Subtotal: ${props.totalsData.subtotal.toFixed(2)}<br />
Tax: ${props.totalsData.tax.toFixed(2)}<br />
Grand Total: ${props.totalsData.grandTotal.toFixed(2)}
<br /><br />
<button onClick={props.checkoutModalCancel}>Cancel</button>
<button onClick={props.closeCheckoutModal}>Submit Order</button>
</div>
);
}
export default Checkout;
Attributes & Data Types for AddToCartButton:
Below is a list of all the available attributes:
interface AddToCartButtonProps {
//The JSON object of the type "CartItemData" that holds the data of the
//item associated with the AddToCartButton;
//The data must follow the structure of the "CartItemData" interface,
//but it may include extra properties as necessary.
itemData: CartItemData,
//The optional custom text that the AddToCartButton will display
buttonText?: string,
//The optional color value that determines the color of the CartButton;
//The colors are based on Bootstrap button colors
buttonColor?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning'
| 'info' | 'light' | 'dark' | 'link',
//IMPLEMENTATION TO COME...
doesUpdateQuantity?: boolean,
//The optional custom button or component that will trigger the
//"add to cart" action;
//Using this property will disable the "buttonText" and "buttonColor" properties
//Any customizations need to be done externally
target?: any,
//The callback that is executed when the AddToCartButton is clicked;
//The "item" parameter holds the data of the item
//which is of the type "CartItemData"
addItemToCart: (item: CartItemData) => void
}
Note: Most attributes are technically optional since they already have default values assigned to them (with the exception of the itemData attribute). However the ones that are actually optional (marked with a "?") will not be shown or used by default. All callback functions are required if you actually want the cart system to work properly.
Below are all the available values of the AddToCartButtonProps default values:
AddToCartButtonProps.defaultProps = {
buttonText = 'Add to Cart',
buttonColor = 'primary' as 'primary' | 'secondary' | 'success' | 'danger'
| 'warning' | 'info' | 'light' | 'dark' | 'link',
doesUpdateQuantity = true,
target = null,
}
Below are all the available values of the CartItemData interface:
interface CartItemData {
//The item's unique ID;
//This should be the same ID that represents your item on your database
_id: string,
//The name of the item or a title that describes it
name: string,
//Cost per unit item in USD;
//More supported currencies will be added in the future
unit_price: number,
//Quantity of the item
quantity: number,
//The optional ID that is assigned to the item while it is in the cart;
//This is different from the "_id" field, as this is only used while the item
//is in the cart and is not static, meaning it could be different every time
//the item is added to the cart;
//It is recommended that this field is left empty, as the AddToCartButton
//component automatically assigns this field a value
cart_item_id?: string,
}
Note: This is the format of the JSON object that should be used whenever assigning the itemData attribute on the AddToCartButton component. You may add additional properties or data to the JSON object as necessary (example: color, category, yearOfManufacture, etc.), but the above properties are the essential properties that are required so that cart system can work properly.
0.1.0
3 years ago
0.0.23
4 years ago
0.0.22
4 years ago
0.0.21
4 years ago
0.0.20
4 years ago
0.0.19
4 years ago
0.0.14
4 years ago
0.0.15
4 years ago
0.0.16
4 years ago
0.0.17
4 years ago
0.0.18
4 years ago
0.0.13
4 years ago
0.0.11
4 years ago
0.0.12
4 years ago
0.0.10
4 years ago
0.0.9
4 years ago
0.0.8
4 years ago
0.0.7
4 years ago
0.0.6
4 years ago
0.0.5
4 years ago
0.0.4
4 years ago
0.0.3
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago