wip: shopping cart, product options

module/oc_telegram_shop/upload/oc_telegram_shop/src/Handlers/CartHandler.php

@@ -5,39 +5,28 @@ namespace App\Handlers;
 use Cart\Cart;
 use Openguru\OpenCartFramework\Http\JsonResponse;
 use Openguru\OpenCartFramework\Http\Request;
-use Openguru\OpenCartFramework\QueryBuilder\Connections\ConnectionInterface;
+use Openguru\OpenCartFramework\ImageTool\ImageToolInterface;
 
-class CheckoutHandler
+class CartHandler
 {
     private Cart $cart;
-    private \DB $connection;
+    private ImageToolInterface $imageTool;
 
-    public function __construct(Cart $cart, \DB $database)
+    public function __construct(Cart $cart, \DB $database, ImageToolInterface $imageTool)
     {
         $this->cart = $cart;
         $this->database = $database;
+        $this->imageTool = $imageTool;
     }
 
-    public function addToCart(Request $request): JsonResponse
+    public function index(Request $request): JsonResponse
     {
-        $item = $request->json();
-
-        $options = [];
-
-        foreach ($item['options'] as $option) {
-            if (! empty($option['value']) && ! empty($option['value']['product_option_value_id'])) {
-                $options[$option['product_option_id']] = $option['value']['product_option_value_id'];
-            }
-        }
-
-        $this->cart->add(
-            $item['productId'],
-            $item['quantity'],
-            $options,
-        );
-
         return new JsonResponse([
-            'data' => $this->cart->getProducts(),
+            'data' => [
+                'products' => $this->getProducts(),
+                'count' => $this->cart->countProducts(),
+                'total' => $this->cart->getTotal(),
+            ]
         ]);
     }
 
@@ -65,4 +54,15 @@ class CheckoutHandler
             'data' => $items,
         ]);
     }
+
+    private function getProducts(): array
+    {
+        $products = $this->cart->getProducts();
+
+        foreach ($products as &$product) {
+            $product['thumb'] = $this->imageTool->resize($product['image'], 100, 100, 'placeholder.png');
+        }
+
+        return $products;
+    }
 }

module/oc_telegram_shop/upload/oc_telegram_shop/src/routes.php

@@ -1,7 +1,7 @@
 <?php
 
 use App\Handlers\CategoriesHandler;
-use App\Handlers\CheckoutHandler;
+use App\Handlers\CartHandler;
 use App\Handlers\HelloWorldHandler;
 use App\Handlers\OrderCreateHandler;
 use App\Handlers\ProductsHandler;
@@ -13,6 +13,6 @@ return [
 
     'categoriesList' => [CategoriesHandler::class, 'index'],
 
-    'checkout' => [CheckoutHandler::class, 'checkout'],
-    'addToCart' => [CheckoutHandler::class, 'addToCart'],
+    'checkout' => [CartHandler::class, 'checkout'],
+    'cart' => [CartHandler::class, 'index'],
 ];

spa/src/App.vue

@@ -2,6 +2,7 @@
   <div class="app-container">
     <FullscreenViewport v-if="platform === 'ios' || platform === 'android'"/>
     <router-view/>
+    <CartButton/>
   </div>
 </template>
 
@@ -10,6 +11,7 @@ import {onMounted, ref, watch} from "vue";
 import {useWebAppViewport, useBackButton} from 'vue-tg';
 import {useMiniApp, FullscreenViewport} from 'vue-tg';
 import {useRoute, useRouter} from "vue-router";
+import CartButton from "@/components/CartButton.vue";
 
 const tg = useMiniApp();
 const platform = ref();

spa/src/components/CartButton.vue

