|
|
@@ -1,7 +1,61 @@
|
|
|
const DISABLED = "disabledButton";
|
|
|
|
|
|
-const app = new Vue({
|
|
|
- el: "#app",
|
|
|
+const tpl = ` <div class="product">
|
|
|
+ <div class="product-image">
|
|
|
+ <a :href="link">
|
|
|
+ <!-- bind the src attribute to the "image" property -->
|
|
|
+ <img
|
|
|
+ v-bind:src="image"
|
|
|
+ :alt="description" :title="description"
|
|
|
+ /><!-- :attr is shortcut for v-bind:attr -->
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <div class="product-info">
|
|
|
+ <h1 v-cloak>{{ title }}</h1>
|
|
|
+
|
|
|
+ <h2>Available?</h2>
|
|
|
+ <p v-cloak v-show="inStock">In stock</p>
|
|
|
+ <p v-cloak v-show="!inStock">Out of stock</p>
|
|
|
+ <p>Shipping: {{ shipping }}</p>
|
|
|
+ <h2>Details</h2>
|
|
|
+ <ul>
|
|
|
+ <li v-for="detail in details">{{ detail }}</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <h2>Colors</h2>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(variant, index) in variants"
|
|
|
+ v-bind:key="variant.variantId"
|
|
|
+ @mouseover="updateImage(index)"
|
|
|
+ class="color-box"
|
|
|
+ :style="{ backgroundColor: variant.variantColor }"
|
|
|
+ /><!-- @ est le raccourci de v-on: -->
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <h2>Sizes</h2>
|
|
|
+ <ul>
|
|
|
+ <li v-for="size in sizes" :key="size">{{ size }}</li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <button v-on:click="addToCart"
|
|
|
+ :disabled="!inStock"
|
|
|
+ :class="{ disabledButton: !inStock }"
|
|
|
+ >Add to cart</button>
|
|
|
+ <div class="cart">
|
|
|
+ <p>Cart({{cart}})</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+`;
|
|
|
+
|
|
|
+Vue.component("product", {
|
|
|
+ props: {
|
|
|
+ isPremium: {
|
|
|
+ type: Boolean,
|
|
|
+ required: true,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ template: tpl,
|
|
|
// Computer properties are cached until dependencies change.
|
|
|
// => cheaper than methods.
|
|
|
computed: {
|
|
|
@@ -12,44 +66,46 @@ const app = new Vue({
|
|
|
inStock() {
|
|
|
return this.variants[this.selectedVariant].variantQuantity > 0;
|
|
|
},
|
|
|
- flashSale() {
|
|
|
- if (this.onSale) {
|
|
|
- return `Vente flash ${this.product} ${this.brand}. Plus que 10 minutes!`;
|
|
|
+ shipping() {
|
|
|
+ if (this.isPremium) {
|
|
|
+ return "Free";
|
|
|
}
|
|
|
+ return "2.99 €";
|
|
|
},
|
|
|
title() {
|
|
|
return [this.brand, this.product].join(' ');
|
|
|
}
|
|
|
},
|
|
|
- data: {
|
|
|
- brand: "Vue Mastery",
|
|
|
- cart: 0,
|
|
|
- description: "Chaussettes montantes",
|
|
|
- details: [
|
|
|
- "80% cotton",
|
|
|
- "20% polyester",
|
|
|
- "Gender-neutral",
|
|
|
- ],
|
|
|
- inventory: 15,
|
|
|
- link: "https://www.google.com/search?q=vuejs+socks",
|
|
|
- onSale: false,
|
|
|
- product: "Socks",
|
|
|
- selectedVariant: 0,
|
|
|
- sizes: [34, 36, 38, 40, 42, 44, 46],
|
|
|
- variants: [
|
|
|
- {
|
|
|
- variantId: 2234,
|
|
|
- variantColor: "green",
|
|
|
- variantImage: "./assets/img/vmSocks-green-onWhite.jpg",
|
|
|
- variantQuantity: 10,
|
|
|
- },
|
|
|
- {
|
|
|
- variantId: 2235,
|
|
|
- variantColor: "blue",
|
|
|
- variantImage: "./assets/img/vmSocks-blue-onWhite.png",
|
|
|
- variantQuantity: 0,
|
|
|
- },
|
|
|
- ]
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ brand: "Vue Mastery",
|
|
|
+ cart: 0,
|
|
|
+ description: "Chaussettes montantes",
|
|
|
+ details: [
|
|
|
+ "80% cotton",
|
|
|
+ "20% polyester",
|
|
|
+ "Gender-neutral",
|
|
|
+ ],
|
|
|
+ inventory: 15,
|
|
|
+ link: "https://www.google.com/search?q=vuejs+socks",
|
|
|
+ product: "Socks",
|
|
|
+ selectedVariant: 0,
|
|
|
+ sizes: [34, 36, 38, 40, 42, 44, 46],
|
|
|
+ variants: [
|
|
|
+ {
|
|
|
+ variantId: 2234,
|
|
|
+ variantColor: "green",
|
|
|
+ variantImage: "./assets/img/vmSocks-green-onWhite.jpg",
|
|
|
+ variantQuantity: 10,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ variantId: 2235,
|
|
|
+ variantColor: "blue",
|
|
|
+ variantImage: "./assets/img/vmSocks-blue-onWhite.png",
|
|
|
+ variantQuantity: 0,
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
addToCart(mouseEvent) {
|
|
|
@@ -69,3 +125,10 @@ const app = new Vue({
|
|
|
},
|
|
|
});
|
|
|
|
|
|
+const app = new Vue({
|
|
|
+ el: "#app",
|
|
|
+ data: {
|
|
|
+ isPremium: false,
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
