I have a product page that shows a list of products by clicking one on the product page with more information about it, as well as a purchase button that sends the user to the checkout page where I want to get the price, as well as the name of the item and image. But I just donβt know how I can achieve this.
My templates look like this:
<script type="text/x-handlebars" data-template-name="product">
<div id="product">
<img {{bindAttr src="img"}}/>
<div class="details">
<p class="title">{{title}}</p>
<span class="price">${{price}}</span>
<p class="desc">
{{desc}}
</p>
{{#link-to 'checkout' product classNames="buy"}}Buy This Item{{/link-to}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="checkout">
<h1>Checkout Page</h1>
<p>{{price}}</p>
</script>
And the product route code looks like this:
App.ProductsRoute = Ember.Route.extend({
model: function(){
return this.store.findAll('product');
}
});
And my shift model looks like this:
App.Product.FIXTURES = [
{
id: 1,
title: 'Black Shirt Mens',
img: 'img/black-shirt-mens.jpg',
price: 36,
desc: 'Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper.',
type: 'shirt'
},
{
id: 2,
title: 'Black Shirt Womens',
img: 'img/black-shirt-womens.jpg',
price: 24,
desc: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
type: 'shirt'
},
{
id: 3,
title: 'You Are Not a Mistake Poster',
img: 'img/mistake-poster.jpg',
price: 28,
desc: 'Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
type: 'poster'
},
{
id: 4,
title: 'White Shirt Mens',
img: 'img/white-shirt-mens.jpg',
price: 42,
desc: 'Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
type: 'shirt'
},
];
If you need a router object for clarity here, it ...
App.Router.map(function() {
this.resource('products');
this.resource('shirts',{path: 'products/shirts'});
this.resource('product', { path: 'products/:product_id' });
this.resource('checkout');
});