صفحة 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;
}
}
النتيجة