Adding the product details page

We're now in a position where we can code in the mechanism to handle the click through to a Property Details page. We will do this over the following page.

Learning Objectives

• Set-up links to the Product Details pages
• Test that each product's details page works

Setting up routing

Step 1

The first step is to create a template that Vue can render on a click of a 'Full details' link. We'll call it Product-Details. Here's the code to add inside main.js:

const ProductDetails = Vue.component('Product-Details', {
  template: `
    <div class="product-details">
      <div class="product-details__main">
        <img
          v-bind:src="getImage(product)"
        />
      </div>
      <aside>
        <h3>{{product.name}}</h3>
        <p>
          {{product.description}}
        </p>
        <p>
          &pound;{{product.price}}
        </p>
        <button v-on:click="addToCart(product)">
          {{product.addedToCart ? "Remove from cart" : "Add to cart"}}
        </button>
      </aside>
    </div>
  `,
});

Step 2

The second step is to add an additional route to our routes object:

{
  path: '/products/:productId',
  name: 'productDetails',
  component: ProductDetails,
},

We've already seen the component field - this tells Vue which component to render - but notice there are some new additions here:

• :productId: this is a dynamic route parameter. We will use the product's unique ID to configure this field

• name: this is a way for us to name the route and to reference it in our router link (more below)

Step 3

The last step is to add a router link and replace the current 'Full details' anchor in our Product component:

<router-link
  v-bind:to="{ name: 'productDetails', params: {productId: product.productId} }"
  class="button--anchor"
>
  Full Details
</router-link>

Here we're binding Vue's to attribute to an object which references our router link via the name we gave it above. It also tells Vue to assign the dynamic productId to be equal to the product's Product ID.

Now if you go back to the home page and hover over the first of the 'Full details' buttons, you should see the link /products/1, where 1 is the ID of the first product.

You should now be able to click the link through to the Product Details page.

You will notice that though the Product Details page gets rendered, no product information is displayed. We will solve this problem in the next lesson.

Assignment - Coding challenge

Part 1

Test each 'Full details' link and try to track down and fix any errors that occur. Verify they're all working before proceeding on to the next lesson.

Part 2

Commit your work to Git! Regular commits to Git will ensure you can revert your code in the event of any issues.