Skip to content

Commit a60baee

Browse files
w3bdesignw3bdesign
authored
Merge pull request #169 from w3bdesign/development
Mobile cart is complete
2 parents c7d333f + b287733 commit a60baee

File tree

4 files changed

+96
-153
lines changed

4 files changed

+96
-153
lines changed

‎components/Cart/CartPage/CartItem.component.jsx

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,11 @@ import { useState } from 'react';
22
import { v4 } from 'uuid';
33

44
import SVGX from 'components/SVG/SVGX.component';
5+
import { getUpdatedItems } from 'utils/functions/functions';
56

6-
import { getUpdatedItems } from '../../../utils/functions/functions';
7-
8-
const CartItem = ({
9-
item,
10-
products,
11-
handleRemoveProductClick,
12-
updateCart,
13-
}) => {
7+
const CartItem = ({ item, products, handleRemoveProductClick, updateCart }) => {
148
const [productCount, setProductCount] = useState(item.qty);
159

16-
console.log("Update cart: ");
17-
console.log(updateCart);
18-
1910
/*
2011
* When user changes the quantity, update the cart in localStorage
2112
* Also update the cart in the global Context
@@ -27,18 +18,17 @@ const CartItem = ({
2718
const handleQuantityChange = (event, cartKey) => {
2819
if (process.browser) {
2920
event.stopPropagation();
30-
// If the previous update cart mutation request is still processing, then return.
31-
32-
/*if (updateCartProcessing) {
21+
// Return if the previous update cart mutation request is still processing
22+
/*
23+
if (updateCartProcessing) {
3324
return;
3425
}*/
3526
// If the user tries to delete the count of product, set that to 1 by default ( This will not allow him to reduce it less than zero )
3627
const newQty = event.target.value ? parseInt(event.target.value) : 1;
37-
// Set the new qty in state.
28+
// Set the new quantity in state.
3829
setProductCount(newQty);
3930
if (products.length) {
4031
const updatedItems = getUpdatedItems(products, newQty, cartKey);
41-
4232
updateCart({
4333
variables: {
4434
input: {
@@ -50,7 +40,6 @@ const CartItem = ({
5040
}
5141
}
5242
};
53-
5443
return (
5544
<tr className="bg-gray-100">
5645
<td className="px-4 py-2 border">

‎components/Cart/CartPage/MobileCart.component.jsx

Lines changed: 28 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,133 +1,44 @@
1+
import { v4 } from 'uuid';
2+
13
import MobileCartItem from './MobileCartItem.component';
4+
import SVGX from 'components/SVG/SVGX.component';
25

36
const MobileCart = ({ cart, handleRemoveProductClick, updateCart }) => {
47
return (
5-
<section
6-
//className="container mx-auto bg-white md:hidden lg:hidden xl:hidden"
7-
className="bg-white md:hidden lg:hidden xl:hidden"
8-
>
8+
<section className="bg-white md:hidden lg:hidden xl:hidden">
99
<div className="flex items-center justify-center">
1010
<div className="container">
11-
<table
12-
className="flex flex-row flex-no-wrap my-5 overflow-hidden rounded-lg sm:bg-white sm:shadow-lg"
13-
style={{ width: '365px' }}
14-
>
11+
<table className="flex flex-row flex-no-wrap mx-auto my-5 overflow-hidden rounded-lg sm:bg-white sm:shadow-lg">
1512
<thead className="text-black">
16-
<tr className="flex flex-col mb-2 bg-gray-200 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0">
17-
<th className="p-3 text-left">Fjern</th>
18-
<th className="p-3 text-left">Navn</th>
19-
<th className="p-3 text-left">Pris</th>
20-
<th className="p-3 text-left">Antall</th>
21-
<th className="p-3 text-left">Totalpris</th>
22-
</tr>
23-
<tr className="flex flex-col mb-2 bg-gray-200 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0">
24-
<th className="p-3 text-left">Fjern</th>
25-
<th className="p-3 text-left">Navn</th>
26-
<th className="p-3 text-left">Pris</th>
27-
<th className="p-3 text-left">Antall</th>
28-
<th className="p-3 text-left">Totalpris</th>
29-
</tr>
30-
<tr className="flex flex-col mb-2 bg-gray-200 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0">
31-
<th className="p-3 text-left">Fjern</th>
32-
<th className="p-3 text-left">Navn</th>
33-
<th className="p-3 text-left">Pris</th>
34-
<th className="p-3 text-left">Antall</th>
35-
<th className="p-3 text-left">Totalpris</th>
36-
</tr>
37-
<tr className="flex flex-col mb-2 bg-gray-200 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0">
38-
<th className="p-3 text-left">Fjern</th>
39-
<th className="p-3 text-left">Navn</th>
40-
<th className="p-3 text-left">Pris</th>
41-
<th className="p-3 text-left">Antall</th>
42-
<th className="p-3 text-left">Totalpris</th>
43-
</tr>
13+
{cart.products.length &&
14+
cart.products.map(() => (
15+
<tr
16+
key={v4()}
17+
className="flex flex-col mb-2 bg-white rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0"
18+
>
19+
<th className="p-3 text-left">Fjern</th>
20+
<th className="p-3 text-left">Navn</th>
21+
<th className="p-3 text-left">Pris</th>
22+
<th className="p-3 text-left">Antall</th>
23+
<th className="p-3 text-left">Totalpris</th>
24+
</tr>
25+
))}
4426
</thead>
4527
<tbody className="flex-1 sm:flex-none">
46-
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
47-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
48-
X
49-
</td>
50-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
51-
WordPress Pennant
52-
</td>
53-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
54-
kr 18.00
55-
</td>
56-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
57-
1
58-
</td>
59-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
60-
kr 18.00
61-
</td>
62-
</tr>
63-
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
64-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
65-
X
66-
</td>
67-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
68-
WordPress Pennant
69-
</td>
70-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
71-
kr 18.00
72-
</td>
73-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
74-
1
75-
</td>
76-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
77-
kr 18.00
78-
</td>
79-
</tr>
80-
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
81-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
82-
X
83-
</td>
84-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
85-
WordPress Pennant
86-
</td>
87-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
88-
kr 18.00
89-
</td>
90-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
91-
1
92-
</td>
93-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
94-
kr 18.00
95-
</td>
96-
</tr>
97-
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
98-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
99-
X
100-
</td>
101-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
102-
WordPress Pennant
103-
</td>
104-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
105-
kr 18.00
106-
</td>
107-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
108-
1
109-
</td>
110-
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
111-
kr 18.00
112-
</td>
113-
</tr>
28+
{cart.products.length &&
29+
cart.products.map((item) => (
30+
<MobileCartItem
31+
key={item.productId}
32+
item={item}
33+
products={cart.products}
34+
handleRemoveProductClick={handleRemoveProductClick}
35+
updateCart={updateCart}
36+
/>
37+
))}
11438
</tbody>
11539
</table>
11640
</div>
11741
</div>
118-
119-
<div className="flex flex-col justify-between">
120-
{cart.products.length &&
121-
cart.products.map((item) => (
122-
<MobileCartItem
123-
key={item.productId}
124-
item={item}
125-
products={cart.products}
126-
handleRemoveProductClick={handleRemoveProductClick}
127-
updateCart={updateCart}
128-
/>
129-
))}
130-
</div>
13142
</section>
13243
);
13344
};

‎components/Cart/CartPage/MobileCartItem.component.jsx

Lines changed: 61 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,82 @@
11
import { useState } from 'react';
2+
import { v4 } from 'uuid';
23

34
import SVGX from 'components/SVG/SVGX.component';
5+
import { getUpdatedItems } from 'utils/functions/functions';
46

5-
const MobileCartItem = ({ item }) => {
7+
const MobileCartItem = ({
8+
item,
9+
products,
10+
handleRemoveProductClick,
11+
updateCart,
12+
}) => {
613
const [productCount, setProductCount] = useState(item.qty);
714

15+
/*
16+
* When user changes the quantity, update the cart in localStorage
17+
* Also update the cart in the global Context
18+
*
19+
* @param {Object} event cartKey
20+
*
21+
* @return {void}
22+
*/
23+
const handleQuantityChange = (event, cartKey) => {
24+
if (process.browser) {
25+
event.stopPropagation();
26+
// Return if the previous update cart mutation request is still processing
27+
/*
28+
if (updateCartProcessing) {
29+
return;
30+
}*/
31+
// If the user tries to delete the count of product, set that to 1 by default ( This will not allow him to reduce it less than zero )
32+
const newQty = event.target.value ? parseInt(event.target.value) : 1;
33+
// Set the new quantity in state.
34+
setProductCount(newQty);
35+
if (products.length) {
36+
const updatedItems = getUpdatedItems(products, newQty, cartKey);
37+
updateCart({
38+
variables: {
39+
input: {
40+
clientMutationId: v4(),
41+
items: updatedItems,
42+
},
43+
},
44+
});
45+
}
46+
}
47+
};
48+
849
return (
950
<>
10-
<div className="inline-block pt-2">
11-
<SVGX />
12-
</div>
13-
14-
<div className="inline-block pt-2">{item.name}</div>
15-
16-
<div className="inline-block pt-2">
51+
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
52+
<td className="h-12 p-3 border-2 border-gray-400 ">
53+
<SVGX
54+
cartKey={item.cartKey}
55+
handleRemoveProductClick={handleRemoveProductClick}
56+
products={products}
57+
/>
58+
</td>
59+
<td className="h-12 p-3 border-l-2 border-r-2 border-gray-400 ">
60+
{item.name}
61+
</td>
62+
<td className="h-12 p-3 border-2 border-gray-400 ">
1763
{'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
18-
</div>
19-
20-
<div className="inline-block pt-2">
64+
</td>
65+
<td className="h-12 p-3 border-l-2 border-r-2 border-gray-400 ">
2166
<input
2267
className="w-12"
2368
type="number"
2469
min="1"
2570
defaultValue={productCount}
26-
onChange={() => {
27-
console.log('Changed quantity ...');
28-
}}
71+
onChange={(event) => handleQuantityChange(event, item.cartKey)}
2972
/>
30-
</div>
31-
32-
<div className="inline-block pt-2">
73+
</td>
74+
<td className="h-12 p-3 border-2 border-gray-400 ">
3375
{'string' !== typeof item.totalPrice
3476
? item.totalPrice.toFixed(2)
3577
: item.totalPrice}
36-
</div>
78+
</td>
79+
</tr>
3780
</>
3881
);
3982
};

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "nextjs-woocommerce",
3-
"version": "0.8.5",
3+
"version": "0.9.0",
44
"description": "",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
 (0)