Building an E-Commerce Store - Browsing Products Chapter 10
let price = '$' + Math.min(...prices);
if(prices.length > 1) {
price = 'From: ' + price;
}
return price;
}
Add your productPrice method to your template, remembering to
pass product.variationProducts into it. The last thing we need to add to our template
is a link to the product:
<ol :start="pagination.range.from + 1">
<li v-for="product in paginate(products)" v-if="product">
<router-link :to="'/product/' + product.handle">
<img v-if="product.images[0]" :src="product.images[0].source"
:alt="product.title" width="120">
</router-link>
<h3>
<router-link :to="'/product/' + product.handle">
{{ product.title }}
</router-link>
</h3>
<p>Made by: {{ product.vendor.title }}</p>
<p>Price {{ productPrice(product.variationProducts) }}</p>
</li>
</ol>
Ideally, the product links should use a named route and not a hardcoded link, in case the
route changes. Add a name to the product route and update the to attribute to use the
name instead:
{
path: '/product/:slug',
name: 'Product',
component: ProductPage
}