apiKey

authDomain

databaseURL

projectId

storageBucket

messagingSenderId

appId

Gain insights into Ember.js, explore templates, components, routing, and testing. Delve into building a complete e-commerce app and integrate with Firebase to leverage Ember's features robustly.

tarball.tar.gz

FirstApp

templateIntro

stylingtemplate

addingbootstrap

completehomepage

Challenge

Settinguproutes

Modifyingroutes

notfoundroute

nestedroutes

dynamicroutes

categoryroute

addroute

components

controller

Firebase

helpers

services

tests

Ember.js is a JavaScript framework for building scalable web applications with discrete components.

In this course, practicing JavaScript developers will be introduced to the Ember.js framework. You’ll start by setting up Ember and creating a project application. You’ll continue with the building blocks of Ember.js, including templates, components, routing, services, helpers, Ember Data, and testing. You’ll then use the components to build a complete e-commerce application from scratch. Each lesson will add more depth and functionality to your application with hands-on exercises. Finally, you’ll integrate the application with Firebase.

By the end of the course, you’ll be prepared to leverage Ember’s key features to develop robust web applications.

Developing Robust Web Applications with Ember.js

We need to specify the number of products in the cart. This functionality can be implemented by updating `cart-service`.

# Updating the `cart-service` file

 Let’s open the `app/services/cart-service.js` file and add the required functionality:

//app/services/cart-service.js
import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';
class Product {
    @tracked count;
    product_id;
    title;
    desc;
    source;
    price;
  
    constructor(product) {
      this.product_id = product.product_id;
      this.count = product.count;
      this.title = product.title;
      this.desc = product.desc;
      this.source = product.source;
      this.price = product.price;
      this.total = product.total;
    }
  }
  

export default class CartServiceService extends Service {
  @tracked productsList = [];

  addProduct(product) {

    const existingProduct = this.productsList.find(({ product_id }) => {
      return product_id == product.product_id
    });


    if (existingProduct) {
      existingProduct.count += 1;
      existingProduct.total = existingProduct.price* existingProduct.count;
    }
    else {
      this.productsList = [
        ...this.productsList,
        new Product({
          ...product,
          count: 1,
          total : product.price
        }),
      ];
    }
  }
}


- **Lines 4–20:** We create a class named `Product` and initialize all the values:
  - **Line 5**: We create a tracked property named `count` to hold the count of the products.
  - **Lines 6–10**: We define all the attributes of our product.
  - **Lines 12–20**: We initialize all the product attributes by using the constructor of the `Product` class.
- **Lines 29–31**: In the `addToCart` action, we search for the received product using the `find()` method of the array. We return a check named `existingProduct` and decide if we need to update the count or add the product to the cart.
- **Lines 34–37**: We specify an `if` condition based on `existingProduct`. If a product is already in the `productList`, we update its `count` and update the `total` price. Otherwise, we add the product to the `productList`.
- **Lines 38–47**: We define our `else` block that runs when the product doesn’t exist in the `productList`. We set the `count` of the new product as `1`, and the total is equal to the actual price of the product.


# Updating count in template
In the next step, we need to use `count` and `total` in the `cart` template. Let’s open the `app/templates/cart.hbs` template in the code widget and add the required changes:

Learn to update product count in the cart using a service.

Updating the Count of Products in Cart

Course Overview

Getting Started with Ember

Templates in Ember

Routing in Ember

Nested Routing

Components in Ember

Controllers in Ember

Ember Data

Integration with Firebase

Helpers

Services in Ember

Testing in Ember

Conclusion

Ember.js Assessment

Updating the Count of Products in Cart

Updating the `cart-service` file

Ember.js Assessment

Updating the Count of Products in Cart

Updating the cart-service file

Updating the `cart-service` file