سنتعرف بدرسنا لهدا اليوم كيفية تغيير الكمية لكل منتج في السلة وسنستخدم لأجل دلك نافدة 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);
});
})
}
النتيجة