From 020c06bbfa564a2995d62130e623c218d2186903 Mon Sep 17 00:00:00 2001
From: Paulius-U <paulius.ulevisius@gmail.com>
Date: Thu, 28 Aug 2025 22:37:18 +0300
Subject: [PATCH] Added add to card and remove from cart

---
 src/App.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 63a7d25..0016df4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 import socksGreenImage from './assets/images/socks_green.jpeg'
+import socksBlueImage from './assets/images/socks_blue.jpeg'
 
 const product = ref('Socks')
 const image = ref(socksGreenImage)
@@ -9,11 +10,17 @@ const inStock = true
 const details = ref(['50% cotton', '30% wool', '20% polyester'])
 
 const variants = ref([
-  { id: 2234, color: 'green' },
-  { id: 2235, color: 'blue' },
+  { id: 2234, color: 'green', image: socksGreenImage },
+  { id: 2235, color: 'blue', image: socksBlueImage }
 ])
 
 const cart = ref(0)
+const addToCart = () => cart.value += 1
+const removeFromCart = () => cart.value -= 1
+
+const updateImage = (variantImage) => {
+  image.value = variantImage
+}
 </script>
   
 <template>
@@ -34,10 +41,12 @@ const cart = ref(0)
         <div
           v-for="variant in variants"
           :key="variant.id"
+          @mouseover="updateImage(variant.image)"
         >
           {{ variant.color }}
         </div>
-        <button class="button">Add to Cart</button>
+        <button class="button" @:click="addToCart">Add to Cart</button>
+        <button class="button" @:click="removeFromCart">Remove from Cart</button>
       </div>
     </div>
   </div>