Making Our Application's Home Page

Homepage

In an e-commerce website, a home page normally consists of eye-catching banners, product categories, featured products, and product promotion ads. It also has a navbar to navigate through the store, a search bar to search products, and a footer. Our home page will have the following UI components:

• Navbar: The navbar contains the links to the following routes:

  • The home page route
  • The admin page route
  • The cart page route

• Image/carousel: This component makes elements more presentable.

• Categories: These allow the users to view products by category.

The index template

Before adding these components, we first need to understand the index template. Every route in the Ember application has an index route that can have an index template. Let’s understand this with our use case. We have an application route and template that act as our homepage. Now, we want to add a navbar to our home page. Our navbar should be visible on all our routes. To implement this, we need the application route’s index template. Let’s render our navbar in the application.hbs template. All the other things will go in the index.hbs template. Now, let’s implement this.

Creating a home page

We add the following code in our application.hbs file to add the navbar: