¨4.0.1¨
This commit is contained in:
¨NW¨
@@ -1,29 +1,21 @@
|
||||
<div class="coupon-wrap">
|
||||
<div class="form-group">
|
||||
<div class="form-input">
|
||||
<input
|
||||
type="text"
|
||||
v-model="couponCode"
|
||||
placeholder="{{ trans('storefront::cart.enter_coupon_code') }}"
|
||||
class="form-control"
|
||||
@input="couponError = null"
|
||||
>
|
||||
|
||||
<span
|
||||
class="error-message"
|
||||
v-if="couponError"
|
||||
v-text="couponError"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<input
|
||||
type="text"
|
||||
v-model="couponCode"
|
||||
placeholder="{{ trans('storefront::cart.enter_coupon_code') }}"
|
||||
class="form-control"
|
||||
@keyup.enter="applyCoupon"
|
||||
@input="couponError = null"
|
||||
>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary btn-apply-coupon"
|
||||
class="btn btn-default btn-apply-coupon"
|
||||
:class="{ 'btn-loading': applyingCoupon }"
|
||||
@click.prevent="applyCoupon"
|
||||
>
|
||||
{{ trans('storefront::cart.apply_coupon') }}
|
||||
{{ trans('storefront::cart.apply') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,33 +1,40 @@
|
||||
<div class="billing-details">
|
||||
<h4 class="section-title">{{ trans('storefront::checkout.billing_details') }}</h4>
|
||||
|
||||
<div class="select-address" v-if="hasAddress" v-cloak>
|
||||
<div class="form-group">
|
||||
<div class="form-radio" v-for="address in addresses">
|
||||
<input type="radio" v-model="form.billingAddressId" :value="address.id"
|
||||
:id="'billing-address-' + address.id">
|
||||
|
||||
<label :for="'billing-address-' + address.id">
|
||||
<span v-text="address.full_name"></span>
|
||||
<span v-text="address.address_1"></span>
|
||||
<span v-if="address.address_2" v-text="address.address_2"></span>
|
||||
<span>@{{ address.city }}, @{{ address.state_name }} @{{ address.zip }}</span>
|
||||
<span v-text="address.country_name"></span>
|
||||
</label>
|
||||
<div class="address-card-wrap" v-if="hasAddress" v-cloak>
|
||||
<div class="row">
|
||||
<div class="col d-flex" v-for="address in addresses" :key="address.id">
|
||||
<address
|
||||
class="address-card"
|
||||
:class="{ active: form.billingAddressId === address.id }"
|
||||
@click="changeBillingAddress(address)"
|
||||
>
|
||||
<span class="badge" v-if="defaultAddress.address_id === address.id">
|
||||
{{ trans('storefront::checkout.default') }}
|
||||
</span>
|
||||
|
||||
<div class="address-card-data">
|
||||
<span v-text="address.full_name"></span>
|
||||
<span v-text="address.address_1"></span>
|
||||
<span v-if="address.address_2" v-text="address.address_2"></span>
|
||||
<span>@{{ address.city }}, @{{ address.state_name }} @{{ address.zip }}</span>
|
||||
<span v-text="address.country_name"></span>
|
||||
</div>
|
||||
</address>
|
||||
</div>
|
||||
|
||||
<span class="error-message" v-if="! form.newBillingAddress && errors.has('billing.address_1')">
|
||||
{{ trans('storefront::checkout.you_must_select_an_address') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="error-message" v-if="!form.newBillingAddress && errors.has('billing.address_1')">
|
||||
{{ trans('storefront::checkout.you_must_select_an_address') }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="add-new-address-wrap" v-cloak>
|
||||
<button v-if="hasAddress" type="button" class="btn btn-add-new-address" @click="addNewBillingAddress">
|
||||
{{ trans('storefront::checkout.add_new_address') }}
|
||||
@{{ form.newBillingAddress ? '-' : '+'}} {{ trans('storefront::checkout.add_new_address') }}
|
||||
</button>
|
||||
|
||||
<div class="add-new-address-form" v-show="! hasAddress || form.newBillingAddress">
|
||||
<div class="add-new-address-form" v-show="!hasAddress || form.newBillingAddress">
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<div class="form-group">
|
||||
@@ -136,7 +143,7 @@
|
||||
</label>
|
||||
|
||||
<input type="text" name="billing[state]" id="billing-state" class="form-control"
|
||||
v-if="! hasBillingStates" v-model="form.billing.state">
|
||||
v-if="!hasBillingStates" v-model="form.billing.state">
|
||||
|
||||
<select name="billing[state]" id="billing-state" class="form-control arrow-black"
|
||||
@change="changeBillingState($event.target.value)" v-else>
|
||||
|
||||
@@ -15,35 +15,41 @@
|
||||
<div class="ship-to-different-address-form" v-show="form.ship_to_a_different_address" v-cloak>
|
||||
<h4 class="section-title">{{ trans('storefront::checkout.shipping_details') }}</h4>
|
||||
|
||||
<div class="select-address" v-if="hasAddress">
|
||||
<div class="form-group">
|
||||
<div class="form-radio" v-for="address in addresses">
|
||||
<input type="radio" v-model="form.shippingAddressId" :value="address.id"
|
||||
:id="'shipping-address-' + address.id">
|
||||
|
||||
<label :for="'shipping-address-' + address.id">
|
||||
<span v-text="address.full_name"></span>
|
||||
<span v-text="address.address_1"></span>
|
||||
<span v-if="address.address_2" v-text="address.address_2"></span>
|
||||
<span>@{{ address.city }}, @{{ address.state_name }} @{{ address.zip }}</span>
|
||||
<span v-text="address.country_name"></span>
|
||||
</label>
|
||||
<div class="address-card-wrap" v-if="hasAddress">
|
||||
<div class="row">
|
||||
<div class="col d-flex" v-for="address in addresses" :key="address.id">
|
||||
<address
|
||||
class="address-card"
|
||||
:class="{ active: form.shippingAddressId === address.id }"
|
||||
@click="changeShippingAddress(address)"
|
||||
>
|
||||
<span class="badge" v-if="defaultAddress.address_id === address.id">
|
||||
{{ trans('storefront::checkout.default') }}
|
||||
</span>
|
||||
|
||||
<div class="address-card-data">
|
||||
<span v-text="address.full_name"></span>
|
||||
<span v-text="address.address_1"></span>
|
||||
<span v-if="address.address_2" v-text="address.address_2"></span>
|
||||
<span>@{{ address.city }}, @{{ address.state_name }} @{{ address.zip }}</span>
|
||||
<span v-text="address.country_name"></span>
|
||||
</div>
|
||||
</address>
|
||||
</div>
|
||||
|
||||
<span class="error-message"
|
||||
v-if="! form.newShippingAddress && errors.has('shipping.address_1')">
|
||||
{{ trans('storefront::checkout.you_must_select_an_address') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="add-new-address-wrap">
|
||||
<button v-if="hasAddress" type="button" class="btn btn-add-new-address"
|
||||
@click="addNewShippingAddress">
|
||||
{{ trans('storefront::checkout.add_new_address') }}
|
||||
<button
|
||||
v-if="hasAddress"
|
||||
type="button"
|
||||
class="btn btn-add-new-address"
|
||||
@click="addNewShippingAddress"
|
||||
>
|
||||
@{{ form.newShippingAddress ? '-' : '+'}} {{ trans('storefront::checkout.add_new_address') }}
|
||||
</button>
|
||||
|
||||
<div class="add-new-address-form" v-show="! hasAddress || form.newShippingAddress">
|
||||
<div class="add-new-address-form" v-show="!hasAddress || form.newShippingAddress">
|
||||
<div class="row">
|
||||
<div class="col-md-9">
|
||||
<div class="form-group">
|
||||
@@ -159,7 +165,7 @@
|
||||
</label>
|
||||
|
||||
<input type="text" name="shipping[state]" id="shipping-state"
|
||||
class="form-control" v-if="! hasShippingStates"
|
||||
class="form-control" v-if="!hasShippingStates"
|
||||
v-model="form.shipping.state">
|
||||
|
||||
<select name="shipping[state]" id="shipping-state"
|
||||
|
||||
@@ -3,16 +3,97 @@
|
||||
<div class="order-summary-top">
|
||||
<h3 class="section-title">{{ trans('storefront::cart.order_summary') }}</h3>
|
||||
|
||||
<ul class="list-inline cart-item">
|
||||
<li v-for="cartItem in cart.items">
|
||||
<label>
|
||||
<a :href="productUrl(cartItem.product)" class="product-name" v-text="cartItem.product.name"></a>
|
||||
<span class="product-quantity" v-text="'x' + cartItem.qty"></span>
|
||||
</label>
|
||||
<ul class="cart-items list-inline">
|
||||
<li class="cart-item" v-for="cartItem in cart.items" :key="cartItem.id">
|
||||
<a :href="productUrl(cartItem)" class="product-image">
|
||||
<img
|
||||
:src="baseImage(cartItem)"
|
||||
:class="{
|
||||
'image-placeholder': !hasBaseImage(cartItem),
|
||||
}"
|
||||
:alt="cartItem.product.name"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<span class="price-amount" v-html="cartItem.unitPrice.inCurrentCurrency.formatted"></span>
|
||||
<div class="product-info">
|
||||
<a
|
||||
:href="productUrl(cartItem)"
|
||||
class="product-name"
|
||||
:title="cartItem.product.name"
|
||||
v-text="cartItem.product.name"
|
||||
>
|
||||
</a>
|
||||
|
||||
<ul
|
||||
v-if="Object.entries(cartItem.variations).length !== 0"
|
||||
class="list-inline product-options"
|
||||
>
|
||||
<li
|
||||
v-for="(variation, key, index) in cartItem.variations"
|
||||
:key="index"
|
||||
>
|
||||
<label>@{{ variation.name }}:</label>
|
||||
@{{ variation.values[0].label }}@{{ index === Object.values(cartItem.variations).length - 1 ? "" : "," }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul
|
||||
v-if="Object.entries(cartItem.options).length !== 0"
|
||||
class="list-inline product-options"
|
||||
>
|
||||
<li v-for="option in cartItem.options" :key="option.id">
|
||||
<label>@{{ option.name }}:</label> @{{ optionValues(option) }}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="d-flex align-items-center justify-content-between mt-1">
|
||||
<div class="number-picker">
|
||||
<div class="input-group-quantity">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-number btn-minus"
|
||||
:disabled="cartItem.qty <= 1"
|
||||
@click="updateQuantity(cartItem, cartItem.qty - 1)"
|
||||
>
|
||||
-
|
||||
</button>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
:value="cartItem.qty"
|
||||
min="1"
|
||||
:max="maxQuantity(cartItem)"
|
||||
class="form-control input-number input-quantity"
|
||||
@focus="$event.target.select()"
|
||||
@input="changeQuantity(cartItem, Number($event.target.value))"
|
||||
@keydown.up="updateQuantity(cartItem, cartItem.qty + 1)"
|
||||
@keydown.down="updateQuantity(cartItem, cartItem.qty - 1)"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-number btn-plus"
|
||||
:disabled="isQtyIncreaseDisabled(cartItem)"
|
||||
@click="updateQuantity(cartItem, cartItem.qty + 1)"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-price">x @{{ cartItem.unitPrice.inCurrentCurrency.formatted }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="remove-cart-item">
|
||||
<button type="button" class="btn-remove" @click="removeCartItem(cartItem)">
|
||||
<i class="las la-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@include('public.checkout.create.coupon')
|
||||
</div>
|
||||
|
||||
<div class="order-summary-middle" :class="{ loading: loadingOrderSummary }">
|
||||
@@ -20,54 +101,50 @@
|
||||
<li>
|
||||
<label>{{ trans('storefront::cart.subtotal') }}</label>
|
||||
|
||||
<span class="price-amount" v-html="cart.subTotal.inCurrentCurrency.formatted">
|
||||
<span v-html="cart.subTotal.inCurrentCurrency.formatted">
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li v-for="tax in cart.taxes">
|
||||
<label v-text="tax.name"></label>
|
||||
|
||||
<span class="price-amount" v-html="tax.amount.inCurrentCurrency.formatted">
|
||||
<span v-html="tax.amount.inCurrentCurrency.formatted">
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li v-if="hasCoupon" v-cloak>
|
||||
<li v-if="hasCoupon">
|
||||
<label>
|
||||
{{ trans('storefront::cart.coupon') }}
|
||||
|
||||
<span class="coupon-code">
|
||||
[@{{ cart.coupon.code }}]
|
||||
(@{{ cart.coupon.code }})
|
||||
<span class="btn-remove-coupon" @click="removeCoupon">
|
||||
<i class="las la-times"></i>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<span class="price-amount" v-html="'-' + cart.coupon.value.inCurrentCurrency.formatted">
|
||||
<span class="color-primary" v-html="'-' + cart.coupon.value.inCurrentCurrency.formatted">
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<li v-if="hasShippingMethod">
|
||||
<label>
|
||||
{{ trans('storefront::cart.shipping_cost') }}
|
||||
</label>
|
||||
|
||||
<span
|
||||
:class="{ 'color-primary': hasFreeShipping }"
|
||||
v-text="hasFreeShipping ? '{{ trans('storefront::cart.free') }}' : cart.shippingCost.inCurrentCurrency.formatted"
|
||||
>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="shipping-methods" v-if="hasShippingMethod" v-cloak>
|
||||
<h6>{{ trans('storefront::cart.shipping_method') }}</h6>
|
||||
|
||||
<div class="form-group">
|
||||
<div class="form-radio" v-for="shippingMethod in cart.availableShippingMethods">
|
||||
<input type="radio" name="shipping_method" v-model="form.shipping_method"
|
||||
:value="shippingMethod.name" :id="shippingMethod.name"
|
||||
@change="updateShippingMethod(shippingMethod.name)">
|
||||
|
||||
<label :for="shippingMethod.name" v-text="shippingMethod.label"></label>
|
||||
|
||||
<span class="price-amount" v-html="shippingMethod.cost.inCurrentCurrency.formatted">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="order-summary-total">
|
||||
<label>{{ trans('storefront::cart.total') }}</label>
|
||||
<span class="total-price" v-html="cart.total.inCurrentCurrency.formatted"></span>
|
||||
|
||||
<span v-html="cart.total.inCurrentCurrency.formatted"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -90,8 +167,14 @@
|
||||
|
||||
<div id="paypal-button-container" v-if="form.payment_method === 'paypal'"></div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-place-order" :class="{ 'btn-loading': placingOrder }"
|
||||
:disabled="!form.terms_and_conditions" v-else v-cloak>
|
||||
<button
|
||||
v-cloak
|
||||
type="submit"
|
||||
class="btn btn-primary btn-place-order"
|
||||
:class="{ 'btn-loading': placingOrder }"
|
||||
:disabled="!form.terms_and_conditions"
|
||||
v-else
|
||||
>
|
||||
{{ trans('storefront::checkout.place_order') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,19 @@
|
||||
<div class="payment-method" v-cloak>
|
||||
<div class="payment-method">
|
||||
<h4 class="title">{{ trans('storefront::checkout.payment_method') }}</h4>
|
||||
|
||||
<div class="payment-method-form">
|
||||
<div class="form-group">
|
||||
<div class="form-radio" v-for="(gateway, name) in gateways">
|
||||
<div class="form-radio" v-for="(gateway, name, index) in gateways" :key="index">
|
||||
<input
|
||||
type="radio"
|
||||
name="form.payment_method"
|
||||
name="payment_method"
|
||||
v-model="form.payment_method"
|
||||
:value="name"
|
||||
:id="name"
|
||||
>
|
||||
|
||||
<label :for="name" v-text="gateway.label"></label>
|
||||
|
||||
<span class="helper-text" v-text="gateway.description"></span>
|
||||
</div>
|
||||
|
||||
@@ -27,9 +28,9 @@
|
||||
{{-- A Stripe Element will be mounted here dynamically. --}}
|
||||
</div>
|
||||
|
||||
<span class="error-message" v-if="stripeError" v-text="stripeError"></span>
|
||||
<span class="error-message stripe-error-message" v-if="stripeError" v-text="stripeError"></span>
|
||||
|
||||
<div class="payment-instructions" v-if="shouldShowPaymentInstructions" v-cloak>
|
||||
<div class="payment-instructions" v-if="shouldShowPaymentInstructions">
|
||||
<h4 class="title">{{ trans('storefront::checkout.payment_instructions') }}</h4>
|
||||
|
||||
<p v-html="paymentInstructions"></p>
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
<div class="shipping-method" v-if="hasShippingMethod">
|
||||
<h4 class="title">{{ trans('storefront::checkout.shipping_method') }}</h4>
|
||||
|
||||
<div class="shipping-method-form">
|
||||
<div class="form-group">
|
||||
<div class="form-radio" v-for="(shippingMethod, key, index) in cart.availableShippingMethods" :key="index">
|
||||
<input
|
||||
type="radio"
|
||||
name="shipping_method"
|
||||
v-model="form.shipping_method"
|
||||
:value="shippingMethod.name"
|
||||
:id="shippingMethod.name"
|
||||
@change="updateShippingMethod(shippingMethod.name)"
|
||||
>
|
||||
|
||||
<label :for="shippingMethod.name" v-text="shippingMethod.label"></label>
|
||||
|
||||
<span
|
||||
:class="{ 'text-line-through': hasFreeShipping }"
|
||||
v-text="shippingMethod.cost.inCurrentCurrency.formatted"
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user