-
Notifications
You must be signed in to change notification settings - Fork 0
/
MiniCart.js
151 lines (143 loc) · 7.17 KB
/
MiniCart.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
/* This example requires Tailwind CSS v2.0+ */
import { Fragment, useContext } from 'react'
import Link from 'next/link'
import { Dialog, Transition } from '@headlessui/react'
import { XIcon } from '@heroicons/react/outline'
import Image from 'next/image'
import { CartContext } from '../context/shopContext'
import { formatter } from '../utils/helpers'
export default function MiniCart() {
const { cart, cartOpen, setCartOpen, checkoutUrl, removeCartItem } = useContext(CartContext)
let cartTotal = 0
cart.map(item => {
cartTotal += item?.variantPrice * item?.variantQuantity
})
return (
<Transition.Root show={cartOpen} as={Fragment}>
<Dialog as="div" className="fixed inset-0 overflow-hidden z-50"
onClose={() => setCartOpen(!cartOpen)}>
<div className="absolute inset-0 overflow-hidden">
<Transition.Child
as={Fragment}
enter="ease-in-out duration-500"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in-out duration-500"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Dialog.Overlay className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-y-0 right-0 pl-10 max-w-full flex">
<Transition.Child
as={Fragment}
enter="transform transition ease-in-out duration-500 sm:duration-700"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transform transition ease-in-out duration-500 sm:duration-700"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<div className="w-screen max-w-md">
<div className="h-full flex flex-col bg-white shadow-xl overflow-y-scroll">
<div className="flex-1 py-6 overflow-y-auto px-4 sm:px-6">
<div className="flex items-start justify-between">
<Dialog.Title className="text-lg font-medium text-gray-900">Shopping cart</Dialog.Title>
<div className="ml-3 h-7 flex items-center">
<button
type="button"
className="-m-2 p-2 text-gray-400 hover:text-gray-500"
onClick={() => setCartOpen(false)}
>
<span className="sr-only">Close panel</span>
<XIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
</div>
<div className="mt-8">
<div className="flow-root">
{
cart.length > 0 ?
<ul role="list" className="-my-6 divide-y divide-gray-200">
{cart.map((product) => (
<li key={product.id} className="py-6 flex">
{console.log(product, 'product in mini-cart')}
<div className="relative flex-shrink-0 w-24 h-24 border border-gray-200 rounded-md overflow-hidden">
<Image
src={product.image}
alt={product.title}
layout="fill"
objectFit="cover"
/>
</div>
<div className="ml-4 flex-1 flex flex-col">
<div>
<div className="flex justify-between text-base font-medium text-gray-900">
<h3>
<Link href={`/products/${product.handle}`} passHref>
<a onClick={() => setCartOpen(false)}> {product.title} </a>
</Link>
</h3>
<p className="ml-4">{formatter.format(product.variantPrice)}</p>
</div>
<p className="mt-1 text-sm text-gray-500">{product.variantTitle}</p>
</div>
<div className="flex-1 flex items-end justify-between text-sm">
<p className="text-gray-500">Qty {product.variantQuantity}</p>
<div className="flex">
<button
type="button"
className="font-medium text-gray-500 hover:text-gray-800"
onClick={() => removeCartItem(product.id)}
>
Remove
</button>
</div>
</div>
</div>
</li>
))}
</ul>
: <h3>Nothing In Your Cart</h3>
}
</div>
</div>
</div>
{
cart.length > 0 ?
<div className="border-t border-gray-200 py-6 px-4 sm:px-6">
<div className="flex justify-between text-base font-medium text-gray-900">
<p>Subtotal</p>
<p>{formatter.format(cartTotal)}</p>
</div>
<p className="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
<div className="mt-6">
<a
href={checkoutUrl}
className="flex justify-center items-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-black hover:bg-gray-800"
>
Checkout
</a>
</div>
<div className="mt-6 flex justify-center text-sm text-center text-gray-500">
<p>
or{' '}
<button
type="button"
className="text-indigo-600 font-medium hover:text-gray-800"
onClick={() => setCartOpen(false)}
>
Continue Shopping<span aria-hidden="true"> →</span>
</button>
</p>
</div>
</div> : null }
</div>
</div>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
)
}