Skip to content

Commit 2e105f8

Browse files
samarthagarwalsamarthagarwal
committed
Lec36
1 parent 1c82d66 commit 2e105f8

File tree

2 files changed

+170
-8
lines changed

2 files changed

+170
-8
lines changed

‎src/pages/checkout/checkout.html

Lines changed: 143 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,153 @@
1-
<!--
2-
Generated template for the Checkout page.
3-
4-
See http://ionicframework.com/docs/components/#navigation for more info on
5-
Ionic pages and navigation.
6-
-->
71
<ion-header>
82

93
<ion-navbar>
10-
<ion-title>checkout</ion-title>
4+
<ion-title>Checkout</ion-title>
115
</ion-navbar>
126

137
</ion-header>
148

159

16-
<ion-content padding>
10+
<ion-content>
11+
<ion-list>
12+
<ion-item-divider color="danger">Personal Details</ion-item-divider>
13+
<ion-item>
14+
<ion-label>First Name</ion-label>
15+
<ion-input type="text" [(ngModel)]="newOrder.billing_address.first_name"></ion-input>
16+
</ion-item>
17+
18+
<ion-item>
19+
<ion-label>Last Name</ion-label>
20+
<ion-input type="text" [(ngModel)]="newOrder.billing_address.last_name"></ion-input>
21+
</ion-item>
22+
23+
<ion-item>
24+
<ion-label>Email</ion-label>
25+
<ion-input readonly type="email" [(ngModel)]="newOrder.email"></ion-input>
26+
</ion-item>
27+
28+
<ion-item>
29+
<ion-label>Username</ion-label>
30+
<ion-input readonly type="text" [(ngModel)]="newOrder.username"></ion-input>
31+
</ion-item>
32+
33+
<ion-item-divider color="danger">Billing Details</ion-item-divider>
34+
35+
<ion-item>
36+
<ion-label>Address Line 1</ion-label>
37+
<ion-textarea type="text" maxlength="80" [(ngModel)]="newOrder.billing_address.address_1"></ion-textarea>
38+
</ion-item>
39+
40+
<ion-item>
41+
<ion-label>Address Line 2</ion-label>
42+
<ion-textarea type="text" maxlength="80" [(ngModel)]="newOrder.billing_address.address_2"></ion-textarea>
43+
</ion-item>
44+
45+
<ion-item>
46+
<ion-label>Country</ion-label>
47+
<ion-select [(ngModel)]="newOrder.billing_address.country">
48+
<ion-option value="India" selected="true">India</ion-option>
49+
</ion-select>
50+
</ion-item>
51+
52+
<ion-item>
53+
<ion-label>State</ion-label>
54+
<ion-select [(ngModel)]="newOrder.billing_address.state">
55+
<ion-option value="New Delhi">New Delhi</ion-option>
56+
<ion-option value="Uttar Pradesh">Uttar Pradesh</ion-option>
57+
<ion-option value="Maharashtra">Maharashtra</ion-option>
58+
<ion-option value="Tamil Nadu">Tamil Nadu</ion-option>
59+
<ion-option value="Madhya Pradesh">Madhya Pradesh</ion-option>
60+
</ion-select>
61+
</ion-item>
62+
63+
<ion-item>
64+
<ion-label>City</ion-label>
65+
<ion-input type="text" [(ngModel)]="newOrder.billing_address.city"></ion-input>
66+
</ion-item>
67+
68+
<ion-item>
69+
<ion-label>Postal Code</ion-label>
70+
<ion-input type="number" clearInput [(ngModel)]="newOrder.billing_address.postcode"></ion-input>
71+
</ion-item>
72+
73+
<ion-item>
74+
<ion-label>Phone</ion-label>
75+
<ion-input type="tel" clearInput [(ngModel)]="newOrder.billing_address.phone"></ion-input>
76+
</ion-item>
77+
78+
<ion-item>
79+
<ion-label>Same Shipping Details</ion-label>
80+
<ion-checkbox (ionChange)="setBillingToShipping()"></ion-checkbox>
81+
</ion-item>
82+
83+
<ion-item-divider color="danger" *ngIf="!billing_shipping_same">Shipping Details</ion-item-divider>
84+
85+
<ion-item *ngIf="!billing_shipping_same">
86+
<ion-label>First Name</ion-label>
87+
<ion-input type="text" [(ngModel)]="newOrder.shipping_address.first_name"></ion-input>
88+
</ion-item>
89+
90+
<ion-item *ngIf="!billing_shipping_same">
91+
<ion-label>Last Name</ion-label>
92+
<ion-input type="text" [(ngModel)]="newOrder.shipping_address.last_name"></ion-input>
93+
</ion-item>
94+
95+
<ion-item *ngIf="!billing_shipping_same">
96+
<ion-label>Address Line 1</ion-label>
97+
<ion-textarea type="text" maxlength="80" [(ngModel)]="newOrder.shipping_address.address_1"></ion-textarea>
98+
</ion-item>
99+
100+
<ion-item *ngIf="!billing_shipping_same">
101+
<ion-label>Address Line 2</ion-label>
102+
<ion-textarea type="text" maxlength="80" [(ngModel)]="newOrder.shipping_address.address_2"></ion-textarea>
103+
</ion-item>
104+
105+
<ion-item *ngIf="!billing_shipping_same">
106+
<ion-label>Country</ion-label>
107+
<ion-select [(ngModel)]="newOrder.shipping_address.country">
108+
<ion-option value="India" selected="true">India</ion-option>
109+
</ion-select>
110+
</ion-item>
111+
112+
<ion-item *ngIf="!billing_shipping_same">
113+
<ion-label>State</ion-label>
114+
<ion-select [(ngModel)]="newOrder.shipping_address.state">
115+
<ion-option value="New Delhi">New Delhi</ion-option>
116+
<ion-option value="Uttar Pradesh">Uttar Pradesh</ion-option>
117+
<ion-option value="Maharashtra">Maharashtra</ion-option>
118+
<ion-option value="Tamil Nadu">Tamil Nadu</ion-option>
119+
<ion-option value="Madhya Pradesh">Madhya Pradesh</ion-option>
120+
</ion-select>
121+
</ion-item>
122+
123+
<ion-item *ngIf="!billing_shipping_same">
124+
<ion-label>City</ion-label>
125+
<ion-input type="text" [(ngModel)]="newOrder.shipping_address.city"></ion-input>
126+
</ion-item>
127+
128+
<ion-item *ngIf="!billing_shipping_same">
129+
<ion-label>Postal Code</ion-label>
130+
<ion-input type="number" clearInput [(ngModel)]="newOrder.shipping_address.postcode"></ion-input>
131+
</ion-item>
132+
133+
<ion-item *ngIf="!billing_shipping_same">
134+
<ion-label>Phone</ion-label>
135+
<ion-input type="tel" clearInput [(ngModel)]="newOrder.shipping_address.phone"></ion-input>
136+
</ion-item>
137+
138+
<ion-item-divider color="danger">Payment Details</ion-item-divider>
139+
140+
<ion-item>
141+
<ion-label>Payment Method</ion-label>
142+
<ion-select [(ngModel)]="paymentMethod">
143+
<ion-option *ngFor="let p of paymentMethods" value="{{p.method_id}}">{{ p.method_title }}</ion-option>
144+
</ion-select>
145+
</ion-item>
146+
147+
</ion-list>
17148

