تجهيز صفحة add to cart

صفحة add to cart هي صفحة السلة أو مايعرف بسلة المنتجات  عادة نجدها بتطبيقات المتاجر التي تستعمل الدفع الألكتروني ونجدها أيضا بالتطبيقات التي تقوم بخدمة معينة  وأيضا بالشركات التي تستخدم  خدمة فواتير الطلبات للمنتجات لزبائنها أو مايسمى بالـ Qoutations-Orders-Invoices

سيكون شكل صفحتنا بهدا الشكل

انشاء صفحة add to cart

ionic generate page cart --no-module

اضافة الصفحة بملف module

import { CartPage } from '../pages/cart/cart';

declarations: [
    // .....
    CartPage,
    // .....
  ],
  
  

 entryComponents: [
     // .....
    CartPage,
    // .....
  ],

أضف بصفحة Home  دالة مسار الـ cart  الدي سيوجه هده الأيقونة  بالرئسية الى صفحة السلة

import { CartPage } from '../cart/cart';

  cart(){  // نرسل قيمة المعرف عبر المسار الى صفحة التفاصيل
    this.navCtrl.push(CartPage);
  }

الان سنقوم بانشاء ملف خدمة service  جديد خاص بالسلة حيث سيتحكم باضافة طلبية وحدفها والتعديل عليها كما سيتكفل بارسال الطلبات الى السرفر مستقبلا وجلب البيانات منه ( مثل جلب أرشيف الطلبات السابقة )

ionic generate provider mycart

سنستخدم  خاصية storage التي تسمح بتخزين البيانات في التطبيق  والتي سنحتاجها سواء في حفظ بيانات السلة او بيانات تسجيل الدخول 

نضيف موديول storage  بملف app.module

import { IonicStorageModule } from '@ionic/storage';

  imports: [
       //....
     IonicStorageModule.forRoot({
      name: '__mydb',
      driverOrder: ['sqlite', 'websql', 'indexeddb']
    }),
       //....
  ],

نضيف دالة adItem بملف الخدمة التي تسمح باضافة سيارة الى السلة

نتوجه الى ملف الخدمة  الدي انشئناه mycart ونضع به هدا المحتوى

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';   // سنستعمل خاصية الخازن التي تسمح بتخزين البيانات في تطبيقك 


 // بيانات السيارة التي سنقوم بتخزينها في اللوكال ستوريج
export interface Item{
  id:Number,
  reference:string,
  brand:string,
  price:Number,
  quantity:Number,
  image:string,
}

 // بيانات السلة التي سنقوم بتخزينها في اللوكال ستوريج حيث ستحتوي على مصفوفة من السيارات +السعر الاجمالي والكمية الاجمالية
export interface Cart{  
  cars:Item[],
  total:number,
  totalQty:number,
}



@Injectable()
export class MycartProvider {

  constructor(
           public http    : HttpClient,
           public storage : Storage,
    ) {

  }

  // دالة الاضافة الى السلة
  addItem(item:any) {
    return new Promise(resolve => {
      this.storage.get('cart').then((CartStorage) => { 
       let newItem:Item ={
        id        : item.id,
        reference : item.reference,
        brand     : item.brand,
        price     : item.price,
        image     : item.image,
        quantity  : 1,
      };
      let tempCartStorage = CartStorage;
      if(tempCartStorage != null){
        let updateItem = tempCartStorage.find(item => item.id === newItem.id);
        if(updateItem == null){
          tempCartStorage.push(newItem); // push new item to cart
        }else{
          updateItem.quantity = Number(updateItem.quantity)+1;
          var key:number = tempCartStorage.indexOf(updateItem);
          tempCartStorage[key] = updateItem;
        }
      }else{
        tempCartStorage = [newItem];
      }
      this.setValue('cart',tempCartStorage);
      resolve(tempCartStorage);
      });
    })
  }




  // جلب بيانات متغيرات من المخزن 
  getValue(key: string): Promise<any> {
    return this.storage.get(key);
  }

  // اضافة او تعديل على بيانات في المخزن
  setValue(key: string,data: any): Promise<any> {
    return this.storage.set(key,data);
  }



}

دالة adItem  تقوم بمايلي

اضافة المنتج الى السلة ادا لم يكن متوفر في الـ data local storage  .

ادا كان المنتج موجود بالفعل تقوم الدالة بزيادة قيمة الـ quantity  (الكمية) الى المنتج المحدد  

نتوجه الان الى الصفحة src/pages/cart  ونضيف دالة جلب البيانات من المخزن من اجل عرضها بصفحة السلة  وادا لم تحصل على بيانات ستعرض الصفحة فارغة

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { MycartProvider } from '../../providers/mycart/mycart';

@Component({
  selector: 'page-cart',
  templateUrl: 'cart.html',
})
export class CartPage {

  public cart;

  constructor(
    public navCtrl: NavController,
     public navParams: NavParams,
     public mycartProvider: MycartProvider,
    ) {
  }

  ionViewDidLoad() {
    // نقوم بجلب البيانات من المخزن ان وجدت
    this.mycartProvider.getValue('cart').then(
      data =>{
        this.cart = data;
      });
  }
 

}

ومحتوى صفحة الـ template الخاص بصفحة لائحة السلة ستكون بهدا الشكل

<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>View</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>

نضع بعض التنسيق لنافدة Alert التي ستظهر عند الضغط على زر الاضافة الى السلة add to cart

 ion-alert{
  .alert-wrapper{
    background: -webkit-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%);
    background: -moz-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%);
    background: -o-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%);
    background: linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%);
    font-family: $font-family-base ;
  }
  .alert-button{
    color: #000000 !important;
  }
  .alert-input {
    border-bottom: 1px solid #ffffff;
    color: #fff;
  }

 }

النتيجة