Data-down component

components.bill-comp\.js

import Component from '@ember/component';

export default Component.extend({
});

components.list-item\.js

import Component from '@ember/component';

export default Component.extend({
});

components.page-footer\.js

import Component from '@ember/component';

export default Component.extend({
  
  classNames: ['footer'],
  
  showOfferDetails: false,
  
  offerMessage: '2 minutes only left!  Buy Hurry.!! Limited time Offer of 50% '
});

components.shopping-cart\.js

import Component from '@ember/component';

export default Component.extend({
});

controllers.application\.js

import Controller from '@ember/controller';
import object from "@ember/object";
import { A } from '@ember/array';

export default Controller.extend({
  
  routeList: A(),
  
  isOfferEnabled: false,
  
  init(){
    
    this._super(...arguments);
    this.getUserWalletDetails();
    this.pushCollectionToStore();
    
  },
  
  getUserWalletDetails(){
    
		this.store.createRecord('wallet', {balance: 100});
  },
  
  pushCollectionToStore(){
    
    let mensWear = this.getCollectionList();
    
    // Pushing `Shirts` to Ember Store 
    mensWear.shirts.forEach(( collectionObj ) => {
    
			this.store.createRecord('shirt', collectionObj);
    });

    // Pushing `Foot Wears` to Ember Store
    mensWear.footwears.forEach(( collectionObj ) => {
    
			this.store.createRecord('footwear', collectionObj);
    });

    // Pushing `Watches` to Ember Store
    mensWear.watches.forEach(( collectionObj ) => {
    
			this.store.createRecord('watch', collectionObj);
    });
  },
  
  getCollectionList(){
    
    let mensWear = object.create({

        shirts: A([ 

          object.create({
            brand: 'OTTO',
            availability: 2,
            price: 5,
            countInCart: 0
          }),

          object.create({
            brand: 'Peter England',
            availability: 8,
            price: 7,
            countInCart: 0
          }),

          object.create({
            brand: 'Raymond',
            availability: 20,
            price: 10,
            countInCart: 0
          }),

          object.create({
            brand: 'POLO',
            availability: 10,
            price: 6,
            countInCart: 0
          }),

          object.create({
            brand: 'Allen Solly',
            availability: 15,
            price: 5,
            countInCart: 0
          }),

          object.create({
            brand: 'Levis',
            availability: 8,
            price: 4,
            countInCart: 0
          })

        ]),

        footwears : A([ 

          object.create({
            brand: 'Nike shoes',
            availability: 6,
            price: 8,
            countInCart: 0
          }),

          object.create({
            brand: 'Brooks',
            availability:11,
            price: 7,
            countInCart: 0
          }),

          object.create({
            brand: 'topo',
            availability: 3,
            price: 10,
            countInCart: 0
          }),

          object.create({
            brand: 'Adidas',
            availability: 30,
            price: 12,
            countInCart: 0
          }),

          object.create({
            brand: 'PUMA',
            availability: 12,
            price: 16,
            countInCart: 0
          }),

          object.create({
            brand: 'Reebok',
            availability: 4,
            price: 6,
            countInCart: 0
          })
        ]),

        watches : A([ 

          object.create({
            brand: 'TITAN',
            availability: 6,
            price: 18,
            countInCart: 0
          }),

          object.create({
            brand: 'EBEL',
            availability:11,
            price: 7,
            countInCart: 0
          }),

          object.create({
            brand: 'OMEGA',
            availability: 3,
            price: 10,
            countInCart: 0
          }),

          object.create({
            brand: 'ROLEX',
            availability: 30,
            price: 20,
            countInCart: 0
          }),

          object.create({
            brand: 'PUMA',
            availability: 12,
            price: 10,
            countInCart: 0
          }),

          object.create({
            brand: 'FASTRACK',
            availability: 3,
            price: 11,
            countInCart: 0
          })
        ])
      });
    
    return mensWear;
  }
});

controllers.cart\.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default Controller.extend({
  
  shopkeeper: service(),
  
  canRemoveFromCart: true
  
});

controllers.menswear.accessories\.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default Controller.extend({
  
  shopkeeper: service(),
  
  canAddToCart: true,
  
  canRemoveFromCart: true
});

controllers.menswear.footwears\.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default Controller.extend({
  
	shopkeeper: service(),
  
  canAddToCart: true,
  
  canRemoveFromCart: true
  
});

