Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1
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
}
Free download pdf