-
Notifications
You must be signed in to change notification settings - Fork 202
/
Copy pathindex.blade.php
109 lines (105 loc) · 5.85 KB
/
index.blade.php
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
<x-app-layout>
<div class="container lg:w-2/3 xl:w-2/3 mx-auto">
<h1 class="text-3xl font-bold mb-6">Your Cart Items</h1>
<div x-data="{
cartItems: {{
json_encode(
$products->map(fn($product) => [
'id' => $product->id,
'slug' => $product->slug,
'image' => $product->image,
'title' => $product->title,
'price' => $product->price,
'quantity' => $cartItems[$product->id]['quantity'],
'href' => route('product.view', $product->slug),
'removeUrl' => route('cart.remove', $product),
'updateQuantityUrl' => route('cart.update-quantity', $product)
])
)
}},
get cartTotal() {
return this.cartItems.reduce((accum, next) => accum + next.price * next.quantity, 0).toFixed(2)
},
}" class="bg-white p-4 rounded-lg shadow">
<!-- Product Items -->
<template x-if="cartItems.length">
<div>
<!-- Product Item -->
<template x-for="product of cartItems" :key="product.id">
<div x-data="productItem(product)">
<div
class="w-full flex flex-col sm:flex-row items-center gap-4 flex-1">
<a :href="product.href"
class="w-36 h-32 flex items-center justify-center overflow-hidden">
<img :src="product.image" class="object-cover" alt=""/>
</a>
<div class="flex flex-col justify-between flex-1">
<div class="flex justify-between mb-3">
<h3 x-text="product.title"></h3>
<span class="text-lg font-semibold">
$<span x-text="product.price"></span>
</span>
</div>
<div class="flex justify-between items-center">
<div class="flex items-center">
Qty:
<input
type="number"
min="1"
x-model="product.quantity"
@change="changeQuantity()"
class="ml-3 py-1 border-gray-200 focus:border-purple-600 focus:ring-purple-600 w-16"
/>
</div>
<a
href="#"
@click.prevent="removeItemFromCart()"
class="text-purple-600 hover:text-purple-500"
>Remove</a
>
</div>
</div>
</div>
<!--/ Product Item -->
<hr class="my-5"/>
</div>
</template>
<!-- Product Item -->
<div class="border-t border-gray-300 pt-4">
<div class="flex justify-between">
<span class="font-semibold">Subtotal</span>
<span id="cartTotal" class="text-xl" x-text="`$${cartTotal}`"></span>
</div>
<p class="text-gray-500 mb-6">
Shipping and taxes calculated at checkout.
</p>
@if ( !Auth::check() || Auth::user()->shippingAddress != null && Auth::user()->billingAddress != null )
<form action="{{route('cart.checkout')}}" method="post" >
@csrf
<button type="submit" class="btn-primary w-full py-3 text-lg disabled">
Proceed to Checkout
</button>
</form>
@else
<div class="flex justify-center items-center pt-2 pb-2 px-1 mb-3 rounded border border-solid border-orange-600 w-full text-lg">
<svg class="h-5 w-5 fill-orange-500 mr-1"><path xmlns="http://www.w3.org/2000/svg" d="M19.64 16.36L11.53 2.3A1.85 1.85 0 0 0 10 1.21 1.85 1.85 0 0 0 8.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"/></svg>
<p class="text-center">
To "Proceed to Checkout" you will have to update your <b>Billing and Shipping information</b>!
</p>
</div>
<button disabled class="btn-primary w-full py-3 text-lg">
Proceed to Checkout
</button>
@endif
</div>
</div>
<!--/ Product Items -->
</template>
<template x-if="!cartItems.length">
<div class="text-center py-8 text-gray-500">
You don't have any items in cart
</div>
</template>
</div>
</div>
</x-app-layout>