controllers.menswear.shirts\.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default Controller.extend({
  
  shopkeeper: service(),
  
  canAddToCart: true,
  
  canRemoveFromCart: true
  
});

controllers.menswear\.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { set } from "@ember/object";

export default Controller.extend({
  
  shopkeeper: service(),
  
  userNavigatedTo: '',
  
  canAddToCart: false,
  
  canRemoveFromCart: false,
  
  showWalletBalance: true,
  
  userWallet: null,
  
  canCalculateBill: true,
  
  showCartItems: false,
  
  init() {
   
    this._super(...arguments);
    
    if (this.showWalletBalance) {
      
      let userWallet = this.store.peekAll('wallet').firstObject;
      set(this, 'userWallet', userWallet);
    }
  },
  
  actions: {
  
	  toggleCart(){
     	 this.toggleProperty('showCartItems');
    }
  }
  
});

controllers.userwallet\.js

import Controller from '@ember/controller';

export default Controller.extend({
});

models.collection\.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';

export default Model.extend({

  brand: attr('string'),
	availability: attr('number'),
	price: attr('number'),
	countInCart: attr('number'),
  type: attr('string')

});

models.footwear\.js

import CollectionModel from './collection';
export default CollectionModel.extend();

models.shirt\.js

import CollectionModel from './collection';
export default CollectionModel.extend();

models.wallet\.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';

export default Model.extend({

  balance: attr('number')
  
});

models.watch\.js

import CollectionModel from './collection';
export default CollectionModel.extend();

router\.js

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
    
	this.route('userwallet', {path:'wallet'});
  
	this.route('menswear', function() {	
    
    this.route('shirts');
    this.route('footwears');
    this.route('accessories');
  });
  
	this.route('cart', function() {	
    
    this.route('billing');
  });
  
	this.route('offer');
});

export default Router;

routes.application\.js

import Route from '@ember/routing/route';

export default Route.extend({
  
  afterModel(){
		this.transitionTo('userwallet'); 
    // this.transitionTo('menswear.shirts'); 
  }
});

routes.cart.billing\.js

import Route from '@ember/routing/route';

export default Route.extend({
});

routes.cart\.js

import Route from '@ember/routing/route';
import object from "@ember/object";

export default Route.extend({

  model(){
    
    return [	this.store.peekAll('shirt'),
            	this.store.peekAll('footwear'),
            	this.store.peekAll('watch')
			    ];
  }
  
  
});

routes.menswear.accessories\.js

import Route from '@ember/routing/route';

export default Route.extend({
  
	model(){
    
    return this.store.peekAll('watch');
  },
  
  actions: {
   
    didTransition(){
     
			this.send("navigateTo", 'Watches & Accessories');
    }
  }
  
});

routes.menswear.footwears\.js

import Route from '@ember/routing/route';

export default Route.extend({
	
  model(){
    
    return this.store.peekAll('footwear');
  },
  
  actions: {
   
    didTransition(){
     
			this.send("navigateTo", 'Foot wears');
    }
  }
  
});

routes.menswear.shirts\.js

import Route from '@ember/routing/route';

export default Route.extend({
  
  model(){
    
    return this.store.peekAll('shirt');
  },
  
  actions: {
    
    didTransition(){
     
			this.send("navigateTo", 'Shirts');
    }
    
  }
  
});

routes.menswear\.js

import Route from '@ember/routing/route';
import object, { get, set } from "@ember/object";
import { A } from '@ember/array';

export default Route.extend({
  
  model(){
    
    return [	this.store.peekAll('shirt'),
            	this.store.peekAll('footwear'),
            	this.store.peekAll('watch')
			    ];
  },
  
  actions: {
   
    didTransition(){
      
      this.send('navigateTo', '');
      this.send('updateRouteList');
    },
    
    navigateTo( section ){
      
      set(this.controller, 'userNavigatedTo', section);
    },
    
    updateRouteList(){
      
      let routeList = A([ 
        object.create({
          path: 'menswear.shirts',
          name: 'Shirts'
        }),
        object.create({
          path: 'menswear.footwears',
          name: 'Foot wears'
        }),
        object.create({
          path: 'menswear.accessories',
          name: 'Watches & Accessories'
        })
      ]);

      set(this.controllerFor('application'), 'routeList', routeList);
	  },
    
		willTransition(transition){

			if(transition.to.name.indexOf('menswear') === -1){
				A(get(this.controllerFor('application'), 'routeList')).clear();
			}
    }
  }
  
});