@@ -0,0 +1,40 @@
+<template>
+  <div v-if="route.name !== 'cart.show'" class="fixed right-2 bottom-30 z-50 opacity-90">
+    <div class="indicator">
+      <span class="indicator-item indicator-top indicator-start badge badge-secondary">{{ cart.productsCount }}</span>
+      <button class="btn btn-primary btn-lg btn-circle" @click="openCart">
+        <span v-if="cart.isLoading" class="loading loading-spinner"></span>
+        <template v-else>
+          <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="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+          </svg>
+        </template>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {onMounted} from "vue";
+import {useCartStore} from "@/stores/CartStore.js";
+import {useRoute, useRouter} from "vue-router";
+
+const cart = useCartStore();
+const router = useRouter();
+const route = useRoute();
+
+function openCart() {
+  window.Telegram.WebApp.HapticFeedback.selectionChanged();
+  router.push({name: 'cart.show'});
+}
+
+onMounted(async () => {
+  await cart.getProducts();
+});
+</script>
+
+
+
+<style scoped>
+
+</style>

spa/src/components/Price.vue

@@ -0,0 +1,13 @@
+<template>
+<span>{{ formatPrice(value) }} ₽</span>
+</template>
+
+<script setup>
+import {formatPrice} from "@/helpers.js";
+
+const props = defineProps({
+  value: {
+    default: 0,
+  },
+});
+</script>

spa/src/components/ProductOptions/Cart/OptionCheckbox.vue

@@ -0,0 +1,18 @@
+<template>
+  <p>
+    <span class="text-xs font-medium">
+      {{ option.name }}: {{ option.value }} <span v-if="option.price"> ({{ option.price_prefix }}<Price :value="option.price"/>)</span>
+    </span>
+  </p>
+</template>
+
+<script setup>
+import Price from "@/components/Price.vue";
+
+const props = defineProps({
+  option: {
+    type: Object,
+    required: true,
+  },
+});
+</script>

spa/src/components/ProductOptions/Cart/OptionRadio.vue

@@ -0,0 +1,18 @@
+<template>
+  <p>
+    <span class="text-xs font-medium">
+      {{ option.name }}: {{ option.value }} <span v-if="option.price"> ({{ option.price_prefix }}<Price :value="option.price"/>)</span>
+    </span>
+  </p>
+</template>
+
+<script setup>
+import Price from "@/components/Price.vue";
+
+const props = defineProps({
+  option: {
+    type: Object,
+    required: true,
+  },
+});
+</script>

spa/src/components/ProductOptions/Cart/OptionText.vue

@@ -0,0 +1,18 @@
+<template>
+  <p>
+    <span class="text-xs font-medium">
+      {{ option.name }}: {{ option.value }} <span v-if="option.price"> ({{ option.price_prefix }}<Price :value="option.price"/>)</span>
+    </span>
+  </p>
+</template>
+
+<script setup>
+import Price from "@/components/Price.vue";
+
+const props = defineProps({
+  option: {
+    type: Object,
+    required: true,
+  },
+});
+</script>

spa/src/components/ProductOptions/ProductOptions.vue

@@ -1,10 +1,13 @@
 <template>
   <div v-for="option in options" :key="option.product_option_id" class="mt-3">
-    <OptionRadio v-if="option.type === 'radio'" :modelValue="option"/>
-    <OptionCheckbox v-else-if="option.type === 'checkbox'" :modelValue="option"/>
-    <OptionText v-else-if="option.type === 'text'" :modelValue="option"/>
-    <OptionTextarea v-else-if="option.type === 'textarea'" :modelValue="option"/>
-    <OptionSelect v-else-if="option.type === 'select'" :modelValue="option"/>
+    <component
+        v-if="SUPPORTED_OPTION_TYPES.includes(option.type) && componentMap[option.type]"
+        :is="componentMap[option.type]"
+        :modelValue="option"
+    />
+    <div v-else class="text-sm text-error">
+      Тип опции "{{ option.type }}" не поддерживается.
+    </div>
   </div>
 </template>
 
@@ -14,6 +17,15 @@ import OptionCheckbox from "./Types/OptionCheckbox.vue";
 import OptionText from "./Types/OptionText.vue";
 import OptionTextarea from "./Types/OptionTextarea.vue";
 import OptionSelect from "./Types/OptionSelect.vue";
