Add, remove shoppingcart services

1

Tried to connect two pages ‘product.hbs’ where people could add items to shopping cart and ‘checkout.hbs’ where added items should be shown. Anyone here who knows how to get this done.

//services/product.js import Service from ‘@ember/service’;

export default Service.extend({ products: ,

init() {
	this._super(...arguments);
	this.set('products', []);
},
add(product) {
	this.get('products').pushObject(product);
},
remove(product) {
	this.get('products').removeObject(product);
},
empty() {
	this.get('products').clear(); 
}

});

//templates/product.hbs

I am Product

{{appName}}

{{#each model as | product|}}

{{product.title}}

{{product.owner}}

{{product.city}}

{{product.price}}

<button {{action "add" product}}>Add</button>
{{/each}}

{{outlet}}

//controller/product.js

import Ember from ‘ember’; const { service } = Ember.inject;

export default Ember.Controller.extend({
appName: “ShoppingCart”, products: , actions: { add(product) { this.get(‘products’).pushObject(product); } } });

//components/checkout.js

import Component from ‘@ember/component’; import Ember from ‘ember’; import { inject as service } from ‘@ember/service’;

export default Ember. Component.extend({ cart: Ember.inject.service(‘checkout’),

actions: {
	remove(index) {
		this.get('cart').remove(product);
	}
}

});

//templates/checkout.hbs

I am Checkout

{{outlet}}

    {{#each cart.products as |product index| }} X
  • {{product.title}}
  • {{product.owner}}
  • {{product.city}}
  • {{product.price}}
    • {{/each}}
2

I dont know the answer to your question but I expect it would help others to answer if you could improve the formatting of your code and state what problems you are experiencing (error messages etc?) with your current code.