انشاء صفحة محتوى السيارة - تفاصيل المنتج-

مظهر صفحة تفاصيل المنتج سيكون بهدا الشكل

لانشاء  صفحة تفاصيل السيارة  يتوجب علينا الدهاب الى  terminal   او سطر الأوامر بالويندوز وضع هده الأوامر

//الدهاب الى مسار مشروعك
cd your/project/path   

انشاء الصفحة

ionic generate page car-detail --no-module

نقوم بتضمين الصفحة بملف الـ app.module

import { CarDetailPage } from '../pages/car-detail/car-detail'; //+

declarations: [
    // ....
    CarDetailPage, //+
   // ....
  ],

 entryComponents: [
      // ....
    CarDetailPage, //+
   // ....
  ],

نضيف دالة تقوم بالتوجيه الى هده الصفحة  / ندهب لملف home.ts ونضع الدالة التالية

import { CarDetailPage } from '../car-detail/car-detail';

 detail(id:number){  // نرسل قيمة المعرف عبر المسار الى صفحة التفاصيل
    this.navCtrl.push(CarDetailPage, {
      ID:id, 
    });

الفرق بين الدالة push و setRoot

نتأكد بملف home.html  من الحدث (click) " في الحلقة على السيارات" حيث يجب ان يحمل اسم الدالة detail

(click)="detail(car.id)"

الأن لم يتبقى سوى عملية عرض تفاصيل السيارة بالصفحة الجديدة  والتي سنجلبها من ملف الـ json الدي يحتوي على بيانات كل السيارات .وكل ماعلينا فعله هو فلترة بيانات المصفوفة ونستخرج بيانات السيارة المحددة عن طريق المعرف id 

نتوجه الى ملف الخدمة  src/provider/car وننشيء دالة جلب بيانات السيارة عن طريق المعرف id 

  getCarByID(id:number){ 
    let url:string='assets/data/cars.json';
    return  this.http.get(url)
      .pipe(
        map(res => res) 
      );
  }

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

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

 

@Component({
  selector: 'page-car-detail',
  templateUrl: 'car-detail.html',
})
export class CarDetailPage {
  
  public car;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public carProvider: CarProvider,
    public mycartProvider: MycartProvider,
    private alertCtrl: AlertController,
    
  ) {

  }

  ionViewDidLoad() {
    let ID = this.navParams.get('ID');    // التقاط المعرف  
    if(ID){
      ID = Number(ID);                    // تحويل المعرف الى صيغة رقمية
      this.carProvider.getCarByID(ID)     // التواصل مع ملف الخدمة
        .subscribe(
            result => {
              let response:any = result; 
              response.forEach(item => {  //  عمل حلقة على مصفوفة السيارات لتحديد السيارة المستهدفة
                if(item.id == ID){
                  this.car = item; 
                  console.log(this.car);
                }
              });
            },
            error => {
                console.log(error);
            }
       );
    }
  }


  // هدا الحدث يتم تنفيده بعد الضغط على زر الاضافة الى السلة
  addToCart(car:any) {
    this.mycartProvider.addItem(car).then(
      data =>{
        this.presentAlert(); // دالة  تقوم بعرض نافدة تعطي لك رسالة بنجاح الاضافة بعد الضغط على الزر
      });
   }

 // دالة  تقوم بعرض نافدة تعطي لك رسالة بنجاح الاضافة بعد الضغط على الزر
  presentAlert() {
    let alert = this.alertCtrl.create({
      title: 'Add to Cart',
      subTitle: 'Item was added successfully',
      buttons: ['Close']
    });
    alert.present();
  }
  
  cart(){  // نرسل قيمة المعرف عبر المسار الى صفحة التفاصيل
    this.navCtrl.push(CartPage);
  }
  
}

  
  

هده الدالة presentAlert تقوم باستعراض نافدة بالتطبيق مباشرة عند نجاح اضافة السيارة الى السلة 

بالنسبة لمحتوى ملف car-detail.html

<ion-header>
  <div class="main-header">
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title *ngIf='car'>
      <strong>{{ car.reference }}</strong> {{ car.brand }}
    </ion-title>
 
    <ion-buttons end>
      <button ion-button tappable (click)="account()">
        <ion-icon name="person"></ion-icon>
      </button>
      <button ion-button tappable (click)="cart($event)">
          <ion-icon name="ios-cart"></ion-icon>
        </button>
    </ion-buttons>
</ion-navbar>
</div>
</ion-header>



<ion-content>
  <ion-card *ngIf='car'>
    <img [src]="car.image">
  
    <ion-card-content>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
    <ion-row padding-top class="description">
      <ion-col col-6>
        <strong> Modele  </strong>
      </ion-col>
      <ion-col col-6>
         {{ car.reference }} - {{ car.brand }}
      </ion-col>
      <ion-col col-6>
        <strong> Engine  </strong>
      </ion-col>
      <ion-col col-6>
        1.6 MPi 110 ch
      </ion-col>

      <ion-col col-6>
        <strong>Energy</strong>
      </ion-col>
      <ion-col col-6>
        Gasoline
      </ion-col>

      <ion-col col-6>
        <strong>Power</strong>
      </ion-col>
      <ion-col col-6>
        110 ch
      </ion-col>
      <ion-col col-6>
        <strong>Displacement</strong>
      </ion-col>
      <ion-col col-6>
        1598 cc
      </ion-col>

      <ion-col col-6>
        <strong>Max speed</strong>
      </ion-col>
      <ion-col col-6>
        Max speed
      </ion-col>
    </ion-row>
  </ion-card-content>  
  </ion-card>
</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="flash" (click)="OrdersList()"></ion-icon>
           Orders List
        </button>
      </ion-col>
      <ion-col>
        <button color="secondary"  ion-button icon-left small full menuClose (click)="addToCart(car)">
          <ion-icon name="cart"></ion-icon>
          Add to Cart
        </button>
      </ion-col>
    </ion-row>
    
	</ion-toolbar>
</ion-footer>

طبعا قد تلاحظ بيانات الجدول  ثابثة حيث لم نجلبها من ملف json  ...بامكانك اضافة تلك المتغيرات الى ملف الـ json  واضافتها بالجدول للمزيد من الديناميكية .اترك لك تجربة دلك للمزيد من التمرن

نضيف تسيق الـ css الخاص بصفحة الوصف 

نتوجه الى ملف car-detail.scss  ونضع  التالي

page-car-detail {
    
    ion-content{
        background: -webkit-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
        background: -moz-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
        background: -o-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
        background: linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
  
    }

    ion-card{

        .description {
            ion-col {
                color: #3c3c3c;
                border: 1px solid #ababab;
                margin-bottom: -1px;
                margin-right: -1px;
            }
        }

    }
   

}

ion-footer{
    .toolbar-background{
        background: -webkit-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
        background: -moz-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
        background: -o-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
        background: linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%) !important;
    }
}

النتيجة على المتصفح