checkout page ui fixes
This commit is contained in:
User
parent
9af28417d7
commit
28860d5f95
|
|
@ -131,7 +131,8 @@ export default {
|
|||
box-shadow: none !important;
|
||||
}
|
||||
.sidebar-router-padding-open {
|
||||
margin:0 130px 16px 132px;
|
||||
/* margin:0 130px 16px 132px; */
|
||||
padding: 0 0 0 250px;
|
||||
}
|
||||
.sidebar-router-padding-close {
|
||||
margin:0 16px 16px 16px;
|
||||
|
|
|
|||
|
|
@ -60,4 +60,20 @@
|
|||
}
|
||||
.checkpout-expansion-panel .v-expansion-panel-title__overlay{
|
||||
background-color:#fff !important;
|
||||
}
|
||||
.myItems{
|
||||
margin-bottom: 2px;
|
||||
padding: 6px 0;
|
||||
cursor: pointer;
|
||||
color: #2850da;
|
||||
}
|
||||
.myItems:hover{
|
||||
background: rgb(240, 235, 235);
|
||||
}
|
||||
.myItems1:hover{
|
||||
background: rgb(240, 235, 235);
|
||||
}
|
||||
.myItems1{
|
||||
padding: 6px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="12" class="d-flex justify-center align-center">
|
||||
<div class="h3 white--text mt-10">
|
||||
<div class="h3 text-white mt-10">
|
||||
Do not refresh or click back. Your payment is currently being
|
||||
processed.
|
||||
</div>
|
||||
|
|
@ -80,8 +80,8 @@
|
|||
<v-window touchless v-model="tabs">
|
||||
<v-window-item value="shippingTab" :disabled="valid">
|
||||
<v-row
|
||||
v-if="isMobileDevice && estimatedShippingMethods.length > 0"
|
||||
class="pt-3"
|
||||
v-if="estimatedShippingMethods.length > 0"
|
||||
class="pt-3 mb-3 mt-1 d-block d-sm-none"
|
||||
>
|
||||
<v-col cols="12">
|
||||
<v-alert text>
|
||||
|
|
@ -343,7 +343,6 @@
|
|||
<v-radio-group
|
||||
mandatory
|
||||
v-model="estimatedShipping"
|
||||
color="primary"
|
||||
>
|
||||
<div
|
||||
v-for="(
|
||||
|
|
@ -356,7 +355,7 @@
|
|||
<v-radio
|
||||
:label="method.carrierTitle"
|
||||
:value="method"
|
||||
class="black--text"
|
||||
class="text-black"
|
||||
color="primary"
|
||||
></v-radio>
|
||||
</v-col>
|
||||
|
|
@ -438,11 +437,11 @@
|
|||
v-else
|
||||
>
|
||||
<v-expansion-panel elevation="0">
|
||||
<v-expansion-panel-title class="pr-4"
|
||||
<v-expansion-panel-title class="pr-4 checkout-expansion"
|
||||
>{{ cartProductsItem.length }} Items In
|
||||
cart</v-expansion-panel-title
|
||||
>
|
||||
<v-expansion-panel-text class="checkout-expansion">
|
||||
<v-expansion-panel-text class="">
|
||||
<div class="mb-5 checkout-expansion-maxheight">
|
||||
<CartProductList :checkOut="chekoutFlag" />
|
||||
</div>
|
||||
|
|
@ -470,14 +469,18 @@
|
|||
<v-radio
|
||||
:label="purchaseOrderPayment.title"
|
||||
:value="purchaseOrderPayment.code"
|
||||
class="black--text"
|
||||
class="text-black"
|
||||
color="primary"
|
||||
></v-radio>
|
||||
</v-radio-group>
|
||||
|
||||
<div v-if="paymentMethod === 'purchaseorder'">
|
||||
<v-checkbox
|
||||
color="primary"
|
||||
label="My billing and shipping address are the same"
|
||||
v-model="sameAddress"
|
||||
@change="resetFields()"
|
||||
dense
|
||||
density="compact"
|
||||
:readonly="readOnlyCheckBox"
|
||||
hide-details
|
||||
></v-checkbox>
|
||||
|
|
@ -487,7 +490,7 @@
|
|||
<BillingAddressComponent :address="address" />
|
||||
<v-btn
|
||||
class="primary my-3"
|
||||
large
|
||||
size="large"
|
||||
v-if="editBillingButton"
|
||||
@click="editBillBook()"
|
||||
depressed
|
||||
|
|
@ -497,20 +500,22 @@
|
|||
</v-col>
|
||||
</v-row> <v-form ref="poNumberForm" v-model="valid" :lazy-validation="lazy">
|
||||
<v-row >
|
||||
<v-col cols="12" align="right">
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
v-model="poNumber"
|
||||
type="text"
|
||||
dense
|
||||
density="compact"
|
||||
placeholder="Purchase Order Number"
|
||||
outlined
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
:rules="textRules"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" align="right">
|
||||
<v-col cols="12" align="right" class="mb-6">
|
||||
<v-btn
|
||||
class="primary mx-3 text-uppercase"
|
||||
class="primary mx-3 text-uppercase rounded-0"
|
||||
color="primary"
|
||||
@click="placeOrderFree($event)"
|
||||
tile
|
||||
depressed
|
||||
|
|
@ -528,73 +533,85 @@
|
|||
<v-col cols="12">
|
||||
<v-select
|
||||
v-model="selectedBillingAddress"
|
||||
dense
|
||||
density="compact"
|
||||
:items="billingAddressList"
|
||||
outlined
|
||||
variant="outlined"
|
||||
return-object
|
||||
color="primary"
|
||||
class="billing-address-select"
|
||||
@change="changeBillingAddress()"
|
||||
item-value="id"
|
||||
>
|
||||
<template v-slot:selection="data">
|
||||
<div v-if="data.item.value">
|
||||
<template v-slot:selection="{ item }">
|
||||
<div v-if="item.raw.value">
|
||||
<span class>New Address</span>
|
||||
</div>
|
||||
<div
|
||||
class="
|
||||
d-inline-block
|
||||
text-truncate
|
||||
pt-sm-0
|
||||
"
|
||||
class="d-inline-block text-truncate pt-sm-0"
|
||||
v-else
|
||||
>
|
||||
|
||||
<span class
|
||||
>{{ data.item.firstname }}
|
||||
{{ data.item.lastname }}</span
|
||||
>{{ item.raw.firstname }}
|
||||
{{item.raw.lastname }}</span
|
||||
>
|
||||
<span
|
||||
class="body pl-1"
|
||||
v-if="data.item.streetNoOne"
|
||||
>{{ data.item.streetNoOne }},
|
||||
{{ data.item.streetNoTwo }}</span
|
||||
v-if="item.raw.streetNoOne"
|
||||
>{{ item.raw.streetNoOne }},
|
||||
{{ item.raw.streetNoTwo }}</span
|
||||
>
|
||||
<span class="body pl-1" v-else
|
||||
>{{ data.item.street[0] }} ,{{
|
||||
data.item.street[1]
|
||||
>{{
|
||||
item.raw.street
|
||||
? item.raw.street[0]
|
||||
: ""
|
||||
}}
|
||||
,{{
|
||||
item.raw.street
|
||||
? item.raw.street[1]
|
||||
: ""
|
||||
}}</span
|
||||
>
|
||||
<span class="pl-1"
|
||||
>{{ data.item.city }}
|
||||
{{ data.item.postcode }}</span
|
||||
>{{ item.raw.city }}
|
||||
{{ item.raw.postcode }}</span
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:item="data">
|
||||
<v-list-item-content>
|
||||
<v-list-item-title
|
||||
v-if="data.item.value"
|
||||
<template v-slot:item="{ props, item }">
|
||||
<v-list-item-content v-bind="props">
|
||||
<v-list-item-title class="myItems1"
|
||||
v-if="item.raw.value"
|
||||
>
|
||||
<span class="ml-2">New Address</span>
|
||||
</v-list-item-title>
|
||||
<v-list-item-title v-else>
|
||||
<v-list-item-title class="myItems" v-else>
|
||||
<span class="ml-2"
|
||||
>{{ data.item.firstname }}
|
||||
{{ data.item.lastname }},</span
|
||||
>{{ item.raw.firstname }}
|
||||
{{ item.raw.lastname }},</span
|
||||
>
|
||||
<span
|
||||
class="body"
|
||||
v-if="data.item.streetNoOne"
|
||||
>{{ data.item.streetNoOne }},
|
||||
{{ data.item.streetNoTwo }}</span
|
||||
v-if="item.raw.streetNoOne"
|
||||
>{{ item.raw.streetNoOne }},
|
||||
{{ item.raw.streetNoTwo }}</span
|
||||
>
|
||||
<span class="body" v-else
|
||||
>{{ data.item.street[0] }} ,{{
|
||||
data.item.street[1]
|
||||
>{{
|
||||
item.raw.street
|
||||
? item.raw.street[0]
|
||||
: ""
|
||||
}}
|
||||
,{{
|
||||
item.raw.street
|
||||
? item.raw.street[1]
|
||||
: ""
|
||||
}}</span
|
||||
>
|
||||
<span class
|
||||
>{{ data.item.city }},
|
||||
{{ data.item.postcode }}</span
|
||||
>{{ item.raw.city }},
|
||||
{{ item.raw.postcode }}</span
|
||||
>
|
||||
</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
|
|
@ -603,17 +620,19 @@
|
|||
</v-col>
|
||||
<v-col
|
||||
cols="12"
|
||||
class="d-flex justify-end pa-0"
|
||||
v-if="!showNewBillingForm"
|
||||
class="d-flex justify-end pa-0 mb-6"
|
||||
v-if="!sshowNewBillingForm"
|
||||
>
|
||||
<v-btn
|
||||
class="primary ma-3 text-uppercase"
|
||||
@click="cancelBillingAddress"
|
||||
color="primary"
|
||||
>Cancel</v-btn
|
||||
>
|
||||
<v-btn
|
||||
class="success ma-3 text-uppercase"
|
||||
@click="updateBillingAddress"
|
||||
color="success"
|
||||
>Update</v-btn
|
||||
>
|
||||
</v-col>
|
||||
|
|
@ -632,7 +651,7 @@
|
|||
label="Save in Address Book"
|
||||
v-model="saveInBillingAddressBook"
|
||||
class="mt-0"
|
||||
dense
|
||||
density="compact"
|
||||
hide-details
|
||||
></v-checkbox>
|
||||
</v-col>
|
||||
|
|
@ -702,8 +721,7 @@
|
|||
>Continue To Paypal</v-btn>
|
||||
</v-col>
|
||||
</div>-->
|
||||
</v-radio-group>
|
||||
|
||||
|
||||
<v-divider></v-divider>
|
||||
</v-col>
|
||||
<v-col cols="12" v-else>
|
||||
|
|
@ -718,8 +736,8 @@
|
|||
name="email"
|
||||
v-model="emailId"
|
||||
:rules="emailRules"
|
||||
outlined
|
||||
dense
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
></v-text-field>
|
||||
<!-- <v-text-field
|
||||
v-show="passwordFields"
|
||||
|
|
@ -837,20 +855,20 @@
|
|||
<v-col cols="12" sm="5" md="4" class="pl-3 d-none d-sm-block">
|
||||
<p class="h3 mb-2">Order Summary</p>
|
||||
<hr />
|
||||
<v-expansion-panels accordion light flat>
|
||||
<v-expansion-panel class="transparent-background">
|
||||
<v-expansion-panel-header class="pr-4"
|
||||
<v-expansion-panels class="checkpout-expansion-panel">
|
||||
<v-expansion-panel elevation="0" class="transparent-background">
|
||||
<v-expansion-panel-title class="pr-4 checkout-expansion"
|
||||
>{{ cartProductsItem.length }} Items In
|
||||
cart</v-expansion-panel-header
|
||||
cart</v-expansion-panel-title
|
||||
>
|
||||
<v-expansion-panel-content class="checkout-expansion">
|
||||
<v-expansion-panel-text class="checkout-expansion">
|
||||
<div class="mb-5 checkout-expansion-maxheight">
|
||||
<CartProductList
|
||||
:checkOut="chekoutFlag"
|
||||
:cartItems="cartProductsItem"
|
||||
/>
|
||||
</div>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
<hr />
|
||||
|
|
@ -975,9 +993,10 @@
|
|||
|
||||
<v-row class="mt-4">
|
||||
<v-col class="d-flex justify-space-between pb-0">
|
||||
<span class="display-1">Ship To:</span>
|
||||
<span class="text-h4">Ship To:</span>
|
||||
<v-btn
|
||||
icon
|
||||
flat
|
||||
@click="(tabs = 'shippingTab'), (valid = false)"
|
||||
>
|
||||
<v-icon>mdi mdi-pencil</v-icon>
|
||||
|
|
@ -1044,9 +1063,10 @@
|
|||
</v-row>
|
||||
<v-row class="mt-4">
|
||||
<v-col class="d-flex justify-space-between pb-0">
|
||||
<span class="display-1">Shipping Method:</span>
|
||||
<span class="text-h4">Shipping Method:</span>
|
||||
<v-btn
|
||||
icon
|
||||
flat
|
||||
@click="(tabs = 'shippingTab'), (valid = false)"
|
||||
>
|
||||
<v-icon>mdi mdi-pencil</v-icon>
|
||||
|
|
@ -1062,7 +1082,7 @@
|
|||
>
|
||||
<v-col
|
||||
cols="12"
|
||||
class="pb-0"
|
||||
class="pb-0 mb-4"
|
||||
v-if="types.code === 'shipping'"
|
||||
>{{ types.title }}</v-col
|
||||
>
|
||||
|
|
@ -1088,7 +1108,7 @@
|
|||
</v-col>
|
||||
</v-row>
|
||||
<v-col v-else>
|
||||
<v-alert class="alert-box-outline" type="error" text dense
|
||||
<v-alert class="alert-box-outline" type="error" text density="compact"
|
||||
>You have no items in your shopping cart.</v-alert
|
||||
>
|
||||
<p>
|
||||
|
|
@ -2375,5 +2395,6 @@ export default {
|
|||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style src="./checkout_page.scss" lang="scss" />
|
||||
Loading…
Reference in New Issue