webmaster/crewsportswear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance cart layout and styling for improved user experience

Browse Source
This commit is contained in:
Frank John Begornia
2026-04-17 18:40:47 +08:00
parent ef35f84274
commit e479cf41e4
1 changed files with 266 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

322
resources/views/sublayouts/cart.blade.php
View File

@@ -2,15 +2,223 @@
@section('content') @section('content')
<style> <style>
body {
background: #f4f6f8;
}
.cart-breadcrumb .breadcrumb {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 10px;
margin-bottom: 14px;
}
.cart-title {
font-size: 24px;
font-weight: 700;
color: #111827;
margin: 0;
}
.cart-title-row hr {
border-color: #e5e7eb;
margin-top: 12px;
margin-bottom: 16px;
}
.cart-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 14px;
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
margin-bottom: 12px;
}
.cart-card h3,
.cart-card h4,
.cart-card h5 {
color: #111827;
}
.summary-line {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.summary-line .summary-label {
font-weight: 700;
color: #111827;
}
.summary-line .summary-value {
text-align: right;
color: #374151;
font-weight: 600;
white-space: nowrap;
}
.summary-total {
margin-top: 2px;
}
.summary-total .summary-label {
font-size: 20px;
}
.summary-total .summary-value {
font-size: 22px;
color: #111827;
}
.summary-total-currency {
font-size: 14px;
color: #6b7280;
font-weight: 600;
margin-left: 4px;
}
.order-summary {
position: sticky;
top: 18px;
}
.cart-summary-title {
margin: 0;
font-size: 20px;
font-weight: 700;
}
.cart-store-head img {
border-radius: 6px;
margin-right: 6px;
}
.cart-item-block + .cart-item-block {
margin-top: 10px;
}
.cart-items-shell {
padding: 0;
}
.cart-items-shell .cart-store-head {
padding: 14px;
border-bottom: 1px solid #e5e7eb;
background: #f8fafc;
border-radius: 12px 12px 0 0;
}
.cart-items-shell .cart-store-head h4 {
margin: 0;
}
.cart-items-shell .cart-item-block {
margin: 0;
border: 0;
border-bottom: 1px solid #e5e7eb;
border-radius: 0;
box-shadow: none;
}
.cart-items-shell .cart-item-block:last-child {
border-bottom: 0;
border-radius: 0 0 12px 12px;
}
.cart-item-title {
margin-top: 0;
margin-bottom: 8px;
font-size: 18px;
}
.cart-item-title a {
color: #1f2937;
text-decoration: none;
}
.cart-item-title a:hover {
color: #0f172a;
text-decoration: underline;
}
.cart-meta {
color: #6b7280;
font-size: 13px;
margin-bottom: 10px;
}
.cart-table-wrap .table {
margin-bottom: 0;
}
.cart-table-wrap .table > thead > tr > th {
border-bottom: 1px solid #e5e7eb;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.3px;
color: #64748b;
}
.cart-table-wrap .table > tbody > tr > td {
border-top: 1px solid #f1f5f9;
vertical-align: middle;
font-size: 13px;
}
.cart-remove-btn {
color: #ef4444;
}
.cart-remove-btn:hover {
color: #b91c1c;
}
.voucher-row .btn {
border-radius: 6px;
}
.checkout-btn {
background-color: #ffc300;
border-color: #e2ad00;
text-align: -webkit-center;
border-radius: 8px;
}
.checkout-btn:hover {
background-color: #ffcf33;
border-color: #d39b00;
}
.continue-btn {
border-radius: 8px;
}
.empty-cart {
color: #94a3b8;
text-align: center;
margin: 40px 0;
font-weight: 600;
}
.previewImage{ .previewImage{
height: 150px; height: 150px;
width: 95%; width: 95%;
overflow:hidden; overflow:hidden;
object-fit: contain; object-fit: contain;
} }
@media (max-width: 991px) {
.order-summary {
position: static;
}
}
</style> </style>
<div class="row"> <div class="row cart-breadcrumb">
<div class="col-md-12"> <div class="col-md-12">
<ol class="breadcrumb"> <ol class="breadcrumb">
@if(isset($store_array[0]->StoreUrl)) @if(isset($store_array[0]->StoreUrl))
@@ -23,9 +231,9 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row cart-title-row">
<div class="col-md-12"> <div class="col-md-12">
<h2 style="font-size: 20px; font-weight: bold;">MY CART</h2> <h2 class="cart-title">My Cart</h2>
@if(Session::has('cartkeyError')) @if(Session::has('cartkeyError'))
<div class="alert alert-danger alert-dismissible"> <div class="alert alert-danger alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
@@ -37,11 +245,11 @@
</div> </div>
</div> </div>
@if(count($row) > 0) @if(collect($row)->count() > 0)
<div class="row"> <div class="row">
<div class="col-md-4 col-md-push-8 order-summary" > <div class="col-md-4 col-md-push-8 order-summary" >
<div style="border: 1px solid #e2e2e2; padding: 10px; border-bottom: none;"> <div class="cart-card">
@if(Session::has('msg')) @if(Session::has('msg'))
<div class="alert alert-warning alert-dismissible"> <div class="alert alert-warning alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
@@ -49,46 +257,45 @@
{!! Session::get('msg') !!} {!! Session::get('msg') !!}
</div> </div>
@endif @endif
<h3>Order Summary</h3> <h3 class="cart-summary-title">Order Summary</h3>
</div>
@if (!Auth::guest())
<div style="border: 1px solid #e2e2e2; padding: 10px; border-bottom: none;">
@if (!Auth::guest())
<hr>
<p><strong>Ship to:</strong></p> <p><strong>Ship to:</strong></p>
@if ($address_book === null) @if ($address_book === null)
<a href="{{ url('user/address-book/create') }}">[ Add ]</a> <a href="{{ url('user/address-book/create') }}">[ Add ]</a>
@else @else
<div>{{ $address_book[0]->Fullname }}</div> <div>{{ $address_book[0]->Fullname }}</div>
<div>{{ $address_book[0]->ContactNumber }}</div> <div>{{ $address_book[0]->ContactNumber }}</div>
<div> <div>
{{ $address_book[0]->Address . ' ' . $address_book[0]->Address2 . ', ' . $address_book[0]->State . ', ' . $address_book[0]->City . ', ' . $address_book[0]->Country . ', ' . $address_book[0]->CountryCode . ' ' . $address_book[0]->ZipCode }} {{ $address_book[0]->Address . ' ' . $address_book[0]->Address2 . ', ' . $address_book[0]->State . ', ' . $address_book[0]->City . ', ' . $address_book[0]->Country . ', ' . $address_book[0]->CountryCode . ' ' . $address_book[0]->ZipCode }}
<a href="{{ url('user/address-book/edit/'.$address_book[0]->Id) }}">[ Edit ]</a> <a href="{{ url('user/address-book/edit/'.$address_book[0]->Id) }}">[ Edit ]</a>
</div> </div>
@endif
@endif @endif
</div> <hr>
@endif
<div style="border: 1px solid #e2e2e2; padding: 10px; border-bottom: none;">
{{-- <h3>Subtotal: <span id="my_subtotal">{{ round($getSubtotal, 2) }}</span> <small>{{ $store_array[0]->StoreCurrency }}</small></h3> --}} {{-- <h3>Subtotal: <span id="my_subtotal">{{ round($getSubtotal, 2) }}</span> <small>{{ $store_array[0]->StoreCurrency }}</small></h3> --}}
<h5><strong>Subtotal:</strong> <div class="summary-line">
<span>{{ number_format($tax['order_grandtotal'], 2) . ' ' . $store_array[0]->StoreCurrency }}</span> <span class="summary-label">Subtotal:</span>
</h5> <span class="summary-value">{{ number_format($tax['order_grandtotal'], 2) . ' ' . $store_array[0]->StoreCurrency }}</span>
<h5><strong>Shipping Fee:</strong> </div>
<span>{{ number_format($shipping_fee, 2) . ' ' . $store_array[0]->StoreCurrency }}</span> <div class="summary-line">
</h5> <span class="summary-label">Shipping Fee:</span>
<h5> <strong>Tax:</strong> <span class="summary-value">{{ number_format($shipping_fee, 2) . ' ' . $store_array[0]->StoreCurrency }}</span>
<span>{{ number_format($tax['tax'], 2) . ' ' . $store_array[0]->StoreCurrency }}</span> </div>
</h5> <div class="summary-line">
<span class="summary-label">Tax:</span>
<span class="summary-value">{{ number_format($tax['tax'], 2) . ' ' . $store_array[0]->StoreCurrency }}</span>
</div>
<hr> <hr>
<h3> <strong>Total:</strong> <span id="my_subtotal">{{ number_format($tax['order_grandtotal'] + $shipping_fee + $tax['tax'], 2) }}</span> <div class="summary-line summary-total">
<span>{{ $store_array[0]->StoreCurrency }}</span> <span class="summary-label">Total:</span>
</h3> <span class="summary-value"><span id="my_subtotal">{{ number_format($tax['order_grandtotal'] + $shipping_fee + $tax['tax'], 2) }}</span><span class="summary-total-currency">{{ $store_array[0]->StoreCurrency }}</span></span>
</div>
<hr> <hr>
<div class="form-group" id="voucher_list"> <div class="form-group voucher-row" id="voucher_list">
@foreach($row as $item) @foreach($row as $item)
@if($item->VoucherId != null) @if($item->VoucherId != null)
<div class="btn-group"> <div class="btn-group">
@@ -119,20 +326,20 @@
<span id="error_voucher" style="color: #dd4b39"></span> <span id="error_voucher" style="color: #dd4b39"></span>
</form> </form>
<div class="clearfix"></div> <div class="clearfix"></div>
</div>
<div style="border: 1px solid #e2e2e2; padding: 10px;"> <hr>
<a @if($getSubtotal <= 0 ) disabled @endif href="{{ url('getCheckout') }}" class="btn btn-primary btn-block" style="background-color: #ffc300; border-color: #e2ad00; text-align: -webkit-center;" ><img src="{{asset('/images/paypal1.png')}}" class="img img-responsive" style="height:30px;"></a><br> <a @if($getSubtotal <= 0 ) disabled @endif href="{{ url('getCheckout') }}" class="btn btn-primary btn-block checkout-btn" ><img src="{{asset('/images/paypal1.png')}}" class="img img-responsive" style="height:30px;"></a><br>
<a href="{{ url('teamstore') . '/' . $store_array[0]->StoreUrl }}" class="btn btn-default btn-block" type="submit">Continue Shopping</a> <a href="{{ url('teamstore') . '/' . $store_array[0]->StoreUrl }}" class="btn btn-default btn-block continue-btn" type="submit">Continue Shopping</a>
</div> </div>
</div> </div>
<div class="col-md-8 col-md-pull-4"> <div class="col-md-8 col-md-pull-4">
<div style="border: 1px solid #e2e2e2; padding: 10px;"> <div class="cart-card cart-items-shell">
<h4><img height="30px" class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store_array[0]->ImageFolder . '/' . $store_array[0]->StoreLogo) }}"> {{ $store_array[0]->StoreName }}</h4> <div class="cart-store-head">
</div> <h4><img height="30px" class="store-logo" src="{{ minio_url('uploads/images/teamstore/' . $store_array[0]->ImageFolder . '/' . $store_array[0]->StoreLogo) }}"> {{ $store_array[0]->StoreName }}</h4>
</div>
@foreach($item_group as $item) @foreach($item_group as $item)
@if($item->VoucherId == null) @if($item->VoucherId == null)
<div style="border: 1px solid #e2e2e2; padding: 10px; border-top: none;"> <div class="cart-card cart-item-block">
<div class="row"> <div class="row">
<div class="col-md-3"> <div class="col-md-3">
<div class="text-center"> <div class="text-center">
@@ -144,11 +351,11 @@
</div> </div>
</div> </div>
<div class="col-md-9"> <div class="col-md-9">
<h4> <h4 class="cart-item-title">
<a href="{{ url('teamstore') . '/' . $item->StoreURL . '/' . 'product/' . $item->ProductURL }}">{{ $item->ProductName }}</a> <a href="{{ url('teamstore') . '/' . $item->StoreURL . '/' . 'product/' . $item->ProductURL }}">{{ $item->ProductName }}</a>
</h4> </h4>
<p>Total Price: {{ $item->total_price . ' ' . $store_array[0]->StoreCurrency }} &bull; Row(s): {{ $item->qty }} </p> <p class="cart-meta">Total Price: {{ $item->total_price . ' ' . $store_array[0]->StoreCurrency }} &bull; Row(s): {{ $item->qty }} </p>
<div class="table-responsive"> <div class="table-responsive cart-table-wrap">
<table class="table table-striped table-condensed"> <table class="table table-striped table-condensed">
@if($item->FormUsed=="jersey-and-shorts-form") @if($item->FormUsed=="jersey-and-shorts-form")
@@ -252,20 +459,20 @@
<td>{{ $sub_item->ShortsSize }}</td> <td>{{ $sub_item->ShortsSize }}</td>
<td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td> <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
<td>{{ $sub_item->Quantity }}</td> <td>{{ $sub_item->Quantity }}</td>
<td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td> <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
</tr> </tr>
@elseif($item->FormUsed=="tshirt-form") @elseif($item->FormUsed=="tshirt-form")
<tr> <tr>
<td>{{ $sub_item->Size }}</td> <td>{{ $sub_item->Size }}</td>
<td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td> <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
<td>{{ $sub_item->Quantity }}</td> <td>{{ $sub_item->Quantity }}</td>
<td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td> <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
</tr> </tr>
@elseif($item->FormUsed=="quantity-form") @elseif($item->FormUsed=="quantity-form")
<tr> <tr>
<td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td> <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
<td>{{ $sub_item->Quantity }}</td> <td>{{ $sub_item->Quantity }}</td>
<td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td> <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
</tr> </tr>
@elseif($item->FormUsed=="name-number-form") @elseif($item->FormUsed=="name-number-form")
<tr> <tr>
@@ -273,7 +480,7 @@
<td>{{ $sub_item->Number }}</td> <td>{{ $sub_item->Number }}</td>
<td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td> <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
<td>{{ $sub_item->Quantity }}</td> <td>{{ $sub_item->Quantity }}</td>
<td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td> <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
</tr> </tr>
@elseif($item->FormUsed=="name-number-size-form") @elseif($item->FormUsed=="name-number-size-form")
<tr> <tr>
@@ -282,14 +489,14 @@
<td>{{ $sub_item->Size }}</td> <td>{{ $sub_item->Size }}</td>
<td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td> <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
<td>{{ $sub_item->Quantity }}</td> <td>{{ $sub_item->Quantity }}</td>
<td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td> <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
</tr> </tr>
@elseif($item->FormUsed=="number-form") @elseif($item->FormUsed=="number-form")
<tr> <tr>
<td>{{ $sub_item->Number }}</td> <td>{{ $sub_item->Number }}</td>
<td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td> <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
<td>{{ $sub_item->Quantity }}</td> <td>{{ $sub_item->Quantity }}</td>
<td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td> <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
</tr> </tr>
@elseif($item->FormUsed=="name-name2-size-form") @elseif($item->FormUsed=="name-name2-size-form")
<tr> <tr>
@@ -298,7 +505,7 @@
<td>{{ $sub_item->Size }}</td> <td>{{ $sub_item->Size }}</td>
<td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td> <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
<td>{{ $sub_item->Quantity }}</td> <td>{{ $sub_item->Quantity }}</td>
<td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td> <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
</tr> </tr>
@elseif($item->FormUsed=="name-size-form") @elseif($item->FormUsed=="name-size-form")
<tr> <tr>
@@ -306,7 +513,7 @@
<td>{{ $sub_item->Size }}</td> <td>{{ $sub_item->Size }}</td>
<td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td> <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
<td>{{ $sub_item->Quantity }}</td> <td>{{ $sub_item->Quantity }}</td>
<td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td> <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
</tr> </tr>
@elseif($item->FormUsed=="jersey-and-shorts-quantity-form") @elseif($item->FormUsed=="jersey-and-shorts-quantity-form")
<tr> <tr>
@@ -314,7 +521,7 @@
<td>{{ $sub_item->ShortsSize}}</td> <td>{{ $sub_item->ShortsSize}}</td>
<td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td> <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
<td>{{ $sub_item->Quantity }}</td> <td>{{ $sub_item->Quantity }}</td>
<td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td> <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
</tr> </tr>
@elseif($item->FormUsed=="number-jersey-shorts-form") @elseif($item->FormUsed=="number-jersey-shorts-form")
<tr> <tr>
@@ -323,7 +530,7 @@
<td>{{ $sub_item->ShortsSize }}</td> <td>{{ $sub_item->ShortsSize }}</td>
<td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td> <td>{{ $sub_item->Price . ' ' . $store_array[0]->StoreCurrency }}</td>
<td>{{ $sub_item->Quantity }}</td> <td>{{ $sub_item->Quantity }}</td>
<td><a class="btn btn-xs btn-link pull-right" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td> <td><a class="btn btn-xs btn-link pull-right cart-remove-btn" href="{{ url('removeitem') }}/{{ $sub_item->Id }}"><span class="glyphicon glyphicon-remove"></span></a></td>
</tr> </tr>
@else @else
@@ -338,13 +545,14 @@
</div> </div>
@endif @endif
@endforeach @endforeach
</div>
</div> </div>
</div> </div>
@else @else
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<h3 style="color:#d2d2d2;">Your cart is currently empty.</h3> <h3 class="empty-cart">Your cart is currently empty.</h3>
</div> </div>
</div> </div>