كيفية تغيير كمية المنتج في السلة Change in Quantity

سنتعرف بدرسنا لهدا اليوم كيفية تغيير الكمية لكل منتج في السلة   وسنستخدم لأجل دلك نافدة dialog  التي نجد مثال عنها الموقع الرسمي لـ ionic من هنا -

يفضل الاطلاع على النمادج التي نضعها في الموقع الرسمي لـ ionic  حتى لاتجد صعوبة في فهم الكود الدي سنضغه بالدرس

سوف نضيف زرين في صفحة السلة cart   ستكون وضيفة الزرين هي  التعديل والحدف  

أول شيء سنضيف الزرين src/pages/cart/cart.html الموجود بصفحة Cart

    <ion-item *ngFor='let car of cart ; let index=index'>
           <ion-thumbnail item-start>
              <img [src]="car.image">
            </ion-thumbnail>
            <h2>{{ car.reference }}</h2>
            <p>{{ car.brand }} - <span style="color:green"> Quantity : {{ car.quantity }}</span></p>
            <button ion-button clear item-end (click)='changeQuntatity(car,car.quantity)'>  <ion-icon name="create"></ion-icon></button>
            <button ion-button clear item-end (click)='deleteItem(car.id)'>  <ion-icon name="trash"></ion-icon></button>
           </ion-item>
  </ion-list>

ليصبح المحتوى الكامل للملف هكدى

<ion-header>
  <div class="main-header">
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      <strong>My</strong> Cart
    </ion-title>
 
    <ion-buttons end>
      <button ion-button tappable (click)="account()">
        <ion-icon name="person"></ion-icon>
      </button>
      <button ion-button tappable (click)="home($event)">
          <ion-icon name="home"></ion-icon>
        </button>
    </ion-buttons>
</ion-navbar>
</div>
</ion-header>


 
<ion-content>
  
  <ion-list *ngIf='cart && cart?.length>0'>
    <ion-item *ngFor='let car of cart ; let index=index'>
           <ion-thumbnail item-start>
              <img [src]="car.image">
            </ion-thumbnail>
            <h2>{{ car.reference }}</h2>
            <p>{{ car.brand }} - <span style="color:green"> Quantity : {{ car.quantity }}</span></p>
            <button ion-button clear item-end (click)='changeQuntatity(car,car.quantity)'>  <ion-icon name="create"></ion-icon></button>
            <button ion-button clear item-end (click)='deleteItem(car.id)'>  <ion-icon name="trash"></ion-icon></button>
           </ion-item>
  </ion-list>
</ion-content>

<ion-footer no-shadow>
	<ion-toolbar position="bottom">
    <ion-row  padding>
      <ion-col>
        <button color="primary" ion-button icon-left small full  menuClose>
          <ion-icon name="home" (click)="home()"></ion-icon>
           Go Home
        </button>
      </ion-col>
      <ion-col>
        <button color="secondary"  ion-button icon-left small full menuClose (click)="addToCart()">
          <ion-icon name="hand"></ion-icon>
          Confirm
        </button>
      </ion-col>
    </ion-row>
    
	</ion-toolbar>
</ion-footer>

الان نتحول الى ملف الصفحة src/pages/cart/cart.ts ونضيف تفاصيل الدالة changeQuantity التي ستأخد متغيران   وسنحتاج  الى استخدام  نوافد Alert التي يقدمها ionic كما وضحنا في بداية الدرس

changeQuntatity(item:any,quantity:number){
    // عرض نافدة لتغيير الكمية
    let alert = this.alertCtrl.create({
      title: 'Quantity',           // عنوان النافدة
      inputs: [
        {
          name: 'quantity',
          placeholder: 'Quantity',
          value: ''+quantity+'',  // جلب الكمية وعرضها بالنافدة
          
        }
      ],
      buttons: [                  // الازرار المتوفرة بالنافدة
        {
          text: 'Confirm',
          handler: data => {
            let quentity = Number(data.quantity);
            // يجب ان تكون قيمة الكمية اكبر من الصفر
            if(quentity>0){
             this.mycartProvider.setQuantity(item,quentity).then(
              rs =>{
                 //تحديث كافة بيانات السيارات الموجودة بالسلة
                this.mycartProvider.getValue('cart').then(
                  resault =>{
                    this.cart = resault;
                  });
              });
             
            }
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: data => {
            // no things
          }
        }
        
      ]
    });
    alert.present();
  }

لاتنسى تضمين السيرفيس الدي يقدم خدمة النوافد المبوبة

import { AlertController } from 'ionic-angular';

constructor(
     //...
     private alertCtrl: AlertController,
     //...
    ) {
  }

نتوجه الى ملف الخدمة myCart  الموجود بالمسار src/providers/mycart/mycart.ts  ونضيف الدالة المسؤولة عن تغيير قيمة الكيمة المدخلة

وضيفة هده الدالة هي تغيير الكمية المخزنة في الـ local storage  حيث بتدأ بالبحث عن  الكائن الدي يمثل المنتج المحدد حسب قيمة id وعند ايجاده تقوم بوضع القيمة الجديدة للـ quantity ثم تعيد تخزين  المصفوفة الجديدة للسلة

  // change quantity function
      setQuantity(item:any,quantityValue:number) {
        return new Promise(resolve => {
          this.storage.get('cart').then((CartStorage) => { 
          let tempCartStorage = CartStorage;
          if(tempCartStorage != null){ 
            let updateItem = tempCartStorage.find(car => car.id === item.id);
            if(updateItem != null){
              updateItem.quantity = Number(quantityValue);
              var key:number = tempCartStorage.indexOf(updateItem);
              tempCartStorage[key] = updateItem;
            }
          }
          this.setValue('cart',tempCartStorage);
          resolve(tempCartStorage);
          });
        })
      }

النتيجة