routes.offer\.js

import Route from '@ember/routing/route';

export default Route.extend({
});

routes.userwallet\.js

import Route from '@ember/routing/route';

export default Route.extend({
  
  model(){
   
    return this.store.peekAll('wallet').firstObject;
  }
});

services.shopkeeper\.js

import Service from '@ember/service';
import { action, set } from '@ember/object';
import { inject as service } from '@ember/service';

export default Service.extend({
  
  store: service(),
  
  addItemToCart: action( function(selectedItem){
     
      if ( selectedItem.availability !== selectedItem.countInCart) {
				set(selectedItem, 'countInCart', selectedItem.countInCart+1);
      }
	}),
  
	removeItemFromCart: action( function(selectedItem) {

		set(selectedItem, 'countInCart', selectedItem.countInCart-1);
	}),
    
  autoGenerateBill: action( function(){
	}),
    
	getItemDetails: action( function(){
	})
  
});

styles.app\.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.parent-container {
	display: flex; 
}

h1 {
 font-family: fantasy; 
}

.p-10 {
  padding: 10px;
}

.inline-block {
	display: inline-block; 
}

.font-grey {
	color: grey;
}

li {
 padding: 10px;
}

.left-panel {
  border-right: 1px solid green;
  height: 500px;
  margin-left: 10px;
  padding-right: 10px;
  width: 20%;
}

.right-panel {
  margin-left: 30px;
  width: 75%;
}

.left-panel a {
    color: #0060B6;
    text-decoration: none;
}

.left-panel a:hover, .left-panel a.active {
		font-size: 21px;
    color:#00A0C6; 
    text-decoration:none; 
    cursor:pointer;  
}

.show-cart-btn {
	padding: 5px 8px;
  border-radius: 6px;
  font-size: 16px;
  font-style: italic;
	float: right;
  cursor: pointer;
  background: #fbfbfb;
}

.collection-container.adjust {
	display: flex; 
}

.collection-container {
	height: 350px;
}
.collection-list-container.adjust {
	width: 60%;
}
.side-pane {
	width: 35%;
	border: 1px solid #ececec;
	margin-left: 30px;
  background: #fbfbfb;
  padding: 5px;
  border-radius: 6px;
}

#menswear span a {
    color: black;
    text-decoration: none;
}

#menswear div li {
  color: grey;
  user-select: none;
  display: inline-block;
}

#menswear div li b {
  font-size: 15px;
  margin-left: 20px;
}

 #menswear div li .remove-icon {
	font-size: 13px;
	position: relative;
}

.hover-show {
  display: none;
}

#menswear div li i {
  color: red;
  font-size: 14px;
}

#menswear div li:hover .hover-show{
  display: inline-block;
}

#menswear div li:hover {
  color: black;
  cursor:grab;  
}

#menswear div li:hover .grey{
  color: grey;
}

#menswear div li.disabled:hover {
  color: grey;  
  cursor:no-drop;  
}

.right-panel a {
    color: #0060B6;
    text-decoration: none;
}

.right-panel a:hover, .right-panel a.active, #menswear span a:hover {
		font-size: 18px;
    color:#00A0C6; 
    text-decoration:none; 
    cursor:pointer;  
}

.info {
	padding: 10px;
	font-size: 14px;
  border-left: 4px solid #ccc!important;
  border-color: #219cf3!important;
	color: #000!important;
	background-color: #ddefff!important;
  border-radius: 6px;
  box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%); 
}
  
#cart .info, .cart-list .info {
  border-color: #f3cf21!important;
  color: #000!important;
  background-color: #ffeddd!important;
}

.cart-list {
	height: calc(100vh - 350px)!important;
	overflow: auto;
	overflow-x: hidden; 
}

.order-btn {
	position: absolute;
	right: 60px;
	padding: 10px 25px 10px 25px;
	background: #d6efe0;
	border: 1px solid #70b58e;
	font-family: serif;
	font-size: 18px;
	border-radius: 12px;  
  margin-top: 15px;
}

.order-btn a:hover {
  font-size: 18px;
}

.footer {
  position: sticky;
  top: 85%;
  width: 75%;
}

.cursor-pointer {
	cursor: pointer;
}

.footer a:hover, .footer a.active {
	color: #0060B6;
	font-size: 16px;
	text-decoration: none;
}

marquee {
	color: brown;
  margin: 18px 200px;
}

