游客结账登录

This commit is contained in:
pushuo 2023-01-05 14:48:29 +08:00 committed by TL
parent 4cb3bfda91
commit 7d48a7e140
5 changed files with 296 additions and 285 deletions

View File

@ -8,6 +8,26 @@
* @LastEditTime 2022-09-16 20:47:16
*/
body.page-checkout, body.page-cart {
background-color: #f6f8fa;
.left-column {
@media (min-width: 992px) {
width: 70%;
}
}
.right-column {
@media (min-width: 992px) {
width: 30%;
}
@media (max-width: 768px) {
margin-top: 1.4rem;
}
}
}
body.page-cart {
.cart-products-wrap {
.table {
@ -18,11 +38,11 @@ body.page-cart {
border-color: #f0f2f4;
}
tr {
&.active {
background-color: #fff6f1;
}
}
// tr {
// &.active {
// background-color: #fff6f1;
// }
// }
}
thead {
@ -45,9 +65,6 @@ body.page-cart {
}
.total-wrap {
border: none;
background-color: #F8F9FA;
&.total-wrap-fixed {
position: fixed;
top: 0;

View File

@ -165,7 +165,6 @@ body[class^="page-account-"] {
}
.number-wrap {
background-color: #fff;
padding: 0 4px;
margin-bottom: .5rem;
}

View File

@ -9,6 +9,8 @@
*/
body.page-checkout {
background-color: #f6f8fa;
.radio-line-wrap {
.radio-line-item {
display: flex;
@ -95,18 +97,6 @@ body.page-checkout {
border: none;
}
}
// .add-addres {
// display: flex;
// align-items: center; // flex-start | center
// justify-content: center; // flex-end | center | space-between
// flex-direction: column;
// font-size: 1rem;
// color: #666;
// i {
// font-size: 2rem;
// }
// }
}
}
@ -115,33 +105,15 @@ body.page-checkout, body.page-bk-stripe {
margin-bottom: 2.6rem;
}
.right-column {
position: relative;
@media (min-width: 992px) {
padding-left: 2rem;
}
}
.checkout-title {
border-bottom: 1px solid #e5e5e5;
border-bottom: 1px solid #f1f1f1;
padding-bottom: 16px;
margin-bottom: 16px;
position: relative;
// padding-left: 10px;
display: flex;
align-items: center; // flex-start | center
justify-content: space-between; // flex-end | center | space-between
// &:before {
// content: '';
// position: absolute;
// top: 2px;
// left: 0;
// background-color: $primary;
// width: 3px;
// height: 16px;
// }
.btn {
margin-bottom: -10px;
&.icon {
@ -151,18 +123,21 @@ body.page-checkout, body.page-bk-stripe {
}
.total-wrap {
padding: 1.4rem;
border: 3px solid #efefef;
.card-body {
padding: 0;
@media (min-width: 768px) {
padding: 0;
}
}
.card-header {
background-color: #fff;
padding: 0 0 .8rem;
margin-bottom: 1rem;
border-bottom: 1px solid #E6E6E6;
@media (min-width: 768px) {
padding: 0 0 .8rem;
}
h5 {
font-weight: bold;
}
@ -222,7 +197,6 @@ body.page-checkout, body.page-bk-stripe {
align-items: center; // flex-start | center
justify-content: space-between; // flex-end | center | space-between
margin-bottom: 14px;
// flex-wrap: wrap;
&:last-of-type {
font-weight: bold;
@ -232,16 +206,10 @@ body.page-checkout, body.page-bk-stripe {
}
}
}
> span {
// font-weight: bold;
> span {
&:first-of-type {
font-size: .8rem;
// color: #3f3f3f;
}
&:last-of-type {
// color: #dc3545;
}
}
}

View File

@ -22,69 +22,77 @@
@endif
<div class="row mt-5" v-if="products.length">
<div class="col-12 col-md-9">
<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.index') }}</th>
<th width="170">{{ __('shop/carts.commodity') }}</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-between wh-80 ms-3"><img :src="product.image" 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 class="col-12 col-md-9 left-column">
<div class="card shadow-sm">
<div class="card-body p-lg-4">
<div class="p-lg-0"><h5 class="mb-3">{{ __('shop/carts.commodity') }}</h5></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.index') }}</th>
<th width="170">{{ __('shop/carts.commodity') }}</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-between wh-80 ms-3"><img :src="product.image" 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>
</div>
</div>
</div>
<div class="col-12 col-md-3">
<div class="card total-wrap fixed-top-line">
<div class="card-header"><h5 class="mb-0">{{ __('shop/carts.product_total') }}</h5></div>
<div class="card-body">
<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">
{{-- <a href="{{ shop_route('checkout.index', 'checkout') }}" class="btn btn-primary">去结账</a> --}}
<button type="button" class="btn btn-primary" @click="checkedBtnToCheckout">{{ __('shop/carts.to_checkout') }}</button>
</li>
</ul>
<div class="col-12 col-md-3 right-column">
<div class="card shadow-sm">
<div class="card-body p-lg-4">
<div class="card total-wrap fixed-top-line">
<div class="p-lg-0"><h5 class="mb-3">{{ __('shop/carts.product_total') }}</h5></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 fw-bold" @click="checkedBtnToCheckout">{{ __('shop/carts.to_checkout') }}</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

View File

@ -19,199 +19,214 @@
<div class="row mt-5">
<div class="col-12 col-md-8 left-column">
<div id="checkout-app" v-cloak>
<div class="checkout-black">
<div class="checkout-title">
<div class="d-flex">
<h5 class="mb-0 me-4">{{ __('shop/checkout.address') }}</h5>
<el-checkbox v-model="same_as_shipping_address">{{ __('shop/checkout.same_as_shipping_address') }}
</el-checkbox>
</div>
<button class="btn btn-sm icon" v-if="isAllAddress" @click="isAllAddress = false"><i
class="bi bi-x-lg"></i></button>
</div>
<div class="addresses-wrap">
<div class="row">
<template v-if="source.isLogin">
<div class="col-6" v-for="address, index in source.addresses" :key="index"
v-if="source.addresses.length &&( address.id == form.shipping_address_id || isAllAddress)">
<div :class="['item', address.id == form.shipping_address_id ? 'active' : '']"
@click="updateCheckout(address.id, 'shipping_address_id')">
<div class="name-wrap">
<span class="name">@{{ address.name }}</span>
<span class="phone">@{{ address.phone }}</span>
</div>
<div class="zipcode">@{{ address.zipcode }}</div>
<div class="address-info">@{{ address.country }} @{{ address.zone }} @{{ address.city }}
@{{ address.address_1 }}</div>
<div class="address-bottom">
<div>
<span class="badge bg-success"
v-if="form.shipping_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
<div class="card shadow-sm">
<div class="card-body p-lg-4">
<div id="checkout-app" v-cloak>
<div class="checkout-black">
<div class="checkout-title">
<div class="d-flex">
<h5 class="mb-0 me-4">{{ __('shop/checkout.address') }}</h5>
<el-checkbox v-model="same_as_shipping_address">{{ __('shop/checkout.same_as_shipping_address') }}
</el-checkbox>
</div>
<button class="btn btn-sm icon" v-if="isAllAddress" @click="isAllAddress = false"><i
class="bi bi-x-lg"></i></button>
</div>
<div class="addresses-wrap">
<div class="row">
<template v-if="source.isLogin">
<div class="col-6" v-for="address, index in source.addresses" :key="index"
v-if="source.addresses.length &&( address.id == form.shipping_address_id || isAllAddress)">
<div :class="['item', address.id == form.shipping_address_id ? 'active' : '']"
@click="updateCheckout(address.id, 'shipping_address_id')">
<div class="name-wrap">
<span class="name">@{{ address.name }}</span>
<span class="phone">@{{ address.phone }}</span>
</div>
<div class="zipcode">@{{ address.zipcode }}</div>
<div class="address-info">@{{ address.country }} @{{ address.zone }} @{{ address.city }}
@{{ address.address_1 }}</div>
<div class="address-bottom">
<div>
<span class="badge bg-success"
v-if="form.shipping_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
</div>
<a href="javascript:void(0)" class=""
@click.stop="editAddress(index, 'shipping_address_id')">{{ __('shop/checkout.edit') }}</a>
</div>
</div>
<a href="javascript:void(0)" class=""
@click.stop="editAddress(index, 'shipping_address_id')">{{ __('shop/checkout.edit') }}</a>
</div>
</div>
</div>
<div class="col-6" v-if="!isAllAddress">
<div class="item address-right">
<button class="btn btn-outline-dark w-100 mb-3" v-if="source.addresses.length > 1"
@click="isAllAddress = true">{{ __('shop/checkout.choose_another_address') }}</button>
<button class="btn btn-outline-dark w-100" @click="editAddress(null, 'shipping_address_id')"><i
class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
</div>
</div>
</template>
<template v-else>
<div class="col-6" v-if="source.guest_shipping_address">
<div class="item active">
<div class="name-wrap">
<span class="name">@{{ source.guest_shipping_address.name }}</span>
<span class="phone">@{{ source.guest_shipping_address.phone }}</span>
</div>
<div class="zipcode">
<span>@{{ source.guest_shipping_address.zipcode }}</span>
<span class="ms-1">@{{ source.guest_shipping_address.email }}</span>
</div>
<div class="address-info">@{{ source.guest_shipping_address.country }} @{{ source.guest_shipping_address.zone }} @{{ source.guest_shipping_address.city }}
@{{ source.guest_shipping_address.address_1 }}</div>
<div class="address-bottom">
<div>
<span class="badge bg-success">{{ __('shop/checkout.chosen') }}</span>
<div class="col-6" v-if="!isAllAddress">
<div class="item address-right">
<button class="btn btn-outline-dark w-100 mb-3" v-if="source.addresses.length > 1"
@click="isAllAddress = true">{{ __('shop/checkout.choose_another_address') }}</button>
<button class="btn btn-outline-dark w-100" @click="editAddress(null, 'shipping_address_id')"><i
class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
</div>
<a class="javascript:void(0)"
@click.stop="editAddress(null, 'guest_shipping_address')">{{ __('shop/checkout.edit') }}</a>
</div>
</div>
</template>
<template v-else>
<div class="col-6" v-if="source.guest_shipping_address">
<div class="item active">
<div class="name-wrap">
<span class="name">@{{ source.guest_shipping_address.name }}</span>
<span class="phone">@{{ source.guest_shipping_address.phone }}</span>
</div>
<div class="zipcode">
<span>@{{ source.guest_shipping_address.zipcode }}</span>
<span class="ms-1">@{{ source.guest_shipping_address.email }}</span>
</div>
<div class="address-info">@{{ source.guest_shipping_address.country }} @{{ source.guest_shipping_address.zone }} @{{ source.guest_shipping_address.city }}
@{{ source.guest_shipping_address.address_1 }}</div>
<div class="address-bottom">
<div>
<span class="badge bg-success">{{ __('shop/checkout.chosen') }}</span>
</div>
<a class="javascript:void(0)"
@click.stop="editAddress(null, 'guest_shipping_address')">{{ __('shop/checkout.edit') }}</a>
</div>
</div>
</div>
<div class="col-6" v-if="!source.guest_shipping_address">
<div class="item address-right">
<button class="btn btn-outline-dark w-100" @click="editAddress(null, 'guest_shipping_address')"><i
class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
</div>
</div>
</template>
</div>
<div class="col-6" v-if="!source.guest_shipping_address">
<div class="item address-right">
<button class="btn btn-outline-dark w-100" @click="editAddress(null, 'guest_shipping_address')"><i
class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
<div class="checkout-black" v-if='!same_as_shipping_address'>
<div class="checkout-title">
<div class="d-flex">
<h5 class="mb-0 me-4">{{ __('shop/checkout.payment_address') }}</h5>
</div>
<button class="btn btn-sm icon" v-if="isAllAddressPayment" @click="isAllAddressPayment = false"><i
class="bi bi-x-lg"></i></button>
</div>
<div class="addresses-wrap">
<div class="row">
<template v-if="source.isLogin">
<div class="col-6" v-for="address, index in source.addresses" :key="index"
v-if="source.addresses.length && (form.payment_address_id == '' || address.id == form.payment_address_id || isAllAddressPayment)">
<div :class="['item', address.id == form.payment_address_id ? 'active' : '']"
@click="updateCheckout(address.id, 'payment_address_id')">
<div class="name-wrap">
<span class="name">@{{ address.name }}</span>
<span class="phone">@{{ address.phone }}</span>
</div>
<div class="zipcode">@{{ address.zipcode }}</div>
<div class="address-info">@{{ address.country }} @{{ address.zone }} @{{ address.city }}
@{{ address.address_1 }}</div>
<div class="address-bottom">
<div>
<span class="badge bg-success"
v-if="form.payment_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
<div class="checkout-black" v-if='!same_as_shipping_address'>
<div class="checkout-title">
<div class="d-flex">
<h5 class="mb-0 me-4">{{ __('shop/checkout.payment_address') }}</h5>
</div>
<button class="btn btn-sm icon" v-if="isAllAddressPayment" @click="isAllAddressPayment = false"><i
class="bi bi-x-lg"></i></button>
</div>
<div class="addresses-wrap">
<div class="row">
<template v-if="source.isLogin">
<div class="col-6" v-for="address, index in source.addresses" :key="index"
v-if="source.addresses.length && (form.payment_address_id == '' || address.id == form.payment_address_id || isAllAddressPayment)">
<div :class="['item', address.id == form.payment_address_id ? 'active' : '']"
@click="updateCheckout(address.id, 'payment_address_id')">
<div class="name-wrap">
<span class="name">@{{ address.name }}</span>
<span class="phone">@{{ address.phone }}</span>
</div>
<div class="zipcode">@{{ address.zipcode }}</div>
<div class="address-info">@{{ address.country }} @{{ address.zone }} @{{ address.city }}
@{{ address.address_1 }}</div>
<div class="address-bottom">
<div>
<span class="badge bg-success"
v-if="form.payment_address_id == address.id">{{ __('shop/checkout.chosen') }}</span>
</div>
<a class="javascript:void(0)"
@click.stop="editAddress(index, 'payment_address_id')">{{ __('shop/checkout.edit') }}</a>
</div>
</div>
<a class="javascript:void(0)"
@click.stop="editAddress(index, 'payment_address_id')">{{ __('shop/checkout.edit') }}</a>
</div>
</div>
</div>
<div class="col-6" v-if="!isAllAddressPayment">
<div class="item address-right">
<button class="btn btn-outline-dark w-100 mb-3" v-if="source.addresses.length > 1"
@click="isAllAddressPayment = true">{{ __('shop/checkout.choose_another_address') }}</button>
<button class="btn btn-outline-dark w-100" @click="editAddress(null, 'payment_address_id')"><i
class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
</div>
</div>
</template>
<template v-else>
<div class="col-6" v-if="source.guest_payment_address">
<div class="item active">
<div class="name-wrap">
<span class="name">@{{ source.guest_payment_address.name }}</span>
<span class="phone">@{{ source.guest_payment_address.phone }}</span>
</div>
<div class="zipcode">@{{ source.guest_payment_address.zipcode }}</div>
<div class="address-info">@{{ source.guest_payment_address.country }} @{{ source.guest_payment_address.zone }} @{{ source.guest_payment_address.city }}
@{{ source.guest_payment_address.address_1 }}</div>
<div class="address-bottom">
<div>
<span class="badge bg-success">{{ __('shop/checkout.chosen') }}</span>
<div class="col-6" v-if="!isAllAddressPayment">
<div class="item address-right">
<button class="btn btn-outline-dark w-100 mb-3" v-if="source.addresses.length > 1"
@click="isAllAddressPayment = true">{{ __('shop/checkout.choose_another_address') }}</button>
<button class="btn btn-outline-dark w-100" @click="editAddress(null, 'payment_address_id')"><i
class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
</div>
<a class="javascript:void(0)"
@click.stop="editAddress(null, 'guest_payment_address')">{{ __('shop/checkout.edit') }}</a>
</div>
</div>
</template>
<template v-else>
<div class="col-6" v-if="source.guest_payment_address">
<div class="item active">
<div class="name-wrap">
<span class="name">@{{ source.guest_payment_address.name }}</span>
<span class="phone">@{{ source.guest_payment_address.phone }}</span>
</div>
<div class="zipcode">@{{ source.guest_payment_address.zipcode }}</div>
<div class="address-info">@{{ source.guest_payment_address.country }} @{{ source.guest_payment_address.zone }} @{{ source.guest_payment_address.city }}
@{{ source.guest_payment_address.address_1 }}</div>
<div class="address-bottom">
<div>
<span class="badge bg-success">{{ __('shop/checkout.chosen') }}</span>
</div>
<a class="javascript:void(0)"
@click.stop="editAddress(null, 'guest_payment_address')">{{ __('shop/checkout.edit') }}</a>
</div>
</div>
</div>
<div class="col-6" v-if="!source.guest_payment_address">
<div class="item address-right">
<button class="btn btn-outline-dark w-100" @click="editAddress(null, 'guest_payment_address')"><i
class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
</div>
</div>
</template>
</div>
<div class="col-6" v-if="!source.guest_payment_address">
<div class="item address-right">
<button class="btn btn-outline-dark w-100" @click="editAddress(null, 'guest_payment_address')"><i
class="bi bi-plus-square-dotted"></i> {{ __('shop/checkout.add_new_address') }}</button>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
<div class="checkout-black">
<h5 class="checkout-title">{{ __('shop/checkout.payment_method') }}</h5>
<div class="radio-line-wrap">
@foreach ($payment_methods as $payment)
<div class="radio-line-item {{ $payment['code'] == $current['payment_method_code'] ? 'active' : '' }}" data-key="payment_method_code" data-value="{{ $payment['code'] }}">
<div class="left">
<span class="radio"></span>
{{-- <input name="payment" type="radio" {{ $payment['code'] == $current['payment_method_code'] ? 'checked' : '' }} value="{{ $payment['code'] }}" class="form-check-input"> --}}
<img src="{{ $payment['icon'] }}" class="img-fluid">
</div>
<div class="right ms-3">
<div class="title">{{ $payment['name'] }}</div>
<div class="sub-title">{!! $payment['description'] !!}</div>
</div>
<div class="checkout-black">
<h5 class="checkout-title">{{ __('shop/checkout.payment_method') }}</h5>
<div class="radio-line-wrap">
@foreach ($payment_methods as $payment)
<div class="radio-line-item {{ $payment['code'] == $current['payment_method_code'] ? 'active' : '' }}" data-key="payment_method_code" data-value="{{ $payment['code'] }}">
<div class="left">
<span class="radio"></span>
{{-- <input name="payment" type="radio" {{ $payment['code'] == $current['payment_method_code'] ? 'checked' : '' }} value="{{ $payment['code'] }}" class="form-check-input"> --}}
<img src="{{ $payment['icon'] }}" class="img-fluid">
</div>
<div class="right ms-3">
<div class="title">{{ $payment['name'] }}</div>
<div class="sub-title">{!! $payment['description'] !!}</div>
</div>
</div>
@endforeach
</div>
@endforeach
</div>
</div>
</div>
<div class="checkout-black">
<h5 class="checkout-title">{{ __('shop/checkout.delivery_method') }}</h5>
<div class="radio-line-wrap">
@foreach ($shipping_methods as $methods)
@foreach ($methods['quotes'] as $shipping)
<div class="radio-line-item {{ $shipping['code'] == $current['shipping_method_code'] ? 'active':'' }}" data-key="shipping_method_code" data-value="{{ $shipping['code'] }}">
<div class="left">
{{-- <input name="shipping" {{ $shipping['code'] == $current['shipping_method_code'] ? 'checked' : '' }} type="radio" value="{{ $shipping['code'] }}" class="form-check-input"> --}}
<span class="radio"></span>
<img src="{{ $shipping['icon'] }}" class="img-fluid">
</div>
<div class="right ms-3">
<div class="title">{{ $shipping['name'] }}</div>
<div class="sub-title">{!! $shipping['description'] !!}</div>
<div class="mt-2">{!! $shipping['html'] ?? '' !!}</div>
</div>
<div class="checkout-black">
<h5 class="checkout-title">{{ __('shop/checkout.delivery_method') }}</h5>
<div class="radio-line-wrap">
@foreach ($shipping_methods as $methods)
@foreach ($methods['quotes'] as $shipping)
<div class="radio-line-item {{ $shipping['code'] == $current['shipping_method_code'] ? 'active':'' }}" data-key="shipping_method_code" data-value="{{ $shipping['code'] }}">
<div class="left">
{{-- <input name="shipping" {{ $shipping['code'] == $current['shipping_method_code'] ? 'checked' : '' }} type="radio" value="{{ $shipping['code'] }}" class="form-check-input"> --}}
<span class="radio"></span>
<img src="{{ $shipping['icon'] }}" class="img-fluid">
</div>
<div class="right ms-3">
<div class="title">{{ $shipping['name'] }}</div>
<div class="sub-title">{!! $shipping['description'] !!}</div>
<div class="mt-2">{!! $shipping['html'] ?? '' !!}</div>
</div>
</div>
@endforeach
@endforeach
</div>
@endforeach
@endforeach
</div>
</div>
</div>
</div>
<div class="col-12 col-md-4 right-column">
<div class="card total-wrap fixed-top-line">
@if (!current_customer())
<div class="card total-wrap mb-4 fixed-top-line p-lg-4 shadow-sm">
<div class="card-header">
<h5 class="mb-0">{{ __('shop/login.login_and_sign') }}</h5>
</div>
<div class="card-body">
<button class="btn btn-outline-dark guest-checkout-login"><i class="bi bi-box-arrow-in-right me-2"></i>{{ __('shop/login.login_and_sign') }}</button>
</div>
</div>
@endif
<div class="card total-wrap fixed-top-line p-lg-4 shadow-sm">
<div class="card-header d-flex align-items-center justify-content-between">
<h5 class="mb-0">{{ __('shop/checkout.cart_totals') }}</h5>
<span class="rounded-circle bg-primary">{{ $carts['quantity'] }}</span>
@ -242,7 +257,7 @@
@endforeach
</ul>
<div class="d-grid gap-2 mt-3">
<button class="btn btn-primary" type="button" id="submit-checkout">{{ __('shop/checkout.submit_order') }}</button>
<button class="btn btn-primary fw-bold" type="button" id="submit-checkout">{{ __('shop/checkout.submit_order') }}</button>
</div>
</div>
</div>
@ -269,6 +284,10 @@
$('#submit-checkout').click(function(event) {
app.checkedBtnCheckoutConfirm();
});
$('.guest-checkout-login').click(function(event) {
bk.openLogin();
});
});
var app = new Vue({