Lec52

Author: samarthagarwal

ionic.config.json

@@ -1,5 +1,8 @@
 {
   "name": "WooIonic",
   "app_id": "",
-  "type": "ionic-angular"
+  "type": "ionic-angular",
+  "integrations": {
+    "cordova": {}
+  }
 }

package.json

@@ -19,6 +19,7 @@
     "@angular/platform-browser": "4.0.0",
     "@angular/platform-browser-dynamic": "4.0.0",
     "@ionic-native/core": "^3.6.1",
+    "@ionic-native/network": "^4.2.1",
     "@ionic-native/onesignal": "^3.6.1",
     "@ionic-native/paypal": "^3.5.0",
     "@ionic-native/splash-screen": "3.4.2",
@@ -33,8 +34,9 @@
   },
   "devDependencies": {
     "@ionic/app-scripts": "1.3.0",
-    "@ionic/cli-plugin-cordova": "1.4.0",
-    "@ionic/cli-plugin-ionic-angular": "1.3.1",
+    "@ionic/cli-plugin-cordova": "1.6.2",
+    "@ionic/cli-plugin-ionic-angular": "1.4.1",
+    "ionic": "3.10.3",
     "typescript": "~2.2.1"
   },
   "cordovaPlugins": [

src.rar

@@ -21,20 +21,37 @@
   </ion-card>
 
 
-  <ion-list>
-    <ion-item *ngFor="let item of cartItems; let i = index">
+  <ion-card *ngFor="let item of cartItems; let i = index">
+    <ion-item color="light">
 
       <ion-thumbnail item-left>
         <img [src]="item.product.featured_src" style="width: 60px !important; height: 60px !important;"/>
       </ion-thumbnail>
       <h2>{{ item.product.title }}</h2>
       <p>{{ item.qty }} • {{ item.product.price }}</p>
-      <button ion-button clear item-right color="danger" (click)="removeFromCart(item, i)">
+      <!-- <button ion-button clear item-right color="danger" (click)="removeFromCart(item, i)">
         <ion-icon name="close-circle"></ion-icon>
-      </button>
+      </button> -->
 
     </ion-item>
-  </ion-list>
+
+    <ion-item class="compact">
+      <ion-row no-padding>
+        <ion-col col-8>
+          <button ion-button icon-only clear color="danger" (click)="changeQty(item, i, -1)">
+            <ion-icon name="remove-circle"></ion-icon>
+          </button>
+          <button ion-button clear color="danger"> {{ item.qty }} </button>
+          <button ion-button icon-only clear color="danger" (click)="changeQty(item, i, 1)">
+            <ion-icon name="add-circle"></ion-icon>
+          </button>
+        </ion-col>
+        <ion-col col-4 style="text-align: right;">
+          <button ion-button small outline (click)="removeFromCart(item, i)" color="danger" style="width: 64px;">Remove</button>
+        </ion-col>
+      </ion-row>
+    </ion-item>
+  </ion-card>
 
 
   <ion-grid>

src/pages/cart/cart.html

@@ -1,3 +1,5 @@
 page-cart {
-
+    .compact .item-inner .input-wrapper ion-label {
+        margin: 0 !important;
+    }
 }

src/pages/cart/cart.scss

@@ -78,5 +78,6 @@ export class Cart {
     })
 
   }
+  
 
 }

src/pages/cart/cart.ts

@@ -25,7 +25,11 @@ export class HomePage {
 
     this.page = 2;
 
-    this.WooCommerce = this.woocommerce.initialize();
+    this.WooCommerce = WC({
+      url: "http://samarth.cloudapp.net",
+      consumerKey: "ck_d6c5feec9ea1c407d2f91661c5137c6e3e48ae3b",
+      consumerSecret: "cs_de8e6cf03a5afd10491dfb1756415ac5a0169ae8"
+    });
 
     this.loadMoreProducts(null);