195 lines
7.7 KiB
PHP
195 lines
7.7 KiB
PHP
@extends('layout.master')
|
|
|
|
@section('body-class', 'page-cart')
|
|
|
|
@push('header')
|
|
<script src="{{ asset('vendor/vue/2.7/vue' . (!config('app.debug') ? '.min' : '') . '.js') }}"></script>
|
|
<script src="{{ asset('vendor/element-ui/index.js') }}"></script>
|
|
<script src="{{ asset('vendor/scrolltofixed/jquery-scrolltofixed-min.js') }}"></script>
|
|
<link rel="stylesheet" href="{{ asset('vendor/element-ui/index.css') }}">
|
|
@endpush
|
|
|
|
@section('content')
|
|
<x-shop-breadcrumb type="static" value="carts.index" />
|
|
|
|
<div class="container" id="app-cart" v-cloak>
|
|
<div class="row mt-1 justify-content-center mb-2">
|
|
<div class="col-12 col-md-9">@include('shared.steps', ['steps' => 1])</div>
|
|
</div>
|
|
|
|
@if ($errors->has('error'))
|
|
<x-shop-alert type="danger" msg="{{ $errors->first('error') }}" class="mt-4" />
|
|
@endif
|
|
|
|
<div class="row mt-5" v-if="products.length">
|
|
<div class="col-12 col-md-9 left-column">
|
|
<div class="card shadow-sm h-min-600">
|
|
<div class="card-body p-lg-4">
|
|
<div class="p-lg-0"><h4 class="mb-3">{{ __('shop/carts.commodity') }}</h4></div>
|
|
<div class="cart-products-wrap table-responsive">
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th width="130">
|
|
<input class="form-check-input" type="checkbox" value="" id="check-all" v-model="allSelected">
|
|
<label class="form-check-label ms-1" for="check-all">
|
|
{{ __('shop/carts.select_all') }}
|
|
</label>
|
|
</th>
|
|
<th width="40%">{{ __('shop/carts.commodity') }}</th>
|
|
<th width="170">{{ __('shop/carts.quantity') }}</th>
|
|
<th width="170">{{ __('shop/carts.subtotal') }}</th>
|
|
<th width="100" class="text-end">{{ __('common.action') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="product, index in products" :key="index" :class="product.selected ? 'active' : ''">
|
|
<td>
|
|
<div class="d-flex align-items-center p-image">
|
|
<input class="form-check-input" type="checkbox" @change="checkedCartTr(index)" v-model="product.selected">
|
|
<div class="border d-flex align-items-center justify-content-center wh-80 ms-3"><img :src="product.image_url" class="img-fluid"></div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="name text-truncate-2 mb-1 fw-bold" v-text="product.name"></div>
|
|
<div class="text-size-min text-muted mb-1">@{{ product.variant_labels }}</div>
|
|
<div class="price text-muted">@{{ product.price_format }}</div>
|
|
</td>
|
|
<td>
|
|
<div class="quantity-wrap">
|
|
<input type="text" class="form-control" @input="quantityChange(product.quantity, product.cart_id, product.sku_id)" onkeyup="this.value=this.value.replace(/\D/g,'')" v-model.number="product.quantity" name="quantity" minimum="1">
|
|
<div class="right">
|
|
<i class="bi bi-chevron-up"></i>
|
|
<i class="bi bi-chevron-down"></i>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>@{{ product.subtotal_format }}</td>
|
|
<td class="text-end">
|
|
<button type="button" class="btn text-danger btn-sm px-0" @click.stop="checkedBtnDelete(product.cart_id)">
|
|
<i class="bi bi-x-lg"></i> {{ __('common.delete') }}
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@hook('carts.products.after')
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-3 right-column">
|
|
<div class="card shadow-sm x-fixed-top">
|
|
<div class="card-body p-lg-4">
|
|
<div class="card total-wrap">
|
|
<div class="p-lg-0"><h4 class="mb-3">{{ __('shop/carts.product_total') }}</h4></div>
|
|
<div class="card-body p-lg-0">
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item"><span>{{ __('shop/carts.all') }}</span><span>@{{ allProduct }}</span></li>
|
|
<li class="list-group-item"><span>{{ __('shop/carts.selected') }}</span><span>@{{ total_quantity }}</span></li>
|
|
<li class="list-group-item border-bottom-0"><span>{{ __('shop/carts.product_total') }}</span><span class="total-price">@{{ amount_format }}</span></li>
|
|
<li class="list-group-item d-grid gap-2 mt-3 border-bottom-0">
|
|
<button type="button" class="btn btn-primary fs-5 fw-bold" @click="checkedBtnToCheckout">{{ __('shop/carts.to_checkout') }}</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="d-flex justify-content-center align-items-center flex-column">
|
|
<div class="empty-cart-wrap text-center mt-5">
|
|
<div class="empty-cart-icon mb-3">
|
|
<i class="bi bi-cart fs-1"></i>
|
|
</div>
|
|
<div class="empty-cart-text mb-3">
|
|
<h5>{{ __('shop/carts.cart_empty') }}</h5>
|
|
<p class="text-muted">{{ __('shop/carts.go_buy') }}</p>
|
|
</div>
|
|
<div class="empty-cart-action">
|
|
<a href="{{ shop_route('home.index') }}" class="btn btn-primary">{{ __('shop/carts.go_shopping') }}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@hook('carts.footer')
|
|
@endsection
|
|
|
|
@push('add-scripts')
|
|
<script>
|
|
var app = new Vue({
|
|
el: "#app-cart",
|
|
data: {
|
|
products: @json($data['carts']),
|
|
total_quantity: @json($data['quantity']),
|
|
amount: @json($data['amount']),
|
|
amount_format: @json($data['amount_format']),
|
|
},
|
|
|
|
computed: {
|
|
allSelected: {
|
|
get() {
|
|
return !this.products.length ? false : this.products.every(s => s.selected)
|
|
},
|
|
set(val) {
|
|
this.products.map(e => e.selected = val)
|
|
this.selectedBtnSelected()
|
|
}
|
|
},
|
|
|
|
allProduct() {
|
|
return this.products.map(e => e.quantity).reduce((n,m) => n + m);
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
checkedBtnToCheckout() {
|
|
if (!this.products.some(e => e.selected)) {
|
|
layer.msg('{{ __('shop/carts.empty_selected_products') }}', ()=>{})
|
|
return
|
|
}
|
|
|
|
location = '{{ shop_route("checkout.index") }}'
|
|
},
|
|
|
|
quantityChange(quantity, cart_id, sku_id) {
|
|
const self = this;
|
|
$http.put(`/carts/${cart_id}`, {quantity: quantity, sku_id}, {hload: true}).then((res) => {
|
|
this.setUpdateData(res);
|
|
})
|
|
},
|
|
|
|
checkedBtnDelete(cart_id) {
|
|
const self = this;
|
|
|
|
$http.delete(`/carts/${cart_id}`).then((res) => {
|
|
this.setUpdateData(res);
|
|
})
|
|
},
|
|
|
|
checkedCartTr(index) {
|
|
this.selectedBtnSelected();
|
|
},
|
|
|
|
selectedBtnSelected() {
|
|
const self = this;
|
|
const cart_ids = this.products.filter(e => e.selected).map(x => x.cart_id)
|
|
|
|
$http.post(`/carts/select`, {cart_ids: cart_ids}, {hload: true}).then((res) => {
|
|
this.setUpdateData(res);
|
|
})
|
|
},
|
|
|
|
setUpdateData(res) {
|
|
this.products = res.data.carts
|
|
this.amount_format = res.data.amount_format
|
|
this.total_quantity = res.data.quantity
|
|
bk.getCarts()
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
@endpush
|