Using Vue-Router Dynamic Routes to Load Data Chapter 9for(let a in variants) {
output.push(`<b>${variants[a].name}:</b> ${variants[a].value}`);
}return output.join(' / ');
},addToBasket(variation) {
alert(`Added to basket: ${this.product.title} -
${this.variantTitle(variation)}`);
}}
};Note the template literals used within the alert box – this allows us to use Javascript
variables without having to use string concatenation techniques. Clicking on the Add to
basket button will now generate a popup listing of the name of the product and the
variation clicked.
Displaying variations in a select box
A more common interface pattern on product pages is to have a drop-down list, or select
box, with your variations displayed and available for selecting.
When using a select box, we will have a variation which has either been selected by default
or that the user has interacted with and chosen specifically. Because of this, we can change
the image when the user changes the select box and display other pieces of information
about the variant on the product page, including price and quantity.
We won't be relying on passing through the variant to the addToBasket method, as it will
exist as an object on the product component.
Update your