@chiholiu wrote:

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}}

Posts: 1

Participants: 1

Read full topic