templates.application\.hbs

<h1> <center> Men's Clothing - Online shop </center></h1>
<hr>
<br>

<div class="parent-container">
  <div class='left-panel'>

    <div>
      <h3> 🏦 {{#link-to 'userwallet'}} Your wallet {{/link-to}} </h3>
    </div>
    <hr>

    <div style="cursor:pointer">
      <h3> 👕 {{#link-to 'menswear'}} Men's wear {{/link-to}} </h3>
    </div>
    <hr>

    <div style="cursor:pointer">
      <h3> 🛒 {{#link-to 'cart'}} Cart items & Billing {{/link-to}}</h3>
    </div>
    <hr>

    <div style="cursor:pointer">
      <h3>🛍 {{#link-to 'offer'}} Offers {{/link-to}}</h3>
    </div>

    <hr>
  </div>
  
  <div class='right-panel'>
  	{{outlet}}
    
    <PageFooter 
    	@otherRoutes={{routeList}} 
      @showOfferDetails={{isOfferEnabled}}
     />
    
  </div>
</div>

<br>
<br>

templates.cart.billing\.hbs

<div id='billing'> 

  <h3> Billing <br></h3>
  
  Purchased items : 

	<ol>
  	<li>SMA</li>
  </ol>
  
</div>

templates.cart\.hbs

<div id='cart'> 

  <h3 class='inline-block'> Cart </h3> 
  
  <div class='order-btn inline-block cursor-pointer'> 
  
  	{{#link-to 'cart.billing'}} Place Order {{/link-to}}
  </div>
  
  <br>
  
  <i class='font-grey'> ( You can add / remove the items )</i>
  <br><br><br>

	<ShoppingCart
		@cartItems={{model}}
		@canAddToCart={{canAddToCart}}
    @canRemoveFromCart={{canRemoveFromCart}}
    @removeItemFromCart={{shopkeeper.removeItemFromCart}}
    @userWallet={{userWallet}}
    @showWalletBalance={{showWalletBalance}}
    @canCalculateBill={{canCalculateBill}}
    @autoGenerateBill={{shopkeeper.autoGenerateBill}}
    />
</div>

templates.components.bill-comp\.hbs

{{yield}}

templates.components.list-item\.hbs

<li class="{{if item.availability '' 'disabled'}}"> 

{{#if canAddToCart}}
  <span class="p-10" {{action this.addItemToCart item}}>
      {{item.brand}} 

      {{#if item.availability}}
        ( {{item.availability}} )
      {{else}}
        ( <i> Sold </i> )
      {{/if}}

      <b class="{{if item.countInCart '' 'hover-show'}}"> ${{item.price}} </b>
      &nbsp;&nbsp;
    </span>
{{else}}

	<span class="p-10">
		{{item.brand}} ( {{item.availability}} )
		<b> ${{item.price}} </b>
	</span>
{{/if}}
  
	{{#if canRemoveFromCart}}

		{{#if item.countInCart}}
			<span class="{{if item.countInCart '' 'hover-show'}} remove-icon cursor-pointer" title='Remove from cart' {{action this.removeItemFromCart item}}> ⛔️ &nbsp;&nbsp; </span> <span class='grey'> [ In Cart : {{item.countInCart}} ]  </span>
    {{/if}}
    
	{{/if}}
</li>

templates.components.page-footer\.hbs

{{#if otherRoutes.length}}
	<hr>
{{/if}}

{{#each otherRoutes as |toRoute index|}}

	{{#if index}} &nbsp;&nbsp;|&nbsp;&nbsp; {{/if}}
	{{#link-to toRoute.path }} {{toRoute.name}} {{/link-to}} 

{{/each}}

{{#if showOfferDetails}}
	<marquee width="50%" left="20%"> 
  	 <i> {{offerTime}} {{offerMessage}}</i> 
	</marquee>
{{/if}}

templates.components.shopping-cart\.hbs

<div class='cart-list'>

	<b>Added items : </b><br>
	{{#each cartItems as |collectionList| }}

		{{#each collectionList as |item|}}

			<!-- Iterating the cart items -->
			{{#if item.countInCart}}
        <ListItem 
          @item={{item}}
          @canAddToCart={{canAddToCart}} 
          @canRemoveFromCart={{canRemoveFromCart}} 
          @canSaveForLater={{canSaveForLater}}
          @addItemToCart={{addItemToCart}}
          @removeItemFromCart={{removeItemFromCart}}
        />
       {{/if}}
		{{/each}}
		<br>
	{{/each}}
  
</div>

templates.menswear.accessories\.hbs

<ul>
	{{#each model as |watch|}}

			<ListItem 
    	@item={{watch}}
      @canAddToCart={{canAddToCart}}
      @canRemoveFromCart={{canRemoveFromCart}} 
      @showOfferDetails={{showOfferDetails}}
      @offerDetails={{offerDetails}}
      @showOfferItemsOnly={{showOfferItemsOnly}}
      @addItemToCart={{shopkeeper.addItemToCart}}
      @removeItemFromCart={{shopkeeper.removeItemFromCart}}
      @canShowItemDetails={{canShowItemDetails}}
      @getItemDetails={{shopkeeper.getItemDetails}}
     /> 
	{{/each}}
</ul>

templates.menswear.footwears\.hbs

<ul>
	{{#each model as |footwear|}}

			<ListItem 
    	@item={{footwear}}
      @canAddToCart={{canAddToCart}}
      @canRemoveFromCart={{canRemoveFromCart}} 
      @showOfferDetails={{showOfferDetails}}
      @offerDetails={{offerDetails}}
      @showOfferItemsOnly={{showOfferItemsOnly}}
      @addItemToCart={{shopkeeper.addItemToCart}}
      @removeItemFromCart={{shopkeeper.removeItemFromCart}}
      @canShowItemDetails={{canShowItemDetails}}
      @getItemDetails={{shopkeeper.getItemDetails}}
     /> 
	{{/each}}
</ul>

templates.menswear.shirts\.hbs

<ul>
	{{#each model as |shirt|}}

		<ListItem 
    	@item={{shirt}}
      
      @canAddToCart={{canAddToCart}}
      @canRemoveFromCart={{canRemoveFromCart}} 
     
      
      @addItemToCart={{shopkeeper.addItemToCart}}
      @removeItemFromCart={{shopkeeper.removeItemFromCart}}
      @canShowItemDetails={{canShowItemDetails}}
      @getItemDetails={{shopkeeper.getItemDetails}}
     /> 

	{{/each}}
</ul>

templates.menswear\.hbs

<div id='menswear'> 

	{{#if userNavigatedTo}}
  	<h3> 
    	<span {{action "navigateTo" ''}}>{{#link-to 'menswear' title="Go Back"}} Men's Wear {{/link-to}} </span> > {{userNavigatedTo}}<br>
    </h3>
  
  {{else}}
  
		<h3> Men's Wear <br></h3>
    <ul>
      <li> {{#link-to 'menswear.shirts' }} Shirts & T-shirts {{/link-to}} </li>
      <li> {{#link-to 'menswear.footwears'}} Foot wears {{/link-to}} </li>
      <li>{{#link-to 'menswear.accessories'}} Watches and Accessories  {{/link-to}}</li>
    </ul>
	{{/if}}
  
  <div class='collection-container {{if showCartItems 'adjust'}}'>
  	
    <div class='collection-list-container {{if showCartItems 'adjust'}}'>
      
      {{#if userNavigatedTo}}
        <div class='info'> 
           <i> Click on the item &nbsp; - </i> &nbsp;&nbsp; 🛒 &nbsp; Add to cart
           <b class='show-cart-btn' {{action 'toggleCart'}}> 
           {{#if showCartItems}} Hide cart {{else}} Show cart {{/if}}
            </b> 
        </div>
      {{/if}}

      {{outlet}} 
    </div>
    
    {{#if (and userNavigatedTo showCartItems)}}
      <div class='side-pane'>
          <ShoppingCart
          	@cartItems={{model}}
            @canAddToCart={{canAddToCart}}
            @canRemoveFromCart={{canRemoveFromCart}}
            @userWallet={{userWallet}}
            @showWalletBalance={{showWalletBalance}}
            @canCalculateBill={{canCalculateBill}}
            @autoGenerateBill={{shopkeeper.autoGenerateBill}}
          />
     </div>
   {{/if}}
   
	</div>
</div>

templates.userwallet\.hbs

<div id='menswear'> 

  <h3> Your Wallet <br></h3>
  
  Wallet Balance : ${{model.balance}}
  
</div>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.11.1",
    "ember-template-compiler": "3.11.1",
    "ember-testing": "3.11.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-truth-helpers": "2.0.0",
    "ember-data": "3.11.5"
  }
}