Skip to content

T
test-webshop
Commit 1cc9a314 authored by Artem's avatar Artem
Browse files
Options

add bootstrap modal for clear cart button

parent b5669a51
Hide whitespace changes
Inline Side-by-side
Showing with 37 additions and 28 deletions
public/css/profile/orders.css
View file @ 1cc9a314
......@@ -20,3 +20,6 @@
text-align: right;
}
.order-item:hover {
background-color: lightgoldenrodyellow;
}
public/js/cart.js
View file @ 1cc9a314
......@@ -40,15 +40,5 @@ function setRemoveItemEventListener() {
});
}
function setClearCartEventListener() {
document.querySelector('.js-clear-cart-btn').addEventListener('click', function (e) {
const isSure = confirm('Are you sure you want to delete all items from cart?');
if (!isSure) {
e.preventDefault();
}
})
}
setUpdateCartQtyEventListener();
setRemoveItemEventListener();
setClearCartEventListener();
resources/views/cart.blade.php
View file @ 1cc9a314
......@@ -5,11 +5,31 @@
<div class="container">
@if(Session::has('cart'))
<div class="modal fade" id="staticBackdrop" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal fade" id="clearCartModal" tabindex="-1" role="dialog" aria-labelledby="clearCartModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document" style="margin-top: 150px;">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Are you sure you want to place the order?</h5>
<h5 class="modal-title" id="clearCartModalLabel">Are you sure you want to delete all items from cart?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body d-flex justify-content-between">
<form action="{{ route('cart.clearCart') }}" method="POST">
@csrf
<button class="btn btn-danger">Clear cart</button>
</form>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="placeOrderModal" tabindex="-1" role="dialog" aria-labelledby="placeOrderModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document" style="margin-top: 150px;">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="placeOrderModalLabel">Are you sure you want to place the order?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
......@@ -33,10 +53,10 @@
<th style="width:10%">Quantity</th>
<th style="width:15%" class="text-center">Subtotal</th>
<th style="width:15%" class="text-right">
<form action="{{ route('cart.clearCart') }}" method="POST">
@csrf
<button class="js-clear-cart-btn btn btn-danger btn-sm ml-auto">Clear cart</button>
</form>
<button class="btn btn-danger btn-sm ml-auto"
data-toggle="modal"
data-target="#clearCartModal"
>Clear cart</button>
</th>
</tr>
</thead>
......@@ -80,13 +100,9 @@
data-action="{{ route('cart.updateQtyInCart') }}"
>Update quantity</button>
</td>
<td class="hidden-xs text-center"><strong>Total € {{ $cart->total_price }}</strong></td>
<td class="hidden-xs text-center"><b>Total € {{ $cart->total_price }}</b></td>
<td>
{{-- <form action="{{ route('order.sendOrder') }}" method="POST">--}}
{{-- @csrf--}}
{{-- <button class="btn btn-success btn-block">Send order</button>--}}
{{-- </form>--}}
<button class="btn btn-success btn-block" data-toggle="modal" data-target="#staticBackdrop">
<button class="btn btn-success btn-block" data-toggle="modal" data-target="#placeOrderModal">
Send order
</button>
</td>
......
resources/views/profile/orders.blade.php
View file @ 1cc9a314
......@@ -14,14 +14,14 @@
data-toggle="collapse"
data-target="#{{ 'order_' . $order->id }}"
>
<div class="mr-5">Order# {{ $order->id }}</div>
<div style="width: 150px;">Order# {{ $order->id }}</div>
<div>{{ $order->created_at->format('jS F Y G:i') }}</div>
<div class="ml-auto">{{ $order->total_qty }} {{ ($order->total_qty === 1) ? 'item' : 'items' }}, total price {{ $order->total_price }} EUR</div>
</div>
<div class="collapse" id="{{ 'order_' . $order->id }}">
@foreach($order->products as $product)
<ul class="list-group list-group-flush">
<li class="list-group-item">
<ul class="list-group list-group-flush">
@foreach($order->products as $product)
<li class="list-group-item order-item">
<a href="{{ $product->product->path() }}">{{ $product->ordered_reference }}</a>
<div class="d-flex">
<div>{{ $product->ordered_price }} EUR</div>
......@@ -29,8 +29,8 @@
<div class="subtotal-price">{{ $product->subtotal_price }} EUR</div>
</div>
</li>
</ul>
@endforeach
@endforeach
</ul>
</div>
</div>
@endforeach
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment