Cart
2 | 3 |Headless cart management library
4 | 5 |  6 | 7 |
8 |
9 |
10 |
11 | 
12 |
13 |
14 |
15 |
16 | 
17 |
18 |
19 | 
25 | 
26 |
85 |
94 | );
95 | }
96 |
97 | export default Cart;
98 | ```
99 |
100 | ### :bulb: SSR Example
101 |
102 | ```jsx
103 | import { useCart, withSSR } from "cart";
104 | import React from "react";
105 |
106 | const item = {
107 | productId: "123",
108 | name: "Product 1",
109 | quantity: 1,
110 | price: 10,
111 | };
112 |
113 | function MyCart() {
114 | const cart = withSSR(useCart, (state) => state);
115 |
116 | const handleToggle = () => {
117 | cart?.toggleCart();
118 | };
119 |
120 | const itemadd = () => {
121 | cart?.addToCart(item);
122 | };
123 |
124 | return (
125 | {isCartOpen ? "Open" : "Closed"}
86 | 87 | 88 | 89 | 90 | 91 | 92 |{JSON.stringify(cartItems)}
93 |
126 |
135 | );
136 | }
137 |
138 | export default MyCart;
139 | ```
140 |
141 | ---
142 |
143 | ### API Reference
144 |
145 | | Name | Type | Default Value | Description | Example |
146 | | ---------------- | ---------- | ------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
147 | | `isCartOpen` | `boolean` | `false` | Indicates whether the cart is open or not. | `isCartOpen ? "Yes" : "No"` |
148 | | `toggleCart` | `function` | - | Toggles the visibility of the shopping cart. | `toggleCart();` |
149 | | `openCart` | `function` | - | Sets the cart open state to `true`. | `openCart();` |
150 | | `closeCart` | `function` | - | Sets the cart open state to `false`. | `closeCart();` |
151 | | `cartItems` | `array` | `[]` | An array of items in the cart. | `cartItems.map((item) => ( {cart?.isCartOpen ? "Open" : "Closed"}
127 | 128 | 129 | 130 | 131 | 132 | 133 |{JSON.stringify(cart?.cartItems)}
134 |{item.name}
Quantity: {item.quantity}
Price: ${item.price}
 Josh Goldberg ✨ 🔧 |
174 |  MC Naveen 💻 🖋 📖 🤔 🚇 🚧 📆 🔧 |
175 |
10 | {cart?.cartItems?.length! > 0 && (
11 |
23 | )
24 |
25 | }
26 |
--------------------------------------------------------------------------------
/docs/components/mycart.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { type CartItems, type CartState, useCart, withSSR } from 'cart';
4 | import React from 'react';
5 |
6 | import {FloatingButton} from "./floatingButton"
7 |
8 | interface Product {
9 | name: string;
10 | price: number;
11 | productId: string;
12 | }
13 |
14 | const products: Product[] = [
15 | {
16 | name: 'Product 1',
17 | price: 10,
18 | productId: '123',
19 | },
20 | {
21 | name: 'Product 2',
22 | price: 15,
23 | productId: '456',
24 | },
25 | {
26 | name: 'Product 3',
27 | price: 20,
28 | productId: '789',
29 | },
30 | ];
31 |
32 | export function MyCart() {
33 | const cart = withSSR(useCart, (state) => state);
34 |
35 | const handleToggle = () => {
36 | cart?.toggleCart?.();
37 | };
38 |
39 | const addItem = (product: CartItems) => {
40 | cart?.addToCart?.(product);
41 | };
42 |
43 | const subtractItem = (productId: string) => {
44 | cart?.decreaseItem?.(productId, 1);
45 | };
46 |
47 | return (
48 | <>
49 | alert(cart?.cartItems?.length! > 0 ? "Items in the cart: " + JSON.stringify(cart?.cartItems, null, 2): "No Items in the cart")}
15 | >
16 |
21 | )}
22 |
51 |
103 |
104 | );
105 | }
106 |
--------------------------------------------------------------------------------
/docs/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// 52 | Cart Status: {cart?.isCartOpen ? 'Open' : 'Closed'} 53 |
54 |
55 |
56 |
62 |
68 | {products.map((product) => {
69 | const cartItem = cart?.cartItems?.find(
70 | (item) => item.productId === product.productId
71 | );
72 | const quantity = cartItem ? cartItem.quantity : 0;
73 | const total = quantity * product.price;
74 |
75 | return (
76 |
102 |
80 |
99 | );
100 | })}
101 |
81 | {product.name} - ${product.price} (x{quantity}) - ${total}
82 |
83 |
84 |
91 |
97 |
98 | {item.name}
Quantity: {item.quantity}
Price: ${item.price}
61 |
111 | );
112 | }
113 | ```
--------------------------------------------------------------------------------
/docs/pages/usage/react.mdx:
--------------------------------------------------------------------------------
1 | # Using with Reactjs
2 |
3 | ### Intro
4 | Once you have done with the Installation, All you have to do is to Import useCart hook in your Cart Component
5 |
6 | Then create a new file called mycart.jsx and use the below example code.
7 |
8 | ### Example
9 |
10 | ```jsx filename="mycart.jsx" copy
11 | import React from "react";
12 | import { useCart } from "cart";
13 |
14 | export default function Cart() {
15 | const { addToCart, decreaseItem, clearCart, cartItems } = useCart();
16 |
17 | const products = [
18 | {
19 | productId: "123",
20 | name: "Product 1",
21 | price: 10,
22 | },
23 | {
24 | productId: "456",
25 | name: "Product 2",
26 | price: 15,
27 | },
28 | // Add more products as needed
29 | ];
30 |
31 | const addItem = (product) => {
32 | addToCart({ ...product, quantity: 1 });
33 | };
34 |
35 | const subtractItem = (productId) => {
36 | decreaseItem(productId, 1);
37 | };
38 |
39 | const clear = () => {
40 | clearCart();
41 | };
42 |
43 | return (
44 | 62 | Cart Status: {cart?.isCartOpen ? 'Open' : 'Closed'} 63 |
64 |
65 | {cart?.isCartOpen && (
66 |
110 |
67 |
70 | )}
71 |
76 |
81 | {products.map((product) => {
82 | const cartItem = cart?.cartItems?.find(
83 | (item) => item.productId === product.productId
84 | );
85 | const quantity = cartItem ? cartItem.quantity : 0;
86 | const total = quantity * product.price;
87 |
88 | return (
89 | Cart Items:
68 |{JSON.stringify(cart?.cartItems, null, 2)}
69 |
93 |
107 | );
108 | })}
109 |
94 | {product.name} - ${product.price} (x{quantity}) - ${total}
95 |
96 |
101 |
106 |
45 |
77 | );
78 | }
79 | ```
80 |
81 | Now, All you have to do is to import the Cart component you have just created.
82 |
83 | ```jsx filename="index.jsx" copy
84 | import { Cart } from "./mycart";
85 |
86 | // and use it as component
87 | Cart Item Count: {cartItems.length}
46 |-
47 | {products.map((product) => {
48 | const cartItem = cartItems.find(
49 | (item) => item.productId === product.productId,
50 | );
51 | const quantity = cartItem ? cartItem.quantity : 0;
52 |
53 | return (
54 | <>
55 |
- 56 | {product.name} - ${product.price} (x{quantity}) - $ 57 | {quantity * product.price} 58 | 59 | 62 | 63 |
64 | 65 | ); 66 | })} 67 |
69 | Total Price: $ 70 | {cartItems.reduce( 71 | (total, item) => total + item.quantity * item.price, 72 | 0, 73 | )} 74 |
75 | {cartItems.length > 0 && } 76 |