Skip to content

Commit 3cda54b

Browse files
w3bdesignw3bdesign
committed
Experimenting with responsive shopping cart
1 parent 987e8aa commit 3cda54b

File tree

5 files changed

+223
-45
lines changed

5 files changed

+223
-45
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const CartItem = ({
3939

4040
<td className="px-4 py-2 border">
4141
<input
42-
className="w-6"
42+
className="w-12"
4343
type="number" min="1" value={productCount} />
4444
</td>
4545

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

Lines changed: 6 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@ import {
1111
removeItemFromCart,
1212
} from '../../../utils/functions/functions';
1313

14-
import CartItem from 'components/Cart/CartPage/CartItem.component';
1514
import PageTitle from 'components/Header/PageTitle.component';
15+
import RegularCart from './RegularCart.component';
16+
import MobileCart from './MobileCart.component';
1617

1718
import { GET_CART } from 'utils/const/GQL_QUERIES';
1819

@@ -43,52 +44,14 @@ const CartItemsContainer = () => {
4344

4445
return (
4546
<>
46-
{
47-
/*
48-
<PageTitle title="Handlekurv" />
49-
*/
50-
}
51-
5247
<section className="py-8 bg-white">
5348
<div className="container flex flex-wrap items-center mx-auto">
5449
{cart ? (
55-
<div
56-
className="p-6 mx-auto mt-5"
57-
>
50+
<div className="p-6 mx-auto mt-5">
5851
<PageTitle title="Handlekurv" />
59-
<table className="table-auto">
60-
<thead>
61-
<tr>
62-
<th className="px-4 py-2" scope="col" />
63-
<th className="px-4 py-2" scope="col" />
64-
<th className="px-4 py-2" scope="col">
65-
Produkt
66-
</th>
67-
<th className="px-4 py-2" scope="col">
68-
Pris
69-
</th>
70-
<th className="px-4 py-2" scope="col">
71-
Antall
72-
</th>
73-
<th className="px-4 py-2" scope="col">
74-
Total
75-
</th>
76-
</tr>
77-
</thead>
78-
<tbody>
79-
{cart.products.length &&
80-
cart.products.map((item) => (
81-
<CartItem
82-
key={item.productId}
83-
item={item}
84-
products={cart.products}
85-
// updateCartProcessing={updateCartProcessing}
86-
// handleRemoveProductClick={handleRemoveProductClick}
87-
// updateCart={updateCart}
88-
/>
89-
))}
90-
</tbody>
91-
</table>
52+
53+
<RegularCart cart={cart} />
54+
<MobileCart cart={cart} />
9255

9356
<div className="mt-4">
9457
<Link href="/kasse">
@@ -98,7 +61,6 @@ const CartItemsContainer = () => {
9861
</Link>
9962
</div>
10063
</div>
101-
10264
) : (
10365
<div className="p-6 mx-auto mt-5">
10466
<h2 className="text-lg">Ingen varer i handlekurven</h2>

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

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import MobileCartItem from './MobileCartItem.component';
2+
3+
const MobileCart = ({ cart }) => {
4+
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+
>
9+
<div className="flex items-center justify-center">
10+
<div className="container">
11+
<table className="flex flex-row flex-no-wrap my-5 overflow-hidden rounded-lg sm:bg-white sm:shadow-lg" style={{width: "360px"}}>
12+
<thead className="text-black">
13+
<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">
14+
<th className="p-3 text-left">Fjern</th>
15+
<th className="p-3 text-left">Navn</th>
16+
<th className="p-3 text-left">Pris</th>
17+
<th className="p-3 text-left">Antall</th>
18+
<th className="p-3 text-left">Totalpris</th>
19+
</tr>
20+
<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">
21+
<th className="p-3 text-left">Fjern</th>
22+
<th className="p-3 text-left">Navn</th>
23+
<th className="p-3 text-left">Pris</th>
24+
<th className="p-3 text-left">Antall</th>
25+
<th className="p-3 text-left">Totalpris</th>
26+
</tr>
27+
<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">
28+
<th className="p-3 text-left">Fjern</th>
29+
<th className="p-3 text-left">Navn</th>
30+
<th className="p-3 text-left">Pris</th>
31+
<th className="p-3 text-left">Antall</th>
32+
<th className="p-3 text-left">Totalpris</th>
33+
</tr>
34+
<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">
35+
<th className="p-3 text-left">Fjern</th>
36+
<th className="p-3 text-left">Navn</th>
37+
<th className="p-3 text-left">Pris</th>
38+
<th className="p-3 text-left">Antall</th>
39+
<th className="p-3 text-left">Totalpris</th>
40+
</tr>
41+
</thead>
42+
<tbody className="flex-1 sm:flex-none">
43+
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
44+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
45+
X
46+
</td>
47+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
48+
WordPress Pennant
49+
</td>
50+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
51+
kr 18.00
52+
</td>
53+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
54+
1
55+
</td>
56+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
57+
kr 18.00
58+
</td>
59+
</tr>
60+
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
61+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
62+
X
63+
</td>
64+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
65+
WordPress Pennant
66+
</td>
67+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
68+
kr 18.00
69+
</td>
70+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
71+
1
72+
</td>
73+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
74+
kr 18.00
75+
</td>
76+
</tr>
77+
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
78+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
79+
X
80+
</td>
81+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
82+
WordPress Pennant
83+
</td>
84+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
85+
kr 18.00
86+
</td>
87+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
88+
1
89+
</td>
90+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
91+
kr 18.00
92+
</td>
93+
</tr>
94+
<tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
95+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
96+
X
97+
</td>
98+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
99+
WordPress Pennant
100+
</td>
101+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
102+
kr 18.00
103+
</td>
104+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
105+
1
106+
</td>
107+
<td className="h-12 p-3 border border-grey-light hover:bg-gray-100">
108+
kr 18.00
109+
</td>
110+
</tr>
111+
</tbody>
112+
</table>
113+
</div>
114+
</div>
115+
116+
<div
117+
//className="flex flex-col"
118+
className="flex flex-col justify-between"
119+
>
120+
{cart.products.length &&
121+
cart.products.map((item) => (
122+
<MobileCartItem
123+
key={item.productId}
124+
item={item}
125+
products={cart.products}
126+
// updateCartProcessing={updateCartProcessing}
127+
// handleRemoveProductClick={handleRemoveProductClick}
128+
// updateCart={updateCart}
129+
/>
130+
))}
131+
</div>
132+
</section>
133+
);
134+
};
135+
136+
export default MobileCart;

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { useState } from 'react';
2+
3+
import SVGX from 'components/SVG/SVGX.component';
4+
5+
const MobileCartItem = ({ item }) => {
6+
const [productCount, setProductCount] = useState(item.qty);
7+
8+
return (
9+
<>
10+
<div className="inline-block pt-2">
11+
<SVGX />
12+
</div>
13+
14+
<div className="inline-block pt-2">
15+
{item.name}
16+
17+
</div>
18+
19+
<div className="inline-block pt-2">
20+
{'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
21+
22+
</div>
23+
24+
<div className="inline-block pt-2">
25+
<input className="w-12" type="number" min="1" value={productCount} />
26+
27+
</div>
28+
29+
<div className="inline-block pt-2">
30+
{'string' !== typeof item.totalPrice
31+
? item.totalPrice.toFixed(2)
32+
: item.totalPrice}
33+
34+
</div>
35+
</>
36+
);
37+
};
38+
39+
export default MobileCartItem;

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import CartItem from './CartItem.component';
2+
3+
const RegularCart = ({ cart }) => {
4+
return (
5+
<table className="hidden table-auto md:block lg:block xl:block">
6+
<thead>
7+
<tr>
8+
<th className="px-4 py-2" scope="col" />
9+
<th className="px-4 py-2" scope="col" />
10+
<th className="px-4 py-2" scope="col">
11+
Produkt
12+
</th>
13+
<th className="px-4 py-2" scope="col">
14+
Pris
15+
</th>
16+
<th className="px-4 py-2" scope="col">
17+
Antall
18+
</th>
19+
<th className="px-4 py-2" scope="col">
20+
Total
21+
</th>
22+
</tr>
23+
</thead>
24+
<tbody>
25+
{cart.products.length &&
26+
cart.products.map((item) => (
27+
<CartItem
28+
key={item.productId}
29+
item={item}
30+
products={cart.products}
31+
// updateCartProcessing={updateCartProcessing}
32+
// handleRemoveProductClick={handleRemoveProductClick}
33+
// updateCart={updateCart}
34+
/>
35+
))}
36+
</tbody>
37+
</table>
38+
);
39+
};
40+
41+
export default RegularCart;

0 commit comments

Comments
 (0)