- 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 👏 Inspiration below.
- Note: to open web links in a new window use: ctrl+click on link
- 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.
- Ionic/angular v8
- Angular v17
- rxjs v7 reactive programming.
- RxJS Behavior subject to represent the event stream of product cart updates.
- animate.css v4 a library of CSS animations.
npm ito install dependenciesionic serveto 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.
- 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);
}- Animate.css used to animate items.
- Status: Working.
- To-do: add a backend product list. Add to functionality, including a checkout and payment function.
- 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).
- This project is licensed under the terms of the MIT license.
- Repo created by ABateman, email:
gomezbateman@gmail.com