+import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";
+
+const componentMap = {
+  radio: OptionRadio,
+  checkbox: OptionCheckbox,
+  text: OptionText,
+  textarea: OptionTextarea,
+  select: OptionSelect,
+};
 
 const options = defineModel();
 </script>

spa/src/components/ProductOptions/Types/OptionSelect.vue

@@ -5,7 +5,7 @@
         class="select"
         @change="onChange"
     >
-      <option value="" disabled>Выберите значение</option>
+      <option value="" disabled selected>Выберите значение</option>
       <option
           v-for="value in model.values"
           :key="value.product_option_value_id"

spa/src/components/ProductsList.vue

@@ -34,7 +34,6 @@
 <script setup>
 import {ref} from "vue";
 import {useHapticFeedback} from 'vue-tg';
-import { useRouter, useRoute } from 'vue-router';
 import NoProducts from "../components/NoProducts.vue";
 import ProductImageSwiper from "../components/ProductImageSwiper.vue";
 

spa/src/components/Quantity.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="flex items-center text-center">
-    <button class="btn" :class="btnClassList" @click="inc">-</button>
+    <button class="btn" :class="btnClassList" @click="dec" :disabled="disabled">-</button>
     <div class="w-10 h-10 flex items-center justify-center font-bold">{{ model }}</div>
-    <button class="btn" :class="btnClassList" @click="dec">+</button>
+    <button class="btn" :class="btnClassList" @click="inc" :disabled="disabled">+</button>
   </div>
 </template>
 
@@ -15,6 +15,10 @@ const props = defineProps({
   size: {
     type: String,
     default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
   }
 });
 
@@ -27,12 +31,8 @@ const btnClassList = computed(() => {
 });
 
 function inc() {
-  if (model.value  - 1 >= 0) {
-    model.value--;
-  }
-}
+  if (props.disabled) return;
 
