|
@@ -1,6 +1,9 @@
|
|
|
+const DISABLED = "disabledButton";
|
|
|
+
|
|
|
const app = new Vue({
|
|
|
el: "#app",
|
|
|
data: {
|
|
|
+ cart: 0,
|
|
|
description: "Chaussettes montantes",
|
|
|
details: [
|
|
|
"80% cotton",
|
|
@@ -8,15 +11,55 @@ const app = new Vue({
|
|
|
"Gender-neutral",
|
|
|
],
|
|
|
image: "./assets/img/vmSocks-green-onWhite.jpg",
|
|
|
- inventory: 90,
|
|
|
+ inventory: 15,
|
|
|
link: "https://www.google.com/search?q=vuejs+socks",
|
|
|
onSale: false,
|
|
|
product: "Socks",
|
|
|
sizes: [32, 34, 36, 38, 40, 42, 44, 46, 48],
|
|
|
variants: [
|
|
|
- { variantId: 2234, variantColor: "green" },
|
|
|
- { variantId: 2235, variantColor: "blue" },
|
|
|
+ { variantId: 2234, variantColor: "green", variantImage: "./assets/img/vmSocks-green-onWhite.jpg", },
|
|
|
+ { variantId: 2235, variantColor: "blue", variantImage: "./assets/img/vmSocks-blue-onWhite.png", },
|
|
|
]
|
|
|
- }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ addToCart(mouseEvent) {
|
|
|
+ const target = mouseEvent.target;
|
|
|
+ if (this.inventory <= 0) {
|
|
|
+ if (this.inventory < 0) {
|
|
|
+ this.inventory = 0;
|
|
|
+ }
|
|
|
+ target.classList.add(DISABLED);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ target.classList.remove(DISABLED);
|
|
|
+ this.inventory--;
|
|
|
+ this.cart++;
|
|
|
+ if (this.inventory <= 0) {
|
|
|
+ this.inventory = 0;
|
|
|
+ target.classList.add(DISABLED);
|
|
|
+ }
|
|
|
+ this.$refs.remove.classList.remove(DISABLED);
|
|
|
+ },
|
|
|
+ removeFromCart(mouseEvent) {
|
|
|
+ const target = mouseEvent.target;
|
|
|
+ if (this.cart <= 0) {
|
|
|
+ if (this.cart < 0) {
|
|
|
+ this.cart = 0;
|
|
|
+ }
|
|
|
+ target.classList.add(DISABLED);
|
|
|
+ }
|
|
|
+ target.classList.remove(DISABLED);
|
|
|
+ this.inventory++;
|
|
|
+ this.cart--;
|
|
|
+ if (this.cart <= 0) {
|
|
|
+ this.cart = 0;
|
|
|
+ target.classList.add(DISABLED);
|
|
|
+ }
|
|
|
+ this.$refs.add.classList.remove(DISABLED);
|
|
|
+ },
|
|
|
+ updateImage(imageSrc) {
|
|
|
+ this.image = imageSrc;
|
|
|
+ }
|
|
|
+ },
|
|
|
});
|
|
|
|