:zap: Ionic Angular Cart

• Ionic app to show a shopping cart where the user can select items and see them added to a cart.
• Items can also be removed and the total price and product quantities will be updated.
• This is another great tutorial from Simon Grimm - see :clap: Inspiration below.
• Note: to open web links in a new window use: ctrl+click on link

:page_facing_up: Table of contents

• :zap: Ionic Angular Cart
  • :page_facing_up: Table of contents
  • :books: General info
  • :camera: Screenshots
  • :signal_strength: Technologies
  • :floppy_disk: Setup
  • :computer: Code Examples
  • :cool: Features
  • :clipboard: Status & To-do list
  • :clap: Inspiration
  • :file_folder: License
  • :envelope: Contact

:books: General info

• modal used to show shopping cart contents: product quantities can be increased or decreased and total price will be adjusted using a simple reduce function.
• animate.css used to provide some fun visual effects when items are added to the cart and when the cart modal is activated and dismissed. There are options to control delays, speed of animation etc.
• tsconfig.json modified to add "skipLibCheck": true, to get round ionicons incompatibility issue with latest Typescript version. This Ionicons issue will be fixed by Ionic.

:camera: Screenshots

:signal_strength: Technologies

• Ionic/angular v7
• Angular v16
• rxjs v7 reactive programming.
• RxJS Behavior subject to represent the event stream of product cart updates.
• animate.css v4 a library of CSS animations.

:floppy_disk: Setup

• npm i to install dependencies
• ionic serve to start the server on localhost://8100
• To start the server on a mobile using Ionic devapp and connected via wifi, type: 'ionic serve --devapp'
• The Ionic DevApp was installed on an Android device from the Google Play app store.

:computer: Code Examples

• Cart service: function to add a product to the shopping cart.

addProduct(product: Product) {
	let added = false;
	for (const item of this.cart) {
		if (item.id === product.id) {
			item.amount += 1;
			added = true;
			break;
		}
	}
	!added
		? this.cart.push(product)
		: this.cartItemCount.next(this.cartItemCount.value + 1);
}

:cool: Features

• Animate.css used to animate items.

:clipboard: Status & To-do list

• Status: Working.
• To-do: add a backend product list. Add to functionality, including a checkout and payment function.

:clap: Inspiration

• Simon Grimm of Devdactic, Youtube video 'How to Build a Shopping Cart with Ionic 4' (2019).
• Written version of tutorial from Simon Grimm of Devdactic (2019).

:file_folder: License

• This project is licensed under the terms of the MIT license.

:envelope: Contact

• Repo created by ABateman, email: [email protected]