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