WIP: cart

spa/src/views/Cart.vue

@@ -1,12 +1,20 @@
 <template>
   <div class="max-w-3xl mx-auto p-4 space-y-6">
-    <h2 class="text-2xl">Корзина</h2>
+    <h2 class="text-2xl">
+      Корзина
+      <span v-if="cart.isLoading" class="loading loading-spinner loading-md"></span>
+    </h2>
+
+    <div>
+      <button class="btn" @click="cart.checkout()" :disabled="cart.isLoading">
+        Checkout
+      </button>
+    </div>
 
     <div v-if="cart.items.length > 0">
-
       <div
           v-for="item in cart.items"
-          :key="item.productId"
+          :key="item.rowId"
           class="card w-96 bg-base-100 card-sm shadow-sm"
       >
         <div class="card-body">
@@ -31,8 +39,8 @@
             </p>
           </div>
           <div class="card-actions justify-between">
-            <Quantity v-model="item.quantity" @update:modelValue="onQuantityUpdate(item, $event)"/>
-            <button class="btn btn-error" @click="remove(item)">
+            <Quantity v-model="item.quantity" @update:modelValue="onQuantityUpdate(item.rowId, $event)"/>
+            <button class="btn btn-error" @click="cart.removeItem(item.rowId)">
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                 <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
               </svg>
@@ -57,14 +65,9 @@ import Quantity from "@/components/Quantity.vue";
 
 const cart = useCartStore()
 
-function onQuantityUpdate(item, newQuantity) {
+function onQuantityUpdate(rowId, newQuantity) {
   if (newQuantity === 0) {
-    remove(item)
+    cart.removeItem(rowId)
   }
 }
-
-function remove(item) {
-  const index = cart.items.findIndex(i => i.productId === item.productId)
-  if (index !== -1) cart.items.splice(index, 1)
-}
 </script>

spa/src/views/Product.vue

@@ -77,8 +77,10 @@ const productId = computed(() => route.params.id);
 const product = ref({});
 const cart = useCartStore();
 
+const rowId = computed(() => cart.generateRowId(productId.value, product.value.options));
+
 const buttonText = computed(() => {
-  const item = cart.items.find(i => i.productId === productId.value);
+  const item = cart.getItem(rowId.value);
   return item && item.quantity > 0
       ? `В корзине`
       : 'Добавить в корзину'
@@ -95,21 +97,19 @@ const canAddToCart = computed(() => {
         && !item.value;
   });
 
-  console.log(required);
-
   return required.length === 0;
 });
 
 const isInCartNow = computed(() => {
-  return cart.hasProduct(productId.value);
+  return cart.hasItem(rowId.value);
 });
 
 const quantity = computed(() => {
-  return cart.getQuantity(productId.value);
+  return cart.getQuantity(rowId.value);
 });
 
 function actionBtnClick() {
-  if (cart.hasProduct(productId.value)) {
+  if (cart.hasItem(rowId.value)) {
     window.Telegram.WebApp.HapticFeedback.selectionChanged();
     router.push({name: 'cart.show'});
   } else {
@@ -120,10 +120,10 @@ function actionBtnClick() {
 
 function setQuantity(newQuantity) {
   if (newQuantity === 0) {
-    cart.removeProduct(productId.value);
+    cart.removeItem(rowId.value);
     window.Telegram.WebApp.HapticFeedback.notificationOccurred('warning');
   } else {
-    cart.setQuantity(productId.value, newQuantity);
+    cart.setQuantity(rowId.value, newQuantity);
     window.Telegram.WebApp.HapticFeedback.selectionChanged();
   }
 }