logo أكاديمية أكسبورت للتطوير والبرمجة logo-alt أكاديمية أكسبورت للتطوير والبرمجة
تسجيل الدخول  أو  تسجيل حساب
  • الرئيسية
  • دروس برمجية
    • HTML
    • CSS
    • ANGULAR
    • IONIC / MOBILE
    • YII 2.0
    • Odoo /epen ERP
  • مفاهيم برمجية
  • من نحـن
  • اتصل بنا

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

ionic quantity

Mobile development الصفحة الرئيسية

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

 

النتيجة

 

ماهو تقييمك للدرس
تقييم الزوار للدرس
الدرس السابق : تجهيز صفحة add to cart الدرس القادم : تجهيز قائمة البحث عن المنتج search item
  • قم بتسجيل الدخول للتعليق : تسجيل الدخول أو تسجيل عضوية
الدروس المقبلة
  • تجهيز قائمة البحث عن المنتج search item
    search bar
  • انشاء صفحة login page
    login page
  • انشاء صفحة register
    register page
  • انشاء صفحة profile
    profile page
ANGULAR
  • المستوى 101 من دورة angular
  • المستوى 102 من دورة angular
  • الدورة 103 من angular
Mobile Development
دورة تطوير تطبيق موبايل

sitemap - Exportdeveloper Academy © 2019 All rights reserved