Displaying product information

With our product loading, filtering, and error-catching in place, we can proceed with displaying the information we need for our product. Each product could contain one or many images, and one or many variations and any combination in-between – so we need to make sure we cater for each of these scenarios.

To see the data available to us, add a console.log(product) just before the return:

product() {
  let product;

  if(Object.keys(this.$store.state.products).length) {
    product = this.$store.state.products[this.$route.params.slug];
    if(!product) {
      this.productNotFound = true;
    }
  }

console.log(product);
  return product;
}

Open up the JavaScript console and inspect the object that should now be there. Familiarize yourself with the keys and values available to you. Take note that the images key is an array and the variations an object, containing a string and a further array.

Before we tackle the variations and images – let's output the simple stuff...