feat: Add increment and decrement functionality to cart items and update quantity label

Author: zackha

app/components/Cart.vue

@@ -1,6 +1,6 @@
 <!--app/components/Cart.vue-->
 <script setup>
-const { cart, handleRemoveFromCart, removeFromCartButtonStatus } = useCart();
+const { cart, handleRemoveFromCart, removeFromCartButtonStatus, increment, decrement } = useCart();
 const { order } = useCheckout();
 </script>
 
@@ -25,9 +25,21 @@ const { order } = useCheckout();
                   <p class="line-through">${{ (Number(product.variation.node.regularPrice) * product.quantity).toFixed(2) }}</p>
                   <p class="text-alizarin-crimson-700">-{{ ((1 - product.variation.node.salePrice / product.variation.node.regularPrice) * 100).toFixed(0) }}%</p>
                 </div>
-                <div class="text-xs font-medium text-neutral-600 dark:text-neutral-300">
-                  {{ $t('product.size') }}: {{ product.variation.attributes.map(attr => attr.value.toUpperCase()).join(', ') }} • {{ $t('product.quantity') }}:
-                  {{ product.quantity }}
+                <div class="text-xs flex gap-2 font-medium text-neutral-600 dark:text-neutral-300">
+                  <div>{{ $t('product.size') }}: {{ product.variation.attributes.map(attr => attr.value.toUpperCase()).join(', ') }} • {{ $t('product.quantity') }}:</div>
+                  <div class="flex items-center gap-1">
+                    <UIcon
+                      name="iconamoon:sign-minus-circle-fill"
+                      size="14"
+                      class="text-black dark:text-white cursor-pointer"
+                      @click="decrement(product.variation.node.databaseId)" />
+                    <span class="text-center">{{ product.quantity }}</span>
+                    <UIcon
+                      name="iconamoon:sign-plus-circle-fill"
+                      size="14"
+                      class="text-black dark:text-white cursor-pointer"
+                      @click="increment(product.variation.node.databaseId)" />
+                  </div>
                 </div>
               </div>
               <button

app/composables/useCart.js

@@ -77,6 +77,5 @@ export const useCart = () => {
     removeFromCartButtonStatus,
     increment,
     decrement,
-    findItemByVariationId,
   };
 };

app/pages/product/[id].vue

@@ -108,9 +108,7 @@ useHead(() => ({
   ],
 }));
 
-const { handleAddToCart, addToCartButtonStatus, increment, decrement, findItemByVariationId } = useCart();
-const inCartItem = computed(() => selectedVariation.value && findItemByVariationId(selectedVariation.value.databaseId));
-const selectedQty = computed(() => (inCartItem.value ? inCartItem.value.quantity : 0));
+const { handleAddToCart, addToCartButtonStatus } = useCart();
 </script>
 
 <template>
@@ -208,14 +206,8 @@ const selectedQty = computed(() => (inCartItem.value ? inCartItem.value.quantity
                 </span>
               </label>
             </div>
-            <div class="flex items-center">
-              <template v-if="inCartItem">
-                <button @click="decrement(selectedVariation.databaseId)" class="button-bezel w-12 h-12 rounded-md font-bold text-white text-lg">−</button>
-                <div class="w-12 text-center font-semibold">{{ selectedQty }}</div>
-                <button @click="increment(selectedVariation.databaseId)" class="button-bezel w-12 h-12 rounded-md font-bold text-white text-lg">+</button>
-              </template>
+            <div class="flex">
               <button
-                v-else
                 @click="handleAddToCart(selectedVariation.databaseId)"
                 :disabled="addToCartButtonStatus !== 'add'"
                 class="button-bezel w-full h-12 rounded-md relative tracking-wide font-semibold text-white text-sm flex justify-center items-center">

i18n/locales/en-GB.json

@@ -64,7 +64,7 @@
   "product": {
     "originally": "Originally",
     "size": "Size",
-    "quantity": "Quantity",
+    "quantity": "Qty",
     "sku": "article number",
     "vat_included": "VAT included",
     "featured_information": "Featured Information",