| 
					
				 | 
			
			
				@@ -42,9 +42,6 @@ const productTemplate = `<div class="product"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				                 :disabled="!inStock" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				                 :class="{ disabledButton: !inStock }" 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         >Add to cart</button> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        <div class="cart"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-          <p>Cart({{cart}})</p> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-        </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				       </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     </div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 `; 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -90,7 +87,6 @@ Vue.component("product", { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     data() { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         return { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             brand: "Vue Mastery", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            cart: 0, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             description: "Chaussettes montantes", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             details: [ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				                 "80% cotton", 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -120,15 +116,8 @@ Vue.component("product", { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     methods: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         addToCart(mouseEvent) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            if (this.variants[this.selectedVariant].variantQuantity < 0) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                this.variants[this.selectedVariant].variantQuantity = 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                return; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             this.variants[this.selectedVariant].variantQuantity--; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            this.cart++; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            if (this.variants[this.selectedVariant].variantQuantity <= 0) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-                this.variants[this.selectedVariant].variantQuantity = 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-            } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            this.$emit("add-to-cart", this.variants[this.selectedVariant].variantId); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         updateImage(index) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				             this.selectedVariant = index; 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -139,7 +128,14 @@ Vue.component("product", { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 const app = new Vue({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     el: "#app", 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     data: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        cart: [], 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				         isPremium: false, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    }, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    methods: { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        updateCart(id) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            console.log("uC", id); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+            this.cart.push(id); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+        } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				     } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 }); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 |