18149
</ion-content>
150+
151+
<ion-footer>
152+
<button ion-button block color="danger" (click)="placeOrder()">Place Order</button>
153+
</ion-footer>

‎src/pages/checkout/checkout.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,34 @@ import { NavController, NavParams } from 'ionic-angular';
77
})
88
export class Checkout {
99

10+
newOrder: any;
11+
paymentMethods: any[];
12+
paymentMethod: any;
13+
billing_shipping_same: boolean;
14+
1015
constructor(public navCtrl: NavController, public navParams: NavParams) {
16+
this.newOrder = {};
17+
this.newOrder.billing_address = {};
18+
this.newOrder.shipping_address = {};
19+
this.billing_shipping_same = false;
20+
21+
this.paymentMethods = [
22+
{ method_id: "bacs", method_title: "Direct Bank Transfer" },
23+
{ method_id: "cheque", method_title: "Cheque Payment" },
24+
{ method_id: "cod", method_title: "Cash on Delivery" },
25+
{ method_id: "paypal", method_title: "PayPal" }];
26+
27+
28+
}
29+
30+
setBillingToShipping(){
31+
this.billing_shipping_same = !this.billing_shipping_same;
32+
33+
if(this.billing_shipping_same)
34+
{
35+
this.newOrder.shipping_address = this.newOrder.billing_address;
36+
}
37+
1138
}
1239

1340
ionViewDidLoad() {

0 commit comments

Comments
 (0)