-function dec() {
   if (props.max && model.value + 1 > props.max) {
     model.value = props.max;
     return;
@@ -40,4 +40,12 @@ function dec() {
 
   model.value++;
 }
+
+function dec() {
+  if (props.disabled) return;
+
+  if (model.value  - 1 >= 1) {
+    model.value--;
+  }
+}
 </script>

spa/src/constants/options.js

@@ -0,0 +1,7 @@
+export const SUPPORTED_OPTION_TYPES = [
+    'checkbox',
+    'radio',
+    'select',
+    'text',
+    'textarea',
+];

spa/src/helpers.js

@@ -0,0 +1,30 @@
+export function isNotEmpty(value) {
+    if (value === null || value === undefined) return false;
+
+    if (Array.isArray(value)) return value.length > 0;
+
+    if (typeof value === 'object') return Object.keys(value).length > 0;
+
+    if (typeof value === 'string') return value.trim() !== '';
+
+    return true; // для чисел, булевых и т.п.
+}
+
+export function formatPrice(raw) {
+    if (raw === null || raw === undefined) return '';
+
+    const str = String(raw).trim();
+    const match = str.match(/^([+-]?)(\d+(?:\.\d+)?)/);
+    if (!match) return '';
+
+    const sign = match[1] || '';
+    const num = parseFloat(match[2]);
+
+    if (isNaN(num) || num === 0) return '';
+
+    const formatted = Math.round(num)
+        .toString()
+        .replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+
+    return `${sign}${formatted}`;
+}

spa/src/main.js

@@ -6,9 +6,9 @@ import { router } from './router';
 import { createPinia } from 'pinia';
 
 const config = {
-    night_auto: false,
+    night_auto: true,
     theme: {
-        light: 'fantasy',
+        light: 'light',
         dark: 'dark',
     }
 };

spa/src/router.js

@@ -2,14 +2,14 @@ import {createMemoryHistory, createRouter} from 'vue-router';
 import Home from './views/Home.vue';
 import Product from './views/Product.vue';
 import CategoriesList from "./views/CategoriesList.vue";
-import ProductsList from "@/components/ProductsList.vue";
 import Cart from "./views/Cart.vue";
+import Products from "@/views/Products.vue";
 
 const routes = [
     {path: '/', name: 'home', component: Home},
     {path: '/product/:id', name: 'product.show', component: Product},
     {path: '/categories', name: 'categories', component: CategoriesList},
-    {path: '/category/:id', name: 'category.show', component: ProductsList},
+    {path: '/category/:id', name: 'category.show', component: Products},
     {path: '/cart', name: 'cart.show', component: Cart},
 ];
 
@@ -20,7 +20,7 @@ export const router = createRouter({
         if (savedPosition) {
             return savedPosition; // Восстановить позицию прокрутки
         } else {
-            return { top: 0 }; // Или оставить на старте
+            return {top: 0}; // Или оставить на старте
         }
     }
 });

spa/src/stores/CartStore.js

@@ -1,66 +1,102 @@
 import {defineStore} from "pinia";
-import md5 from 'crypto-js/md5';
 import ftch from "@/utils/ftch.js";
+import {$fetch} from "ofetch";
+import {isNotEmpty} from "@/helpers.js";
 
 export const useCartStore = defineStore('cart', {
     state: () => ({
         items: [],
+        products: [],
+        productsCount: 0,
+        total: 0,
         isLoading: false,
     }),
 
     actions: {
-        getItem(rowId) {
-            return this.items.find(item => item.rowId === rowId) ?? null;
-        },
-
-        hasItem(rowId) {
-            return this.getItem(rowId) !== null;
+        async getProducts() {
+            try {
+                this.isLoading = true;
+                const {data} = await ftch('cart');
+                this.products = data.products;
+                this.productsCount = data.count;
+                this.total = data.total;
+            } catch (error) {
+                console.error(error);
+            } finally {
+                this.isLoading = false;
+            }
         },
 
         async addProduct(productId, productName, price, quantity = 1, options = []) {
-            const rowId = this.generateRowId(productId, options);
-
-            const item = {
-                rowId: rowId,
-                productId: productId,
-                productName: productName,
-                price: price,
-                quantity: quantity,
-                options: JSON.parse(JSON.stringify(options)), // ← 💥 глубокая копия!
-            };
-
-            this.items.push(item);
-
-            return rowId;
-        },
-
-        removeItem(rowId) {
-            this.items.splice(this.items.indexOf(rowId), 1);
-        },
-
-        getQuantity(rowId) {
-            if (this.hasItem(rowId)) {
-                return this.getItem(rowId).quantity;
-            }
-
-            return 0;
-        },
-
-        setQuantity(rowId, quantity) {
-            this.getItem(rowId).quantity = quantity;
-        },
-
-        generateRowId(productId, options) {
-            return md5(productId + JSON.stringify(options)).toString();
-        },
-
-        async checkout() {
             try {
                 this.isLoading = true;
-                const {data} = await ftch('checkout', null, this.items);
-                this.items = data;
-            } catch (e) {
-                console.error(e);
+                const formData = new FormData();
+                formData.append("product_id", productId);
+                formData.append("quantity", quantity);
+
+                // TODO: Add support different types of options
+                options.forEach((option) => {
+                    if (option.type === "checkbox" && Array.isArray(option.value)) {
+                        option.value.forEach(item => {
+                            formData.append(`option[${option.product_option_id}][]`, item.product_option_value_id);
+                        });
+                    } else if (option.type === "radio" && isNotEmpty(option.value)) {
+                        formData.append(`option[${option.product_option_id}]`, option.value.product_option_value_id);
+                    } else if (option.type === "select" && isNotEmpty(option.value)) {
+                        formData.append(`option[${option.product_option_id}]`, option.value.product_option_value_id);
+                    } else if ((option.type === "text" || option.type === 'textarea') && isNotEmpty(option.value)) {
+                        formData.append(`option[${option.product_option_id}]`, option.value);
+                    }
+                })
+
+                const response = await $fetch('/index.php?route=checkout/cart/add', {
+                    method: 'POST',
+                    body: formData,
+                });
+
+                if (response.error) {
+                    throw new Error(JSON.stringify(response.error));
+                }
+
+                await this.getProducts();
+            } catch (error) {
+                console.log(error);
+                throw error;
+            } finally {
+                this.isLoading = false;
+            }
+        },
+
+        async removeItem(rowId) {
+            try {
+                this.isLoading = true;
+                const formData = new FormData();
+                formData.append('key', rowId);
+                await $fetch('/index.php?route=checkout/cart/remove', {
+                    method: 'POST',
+                    body: formData,
+                });
+                await this.getProducts();
+            } catch (error) {
+                console.error(error);
+            } finally {
+                this.isLoading = false;
+            }
+        },
+
+        async setQuantity(cartId, quantity) {
+            try {
+                this.isLoading = true;
+                const formData = new FormData();
+                formData.append(`quantity[${cartId}]`, quantity);
+                await $fetch('/index.php?route=checkout/cart/edit', {
+                    redirect: 'manual',
+                    method: 'POST',
+                    body: formData,
+                });
+                await this.getProducts();
+            } catch (error) {
+                console.log(error);
             } finally {
                 this.isLoading = false;
             }

spa/src/stores/ProductsStore.js

@@ -7,6 +7,10 @@ export const useProductsStore = defineStore('products', {
             data: [],
             meta: {},
         },
+        products: {
+            data: [],
+            meta: {},
+        },
         isLoading: false,
     }),
 
@@ -21,5 +25,18 @@ export const useProductsStore = defineStore('products', {
                 this.isLoading = false;
             }
         },
+
+        async fetchProducts(categoryId = null) {
+            try {
+                this.isLoading = true;
+                this.products = await ftch('products', {
+                    categoryId: categoryId,
+                });
+            } catch (error) {
+                console.error(error);
+            } finally {
+                this.isLoading = false;
+            }
+        },
     },
 });

spa/src/views/Cart.vue

@@ -1,46 +1,48 @@
 <template>
-  <div class="max-w-3xl mx-auto p-4 space-y-6">
+  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30">
     <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-if="cart.products.length > 0">
       <div
-          v-for="item in cart.items"
-          :key="item.rowId"
-          class="card w-96 bg-base-100 card-sm shadow-sm"
+          v-for="item in cart.products"
+          :key="item.cart_id"
+          class="card card-border bg-base-100 card-sm mb-3"
+          :class="item.stock === false ? 'border-error' : ''"
       >
         <div class="card-body">
-          <h2 class="card-title">{{ item.productName }}</h2>
-          <p class="text-sm mt-1">{{ item.price }}</p>
-          <div v-if="item.options.length">
-            <p v-for="option in item.options.filter(i => ['checkbox', 'radio', 'select', 'text', 'textarea'].indexOf(i.type) !== -1)">
-              <span v-if="option.type === 'radio'" class="text-xs font-medium">
-                {{ option.value.name }}<span v-if="option.value.price"> ({{ option.value.price_prefix }}{{ option.value.price }})</span>
-              </span>
-              <span v-else-if="option.type === 'checkbox'" class="text-xs font-medium">
-                <span v-for="check in option.value" class="text-xs font-medium">
-                  {{ check.name }}<span v-if="check.price"> ({{ check.price_prefix }}{{ check.price }})</span>
-                </span>
-              </span>
-              <span v-else-if="option.type === 'select'" class="text-xs font-medium">
-                {{ option.value.name }}<span v-if="option.value.price"> ({{ option.value.price_prefix }}{{ option.value.price }})</span>
-              </span>
-              <span v-else-if="option.type === 'text' || option.type === 'textarea'" class="text-xs font-medium">
-                {{ option.value }}
-              </span>
-            </p>
+          <div class="avatar">
+            <div class="w-16 rounded">
+              <img :src="item.thumb"/>
+            </div>
+          </div>
+
+          <p v-if="! item.stock" class="text-error font-bold">Товар отсутствует на складе в нужном количестве.</p>
+
+          <h2 class="card-title">{{ item.name }}</h2>
+          <p class="text-sm font-bold">{{ formatPrice(item.total) }} ₽</p>
+          <p>{{ formatPrice(item.price) }} ₽/ед</p>
+          <div>
+            <div v-for="option in item.option">
+              <component
+                  v-if="SUPPORTED_OPTION_TYPES.includes(option.type) && componentMap[option.type]"
+                  :is="componentMap[option.type]"
+                  :option="option"
+              />
+              <div v-else class="text-sm text-error">
+                Тип опции "{{ option.type }}" не поддерживается.
+              </div>
+            </div>
           </div>
           <div class="card-actions justify-between">
-            <Quantity v-model="item.quantity" @update:modelValue="onQuantityUpdate(item.rowId, $event)"/>
-            <button class="btn btn-error" @click="cart.removeItem(item.rowId)">
+            <Quantity
+                :disabled="cart.isLoading"
+                v-model="item.quantity"
+                @update:modelValue="cart.setQuantity(item.cart_id, $event)"
+            />
+            <button class="btn btn-error" @click="cart.removeItem(item.cart_id)" :disabled="cart.isLoading">
               <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>
@@ -48,11 +50,21 @@
           </div>
         </div>
       </div>
+
+      <div class="fixed px-4 pb-10 pt-4 bottom-0 left-0 w-full bg-base-200 z-50 flex justify-between items-center gap-2 border-t-1 border-t-base-300">
+        <div>
+
+          <span class="text-xs text-base-content mr-2">Всего:</span>
+          <span v-if="cart.isLoading" class="loading loading-spinner loading-xs"></span>
+          <span v-else class="text-accent font-bold">{{ formatPrice(cart.total) }} ₽</span>
+        </div>
+        <button class="btn btn-primary" :disabled="cart.isLoading">Перейти к оформлению</button>
+      </div>
     </div>
 
     <div
         v-else
-        class="text-center text-gray-500 py-12 border border-dashed border-gray-300 rounded-2xl bg-white"
+        class="text-center rounded-2xl"
     >
       <p class="text-lg">Ваша корзина пуста</p>
     </div>
@@ -62,12 +74,19 @@
 <script setup>
 import { useCartStore } from '../stores/CartStore.js'
 import Quantity from "@/components/Quantity.vue";
+import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";
+import OptionRadio from "@/components/ProductOptions/Cart/OptionRadio.vue";
+import OptionCheckbox from "@/components/ProductOptions/Cart/OptionCheckbox.vue";
+import OptionText from "@/components/ProductOptions/Cart/OptionText.vue";
+import {formatPrice} from "../helpers.js";
 
-const cart = useCartStore()
+const cart = useCartStore();
 
-function onQuantityUpdate(rowId, newQuantity) {
-  if (newQuantity === 0) {
-    cart.removeItem(rowId)
-  }
-}
+const componentMap = {
+  radio: OptionRadio,
+  select: OptionRadio,
+  checkbox: OptionCheckbox,
+  text: OptionText,
+  textarea: OptionText,
+};
 </script>

spa/src/views/Product.vue

@@ -34,57 +34,52 @@
       </div>
     </div>
 
-    <div v-if="product.id" class="px-4 pb-10 pt-4 fixed bottom-0 left-0 w-full bg-base-200 z-50 flex justify-between gap-2 border-t-1 border-t-base-300">
-      <div class="flex-1">
-        <button
-            class="btn btn-lg w-full"
-            :class="isInCartNow ? 'btn-success' : 'btn-primary'"
-            :disabled="canAddToCart === false"
-            @click="actionBtnClick"
-        >
-          <span>{{ buttonText }}</span><br>
-        </button>
+    <div v-if="product.id" class="fixed px-4 pb-10 pt-4 bottom-0 left-0 w-full bg-base-200 z-50 flex flex-col gap-2 border-t-1 border-t-base-300">
+      <div class="text-error">
+        {{ error }}
+      </div>
 
       <div v-if="canAddToCart === false" class="text-error text-center text-xs mt-1">
         Выберите обязательные опции
       </div>
+
+      <div class="flex gap-2">
+        <div class="flex-1">
+          <button
+              class="btn btn-primary btn-lg w-full"
+              :disabled="canAddToCart === false"
+              @click="actionBtnClick"
+          >
+            Купить
+          </button>
         </div>
 
         <Quantity
-          v-if="quantity > 0"
             :modelValue="quantity"
             @update:modelValue="setQuantity"
-          :max="10"
             size="lg"
         />
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import {computed, onMounted, onUnmounted, ref, watch, watchEffect} from "vue";
+import {computed, onMounted, ref} from "vue";
 import {$fetch} from "ofetch";
 import {useRoute} from 'vue-router'
-import {useRouter} from 'vue-router'
 import ProductOptions from "../components/ProductOptions/ProductOptions.vue";
 import {useCartStore} from "../stores/CartStore.js";
 import ProductImageSwiper from "../components/ProductImageSwiper.vue";
 import Quantity from "../components/Quantity.vue";
+import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";
 
 const route = useRoute();
-const router = useRouter();
 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.getItem(rowId.value);
-  return item && item.quantity > 0
-      ? `В корзине`
-      : 'Добавить в корзину'
-});
+const quantity = ref(1);
+const error = ref('');
 
 const canAddToCart = computed(() => {
   if (!product.value || product.value.options === undefined || product.value.options?.length === 0) {
@@ -92,7 +87,7 @@ const canAddToCart = computed(() => {
   }
 
   const required = product.value.options.filter(item => {
-    return ['checkbox', 'radio', 'select', 'text', 'textarea'].indexOf(item.type) !== -1
+    return SUPPORTED_OPTION_TYPES.includes(item.type)
         && item.required === true
         && !item.value;
   });
@@ -100,32 +95,21 @@ const canAddToCart = computed(() => {
   return required.length === 0;
 });
 
-const isInCartNow = computed(() => {
-  return cart.hasItem(rowId.value);
-});
-
-const quantity = computed(() => {
-  return cart.getQuantity(rowId.value);
-});
-
-function actionBtnClick() {
-  if (cart.hasItem(rowId.value)) {
-    window.Telegram.WebApp.HapticFeedback.selectionChanged();
-    router.push({name: 'cart.show'});
-  } else {
-    cart.addProduct(productId.value, product.value.name, product.value.price, 1, product.value.options);
+async function actionBtnClick() {
+  try {
+    error.value = '';
+    console.log(product.value);
+    await cart.addProduct(productId.value, product.value.name, product.value.price, quantity.value, product.value.options);
     window.Telegram.WebApp.HapticFeedback.notificationOccurred('success');
+  } catch (e) {
+    await window.Telegram.WebApp.HapticFeedback.notificationOccurred('error');
+    error.value = e.message;
   }
 }
 
 function setQuantity(newQuantity) {
-  if (newQuantity === 0) {
-    cart.removeItem(rowId.value);
-    window.Telegram.WebApp.HapticFeedback.notificationOccurred('warning');
-  } else {
-    cart.setQuantity(rowId.value, newQuantity);
+  quantity.value = newQuantity;
   window.Telegram.WebApp.HapticFeedback.selectionChanged();
-  }
 }
 
 onMounted(async () => {

spa/src/views/Products.vue

@@ -0,0 +1,22 @@
+<template>
+  <div ref="goodsRef">
+    <ProductsList
+        :products="productsStore.products.data"
+        :meta="productsStore.products.meta"
+        :isLoading="productsStore.isLoading"
+    />
+  </div>
+</template>
+
+<script setup>
+import {useProductsStore} from "@/stores/ProductsStore.js";
+import ProductsList from "@/components/ProductsList.vue";
+import {onMounted} from "vue";
+import {useRoute} from "vue-router";
+
+const route = useRoute();
+const categoryId = route.params.id ?? null;
+
+const productsStore = useProductsStore();
+onMounted(() => productsStore.fetchProducts(categoryId))
+</script>