refactor: move spa to frontend folder

2025-10-27 12:32:38 +03:00
parent 617b5491a1
commit 5681ac592a
77 changed files with 13 additions and 2 deletions
--- a/frontend/spa/src/App.vue
+++ b/frontend/spa/src/App.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="drawer h-full">
+    <input id="app-drawer" type="checkbox" class="drawer-toggle" v-model="drawerOpen" />
+
+    <div class="drawer-content">
+      <div class="app-container h-full">
+        <header class="app-header w-full" v-if="platform === 'ios'"></header>
+
+        <Navbar @drawer="toggleDrawer"/>
+
+        <section class="telecart-main-section">
+          <FullscreenViewport v-if="platform === 'ios' || platform === 'android'" />
+
+          <AppDebugMessage v-if="settings.app_debug"/>
+
+          <RouterView v-slot="{ Component, route }">
+            <KeepAlive include="Home" :key="filtersStore.paramsHashForRouter">
+              <component :is="Component" :key="route.fullPath" />
+            </KeepAlive>
+          </RouterView>
+
+          <CartButton v-if="settings.store_enabled" />
+          <Dock v-if="isAppDockShown" />
+        </section>
+      </div>
+    </div>
+
+    <div class="drawer-side z-50 safe-top">
+      <label for="app-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
+      <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
+        <li><a href="#">🏠 Главная</a></li>
+        <li><a href="#">🛒 Корзина</a></li>
+        <li><a @click="drawerOpen = false">❌ Закрыть</a></li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {computed, onMounted, onUnmounted, ref, watch} from "vue";
+import {useWebAppViewport} from 'vue-tg';
+import {useMiniApp, FullscreenViewport} from 'vue-tg';
+import {useRoute, useRouter} from "vue-router";
+import {useSettingsStore} from "@/stores/SettingsStore.js";
+import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
+import CartButton from "@/components/CartButton.vue";
+import Dock from "@/components/Dock.vue";
+import Navbar from "@/components/Navbar.vue";
+import AppDebugMessage from "@/components/AppDebugMessage.vue";
+
+const tg = useMiniApp();
+const platform = ref();
+platform.value = tg.platform;
+
+const {disableVerticalSwipes} = useWebAppViewport();
+disableVerticalSwipes();
+
+const router = useRouter();
+const route = useRoute();
+const settings = useSettingsStore();
+const filtersStore = useProductFiltersStore();
+const backButton = window.Telegram.WebApp.BackButton;
+const haptic = window.Telegram.WebApp.HapticFeedback;
+const drawerOpen = ref(false);
+
+const routesToHideAppDock = [
+    'product.show',
+    'checkout',
+    'order_created',
+    'filters',
+];
+
+const isAppDockShown = computed(() => {
+  return routesToHideAppDock.indexOf(route.name) === -1;
+});
+
+function navigateBack() {
+  haptic.impactOccurred('light');
+  router.back();
+}
+
+function toggleDrawer() {
+  drawerOpen.value = !drawerOpen.value
+}
+
+watch(
+    () => route.name,
+    () => {
+      if (route.name === 'home') {
+        backButton.hide();
+        backButton.offClick(navigateBack);
+      } else {
+        backButton.show();
+        backButton.onClick(navigateBack);
+      }
+    },
+    {immediate: true}
+);
+
+function handleClickOutside(e) {
+  if (!e.target.closest('input,select,textarea')) {
+    document.activeElement?.blur();
+  }
+}
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
+</script>
--- a/frontend/spa/src/AppLoading.vue
+++ b/frontend/spa/src/AppLoading.vue
@@ -0,0 +1,7 @@
+<template>
+  <LoadingFullScreen text="Загрузка приложения..."/>
+</template>
+
+<script setup>
+import LoadingFullScreen from "@/components/LoadingFullScreen.vue";
+</script>
--- a/frontend/spa/src/ApplicationError.vue
+++ b/frontend/spa/src/ApplicationError.vue
@@ -0,0 +1,20 @@
+<template>
+  <div style="z-index: 99999" class="fixed top-0 left-0 w-full h-full bg-base-100">
+    <div class="flex flex-col items-center justify-center h-full">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-20">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9v6m-4.5 0V9M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+      </svg>
+
+      <h1 class="font-semibold text-2xl mb-2">Магазин временно недоступен</h1>
+      <p class="text-sm text-muted">Мы на перерыве, скоро всё снова заработает 🛠️</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  error: Error,
+});
+</script>
+
+
--- a/frontend/spa/src/ShoppingCart.js
+++ b/frontend/spa/src/ShoppingCart.js
@@ -0,0 +1,63 @@
+import {reactive} from "vue";
+
+class ShoppingCart {
+    constructor() {
+        this.items = reactive([]);
+        this.storageKey = 'shoppingCart';
+        this.storage = Telegram.WebApp.DeviceStorage;
+
+        this._load()
+            .then(items => {
+                this.items = items;
+                console.log(items);
+            })
+            .catch(error => console.log(error));
+    }
+
+    async addItem(productId, productName, quantity, options = {}) {
+        this.items.push({ productId: productId, productName: productName, quantity, options });
+        this._save(this.items);
+    }
+
+    has(productId) {
+        const item = this.getItem(productId);
+        console.log(item);
+        return this.getItem(productId) !== null;
+    }
+
+    getItem(productId) {
+        return this.items.find(item => item.productId === productId) ?? null;
+    }
+
+    getItems() {
+        return this.items;
+    }
+
+    clear() {
+        this.storage.deleteItem(this.storageKey)
+    }
+
+    async _load() {
+        return new Promise((resolve, reject) => {
+            this.storage.getItem(this.storageKey, (error, value) => {
+                if (error) {
+                    console.error(error);
+                    reject([]);
+                }
+
+                try {
+                    resolve(value ? JSON.parse(value) : []);
+                } catch (error) {
+                    console.error(error);
+                    reject([]);
+                }
+            });
+        });
+    }
+
+    _save(items) {
+        this.storage.setItem(this.storageKey, JSON.stringify(items));
+    }
+}
+
+export default ShoppingCart;
--- a/frontend/spa/src/components/AppDebugMessage.vue
+++ b/frontend/spa/src/components/AppDebugMessage.vue
@@ -0,0 +1,9 @@
+<template>
+  <div role="alert" class="alert alert-warning rounded-none">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+    </svg>
+    <span>Включен режим разработчика!</span>
+  </div>
+</template>
--- a/frontend/spa/src/components/Banner.vue
+++ b/frontend/spa/src/components/Banner.vue
@@ -0,0 +1,60 @@
+<template>
+  <div v-if="slides.length > 0" class="app-banner px-4">
+    <Swiper
+        class="select-none"
+        :slides-per-view="1"
+        :space-between="50"
+        pagination
+        :pagination="{ clickable: true }"
+        @swiper="onSwiper"
+        @slideChange="onSlideChange"
+    >
+      <SwiperSlide v-for="slide in slides" :key="slide.id">
+        <img :src="slide.image" :alt="slide.title">
+      </SwiperSlide>
+    </Swiper>
+  </div>
+</template>
+
+<script setup>
+import {Swiper, SwiperSlide} from 'swiper/vue';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import {onMounted, ref} from "vue";
+import {fetchBanner} from "@/utils/ftch.js";
+
+const slides = ref([]);
+
+const onSwiper = (swiper) => {
+  console.log(swiper);
+};
+const onSlideChange = () => {
+  console.log('slide change');
+};
+
+onMounted(async () => {
+  const response = await fetchBanner();
+  slides.value = response.data;
+})
+</script>
+
+<style>
+.app-banner {
+  overflow: hidden;
+}
+
+.app-banner .swiper-horizontal > .swiper-pagination-bullets {
+  position: relative;
+  bottom: 0;
+}
+
+.app-banner .swiper-horizontal .swiper-slide {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.app-banner .swiper-horizontal .swiper-slide > img {
+  border-radius: var(--radius-box);
+}
+</style>
--- a/frontend/spa/src/components/BottomDrawer.vue
+++ b/frontend/spa/src/components/BottomDrawer.vue
@@ -0,0 +1,56 @@
+<template>
+  <transition name="fade">
+    <div
+        v-if="visible"
+        class="fixed inset-0 bg-black/50 z-40"
+        @click.self="close"
+    >
+      <transition name="slide-up">
+        <div
+            class="fixed bottom-0 left-0 w-full h-[80vh] bg-white rounded-t-2xl shadow-xl z-50 p-4"
+        >
+          <slot />
+        </div>
+      </transition>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import {computed} from "vue";
+
+const props = defineProps({
+  modelValue: Boolean,
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+
+function close() {
+  visible.value = false
+}
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform 0.25s ease;
+}
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(100%);
+}
+</style>
--- a/frontend/spa/src/components/BottomPanel.vue
+++ b/frontend/spa/src/components/BottomPanel.vue
@@ -0,0 +1,5 @@
+<template>
+  <div 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">
+    <slot></slot>
+  </div>
+</template>
--- a/frontend/spa/src/components/CartButton.vue
+++ b/frontend/spa/src/components/CartButton.vue
@@ -0,0 +1,45 @@
+<template>
+  <div v-if="isCartBtnShow" 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-xl 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 {computed, onMounted} from "vue";
+import {useCartStore} from "@/stores/CartStore.js";
+import {useRoute, useRouter} from "vue-router";
+
+const cart = useCartStore();
+const router = useRouter();
+const route = useRoute();
+
+const isCartBtnShow = computed(() => {
+  return route.name === 'product.show';
+});
+
+
+function openCart() {
+  window.Telegram.WebApp.HapticFeedback.selectionChanged();
+  router.push({name: 'cart'});
+}
+
+onMounted(async () => {
+  await cart.getProducts();
+});
+</script>
+
+
+
+<style scoped>
+
+</style>
--- a/frontend/spa/src/components/CategoriesInline.vue
+++ b/frontend/spa/src/components/CategoriesInline.vue
@@ -0,0 +1,28 @@
+<template>
+<div class="flex items-center justify-center p-5 gap-2 flex-wrap">
+  <RouterLink class="btn btn-md" to="/categories">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
+    </svg>
+    Каталог
+  </RouterLink>
+
+  <RouterLink
+      v-for="category in categoriesStore.topCategories"
+      class="btn btn-md max-w-[12rem]"
+      :to="{name: 'product.categories.show', params: {category_id: category.id}}"
+      @click="onCategoryClick"
+  >
+    <span class="overflow-hidden text-ellipsis whitespace-nowrap">{{ category.name }}</span>
+  </RouterLink>
+</div>
+</template>
+
+<script setup>
+import {useCategoriesStore} from "@/stores/CategoriesStore.js";
+const categoriesStore = useCategoriesStore();
+
+function onCategoryClick() {
+  window.Telegram.WebApp.HapticFeedback.impactOccurred('soft');
+}
+</script>
--- a/frontend/spa/src/components/CategoriesList/CategoryItem.vue
+++ b/frontend/spa/src/components/CategoriesList/CategoryItem.vue
@@ -0,0 +1,27 @@
+<template>
+  <a
+      href="#"
+      :key="category.id"
+      class="py-2 px-4 flex items-center mb-3"
+      @click.prevent="$emit('onSelect', category)"
+  >
+    <div class="avatar">
+      <div class="w-8 h-8 rounded">
+        <img :src="category.image" :alt="category.name" loading="lazy" width="30" height="30" class="bg-base-400"/>
+      </div>
+    </div>
+
+    <h3 class="ml-5 text-lg line-clamp-2">{{ category.name }}</h3>
+  </a>
+</template>
+
+<script setup>
+const props = defineProps({
+  category: {
+    type: Object,
+    required: true,
+  }
+});
+
+const emit = defineEmits(["onSelect"]);
+</script>
--- a/frontend/spa/src/components/Dock.vue
+++ b/frontend/spa/src/components/Dock.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="telecart-dock fixed bottom-0 w-full z-50 px-10">
+    <div
+        class="telecart-dock-inner flex justify-around items-center bg-base-300/10 h-full backdrop-blur-md border-base-300/90 border">
+      <RouterLink
+          :to="{name: 'home'}"
+          :class="{'active': route.name === 'home'}"
+          class="telecart-dock-item"
+          @click="onDockItemClick"
+      >
+        <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt">
+            <polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10"
+                      stroke-width="2"></polyline>
+            <path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor"
+                  stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path>
+            <line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square"
+                  stroke-miterlimit="10" stroke-width="2"></line>
+          </g>
+        </svg>
+        <span class="dock-label">Главная</span>
+      </RouterLink>
+
+      <RouterLink
+          :to="{name: 'search'}"
+          :class="{'active': route.name === 'search'}"
+          class="telecart-dock-item"
+          @click="onDockItemClick"
+      >
+        <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+             stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round"
+                d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
+        </svg>
+        <span class="dock-label">Поиск</span>
+      </RouterLink>
+
+      <RouterLink
+          v-if="settings.store_enabled"
+          :to="{name: 'cart'}"
+          :class="{'active': route.name === 'cart'}"
+          class="telecart-dock-item"
+          @click="onDockItemClick"
+      >
+        <div class="indicator">
+          <span class="indicator-item indicator-end badge badge-secondary badge-xs">{{ cart.productsCount }}</span>
+          <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+               stroke-width="1.5" stroke="currentColor">
+            <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>
+        </div>
+        <span class="dock-label">Корзина</span>
+      </RouterLink>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {useRoute} from "vue-router";
+import {useCartStore} from "@/stores/CartStore.js";
+import {useSettingsStore} from "@/stores/SettingsStore.js";
+
+const route = useRoute();
+const cart = useCartStore();
+const settings = useSettingsStore();
+const haptic = window.Telegram.WebApp.HapticFeedback;
+
+function onDockItemClick() {
+  haptic.selectionChanged();
+}
+</script>
+
+<style scoped>
+.telecart-dock {
+  padding-bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + 5px);
+  height: calc(70px + var(--tg-safe-area-inset-bottom, 0px));
+}
+
+.telecart-dock-inner {
+  border-radius: var(--radius-field);
+  border-width: var(--border);
+  border-style: solid;
+}
+
+.telecart-dock-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: var(--radius-field);
+  padding: 5px 13px;
+  min-width: 90px;
+}
+
+.telecart-dock-item.active {
+  background-color: var(--color-primary);
+  backdrop-filter: blur(var(--blur-sm));
+  color: var(--color-primary-content);
+}
+</style>
--- a/frontend/spa/src/components/Form/TgInput.vue
+++ b/frontend/spa/src/components/Form/TgInput.vue
@@ -0,0 +1,52 @@
+<template>
+  <fieldset class="fieldset mb-0">
+    <input
+        :type="type"
+        :inputmode="inputMode"
+        class="input input-lg w-full"
+        :class="error ? 'input-error' : ''"
+        :placeholder="placeholder"
+        v-model="model"
+        @input="$emit('clearError')"
+        :maxlength="maxlength"
+    />
+    <p v-if="error" class="label text-error">{{ error }}</p>
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+import {computed} from "vue";
+
+const model = defineModel();
+const props = defineProps({
+  error: {
+    type: String,
+    default: null,
+  },
+
+  placeholder: {
+    type: String,
+    default: null,
+  },
+
+  type: {
+    type: String,
+    default: 'text',
+  },
+
+  maxlength: {
+    type: Number,
+    default: 1000,
+  }
+});
+const emits = defineEmits(['clearError']);
+
+const inputMode = computed(() => {
+  switch (props.type) {
+    case 'email': return 'email';
+    case 'tel': return 'tel';
+    case 'number': return 'numeric';
+    default: return 'text';
+  }
+});
+</script>
--- a/frontend/spa/src/components/Form/TgTextarea.vue
+++ b/frontend/spa/src/components/Form/TgTextarea.vue
@@ -0,0 +1,36 @@
+<template>
+  <fieldset class="fieldset mb-0">
+    <textarea
+        class="input input-lg w-full h-50"
+        :class="error ? 'input-error' : ''"
+        :placeholder="placeholder"
+        v-model="model"
+        @input="$emit('clearError')"
+        rows="8"
+        :maxlength="maxlength"
+    />
+    <p v-if="error" class="label">{{ error }}</p>
+  </fieldset>
+</template>
+
+<script setup lang="ts">
+
+const model = defineModel();
+const props = defineProps({
+  error: {
+    type: String,
+    default: null,
+  },
+
+  placeholder: {
+    type: String,
+    default: null,
+  },
+
+  maxlength: {
+    type: Number,
+    default: 1000,
+  }
+});
+const emits = defineEmits(['clearError']);
+</script>
--- a/frontend/spa/src/components/FullScreenImageViewer.vue
+++ b/frontend/spa/src/components/FullScreenImageViewer.vue
@@ -0,0 +1,79 @@
+<template>
+  <div class="fullscreen-image-viewer fixed z-200 top-0 inset-0 flex justify-center align-center flex-col h-full bg-black">
+    <Swiper
+        :zoom="true"
+        :navigation="true"
+        :pagination="{
+          type: 'fraction',
+        }"
+        :initialSlide="activeIndex"
+        :modules="[Zoom, Navigation, Pagination]"
+        class="mySwiper w-full h-full"
+        @slider-move="vibrate"
+    >
+      <SwiperSlide v-for="image in images">
+        <div class="swiper-zoom-container">
+          <img :src="image.largeURL" :alt="image.alt" class="w-full h-full"/>
+        </div>
+      </SwiperSlide>
+    </Swiper>
+
+    <button
+        class="absolute z-50 text-white text-xl right-5 cursor-pointer"
+        style="top: calc(var(--tg-safe-area-inset-top, 5px) + var(--tg-content-safe-area-inset-top, 5px))"
+        @click="onClose"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+           class="size-10">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+      </svg>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import {Navigation, Pagination, Zoom} from "swiper/modules";
+import {Swiper, SwiperSlide} from "swiper/vue";
+import {onMounted} from "vue";
+
+const props = defineProps({
+  images: {
+    type: Array,
+    default: () => [],
+  },
+
+  activeIndex: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emits = defineEmits(['close']);
+let canVibrate = true;
+
+function vibrate() {
+  if (!canVibrate) return;
+  window.Telegram.WebApp.HapticFeedback.impactOccurred('soft');
+  canVibrate = false;
+  setTimeout(() => {
+    canVibrate = true;
+  }, 50);
+}
+
+function onClose() {
+  window.Telegram.WebApp.HapticFeedback.impactOccurred('medium');
+  emits('close');
+}
+</script>
+
+<style>
+.fullscreen-image-viewer .swiper-button-next,
+.fullscreen-image-viewer .swiper-button-prev {
+  color: white;
+  mix-blend-mode: difference;
+}
+
+.fullscreen-image-viewer .swiper-pagination-fraction {
+  bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, px));
+}
+</style>
--- a/frontend/spa/src/components/Icons/IconFunnel.vue
+++ b/frontend/spa/src/components/Icons/IconFunnel.vue
@@ -0,0 +1,7 @@
+<template>
+  <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="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"/>
+  </svg>
+</template>
--- a/frontend/spa/src/components/LoadingFullScreen.vue
+++ b/frontend/spa/src/components/LoadingFullScreen.vue
@@ -0,0 +1,17 @@
+<template>
+  <div style="z-index: 99999" class="fixed left-0 w-full h-full bg-base-100 top-0">
+    <div class="flex flex-col items-center justify-center h-full">
+      <span class="loading loading-infinity loading-xl"></span>
+      <h1>{{ text }}</h1>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  text: {
+    type: String,
+    default: 'Получение данных...',
+  },
+});
+</script>
--- a/frontend/spa/src/components/Navbar.vue
+++ b/frontend/spa/src/components/Navbar.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="telecart-navbar fixed navbar bg-primary text-primary-content z-50 shadow-md" :class="{'pb-0' : platform !== 'ios'}">
+    <div class="navbar-start">
+      <div v-if="false" class="dropdown">
+        <button class="btn btn-ghost btn-circle" @click="toggleDrawer">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" /> </svg>
+        </button>
+      </div>
+    </div>
+
+    <div class="navbar-center">
+      <RouterLink :to="{name: 'home'}" class="text-xl flex items-center">
+        <div class="avatar mr-2">
+          <div v-if="settings.app_icon" class="h-8 rounded-full bg-base-100">
+            <img :src="settings.app_icon" class="h-8" alt=""/>
+          </div>
+        </div>
+
+        {{ settings.app_name }}
+      </RouterLink>
+    </div>
+
+    <div class="navbar-end">
+      <button v-if="false" class="btn btn-ghost btn-circle">
+        <div class="indicator">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg>
+          <span class="badge badge-xs badge-secondary indicator-item">1</span>
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {useSettingsStore} from "@/stores/SettingsStore.js";
+import {useMiniApp} from "vue-tg";
+import {ref} from "vue";
+
+const settings = useSettingsStore();
+const emits = defineEmits(['drawer']);
+
+const tg = useMiniApp();
+const platform = ref();
+platform.value = tg.platform;
+
+function toggleDrawer() {
+  emits('drawer');
+}
+</script>
+
+<style scoped>
+.telecart-navbar {
+  padding-top: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));
+  min-height: var(--tc-navbar-min-height);
+}
+</style>
--- a/frontend/spa/src/components/NoProducts.vue
+++ b/frontend/spa/src/components/NoProducts.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="flex flex-col items-center justify-center text-center py-16">
+    <span class="text-5xl mb-4">🛒</span>
+    <h2 class="text-xl font-semibold mb-2">Здесь нет товаров</h2>
+    <p class="text-sm mb-4">
+      Попробуйте изменить настройки фильтров
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const goBack = () => router.back();
+</script>
--- a/frontend/spa/src/components/Price.vue
+++ b/frontend/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>
--- a/frontend/spa/src/components/ProductFilters/Components/ForMainPage.vue
+++ b/frontend/spa/src/components/ProductFilters/Components/ForMainPage.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="border-b mb-5 border-b-base-200 flex justify-between">
+    <div class="mb-2">Рекомендуемые товары</div>
+    <div>
+      <input
+          type="checkbox"
+          class="toggle"
+          v-model="filter.criteria.product_for_main_page.params.value"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  filter: {
+    required: true,
+  },
+});
+</script>
--- a/frontend/spa/src/components/ProductFilters/Components/ProductCategory/ProductCategory.vue
+++ b/frontend/spa/src/components/ProductFilters/Components/ProductCategory/ProductCategory.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="border-b mb-5 border-b-base-200">
+    <div class="mb-2">Категория</div>
+    <div v-if="categoriesStore.isLoading" class="skeleton h-10 w-full"></div>
+    <select
+        v-else
+        v-model.number="props.filter.criteria.product_category_id.params.value"
+        class="select w-full"
+    >
+      <option :value="null">Любая категория</option>
+      <SelectOption
+          v-for="category in categoriesStore.categories"
+          :key="category.id"
+          :level="0"
+          :category="category"
+      />
+    </select>
+  </div>
+</template>
+
+<script setup>
+import {useCategoriesStore} from "@/stores/CategoriesStore.js";
+import {onMounted} from "vue";
+import SelectOption from "@/components/ProductFilters/Components/ProductCategory/SelectOption.vue";
+
+const props = defineProps({
+  filter: {
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:modelValue']);
+const categoriesStore = useCategoriesStore();
+
+onMounted(() => {
+  categoriesStore.fetchCategories();
+})
+</script>
+
+<style scoped lang="scss">
+
+</style>
--- a/frontend/spa/src/components/ProductFilters/Components/ProductCategory/SelectOption.vue
+++ b/frontend/spa/src/components/ProductFilters/Components/ProductCategory/SelectOption.vue
@@ -0,0 +1,31 @@
+<template>
+  <option :value="category.id">
+    {{ "-".repeat(level) }} {{ category.name }}
+  </option>
+
+  <SelectOption
+      v-if="category.children"
+      v-for="child in category.children"
+      :key="child.id"
+      :category="child"
+      :level="level + 1"
+  />
+</template>
+
+<script setup>
+const props = defineProps({
+  category: {
+    type: Object,
+    required: true,
+  },
+
+  level: {
+    type: Number,
+    default: 0,
+  }
+})
+</script>
+
+<style scoped lang="scss">
+
+</style>
--- a/frontend/spa/src/components/ProductFilters/Components/ProductPrice.vue
+++ b/frontend/spa/src/components/ProductFilters/Components/ProductPrice.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="border-b mb-5 border-b-base-200">
+    <div class="mb-2">Цена</div>
+    <div class="flex justify-between">
+      <label class="input mr-3">
+        От
+        <input
+            type="number"
+            inputmode="numeric"
+            class="grow"
+            min="0"
+            step="50"
+            :placeholder="filter.criteria.product_price.params.value.from || '0'"
+            v-model="filter.criteria.product_price.params.value.from"
+        />
+      </label>
+
+      <label class="input">
+        До
+        <input
+            type="number"
+            inputmode="numeric"
+            class="grow"
+            min="0"
+            step="50"
+            :placeholder="filter.criteria.product_price.params.value.to || '∞'"
+            :value="filter.criteria.product_price.params.value.to"
+            v-model="filter.criteria.product_price.params.value.to"
+        />
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  filter: {
+    required: true,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>
--- a/frontend/spa/src/components/ProductImageSwiper.vue
+++ b/frontend/spa/src/components/ProductImageSwiper.vue
@@ -0,0 +1,87 @@
+<template>
+  <swiper-container ref="swiperEl" init="false" pagination-dynamic-bullets="true">
+    <swiper-slide
+        v-for="image in images"
+        :key="image.url"
+        class="bg-base-100 overflow-hidden"
+        style="aspect-ratio:1/1; border-radius:12px;"
+    >
+      <img
+          :src="image.url"
+          :alt="image.alt"
+          loading="lazy"
+          class="w-full h-full"
+          style="object-fit: contain"
+      />
+    </swiper-slide>
+  </swiper-container>
+</template>
+
+<script setup>
+import {onActivated, onMounted, onUnmounted, ref} from "vue";
+
+const props = defineProps({
+  images: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const params = {
+  injectStyles: [`
+    .swiper-pagination {
+      position: relative;
+      padding-top: 15px;
+    }
+      `],
+  pagination: {
+    clickable: true,
+  },
+}
+
+const swiperEl = ref(null);
+
+onUnmounted(() => {
+
+});
+
+onMounted(() => {
+  const el = swiperEl.value;
+  if (!el) return;
+
+  el.addEventListener('swiperactiveindexchange', () => {
+    window.Telegram?.WebApp?.HapticFeedback?.selectionChanged();
+  });
+
+  Object.assign(el, params);
+  el.initialize();
+
+  // 👇 важно, особенно если картинки подгружаются не сразу
+  el.addEventListener('swiperinit', () => {
+    el.swiper.update();
+  });
+});
+
+onActivated(() => {
+  const el = swiperEl.value
+  if (!el) return;
+
+  // Если swiper есть, но pagination потерялся — уничтожаем
+  if (el.swiper) {
+    try {
+      el.swiper.destroy(true, true)
+    } catch (e) {
+      console.warn('Failed to destroy swiper', e)
+    }
+  }
+
+  // Переинициализация с параметрами
+  Object.assign(el, params)
+  el.initialize()
+
+  // Пересчёт пагинации после инициализации
+  el.addEventListener('swiperinit', () => {
+    el.swiper.update()
+  })
+})
+</script>
--- a/frontend/spa/src/components/ProductNotFound.vue
+++ b/frontend/spa/src/components/ProductNotFound.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="flex flex-col items-center justify-center text-center py-16">
+    <span class="text-5xl mb-4">😔</span>
+    <h2 class="text-xl font-semibold mb-2">Товар не найден</h2>
+    <p class="text-sm mb-4">К сожалению, запрошенный товар недоступен или был удалён.</p>
+    <button class="btn btn-primary" @click="goBack">
+      <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="M15.75 19.5 8.25 12l7.5-7.5" />
+      </svg>
+      Назад
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router';
+const router = useRouter();
+const goBack = () => router.back();
+</script>
--- a/frontend/spa/src/components/ProductOptions/Cart/OptionCheckbox.vue
+++ b/frontend/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>
--- a/frontend/spa/src/components/ProductOptions/Cart/OptionRadio.vue
+++ b/frontend/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>
--- a/frontend/spa/src/components/ProductOptions/Cart/OptionText.vue
+++ b/frontend/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>
--- a/frontend/spa/src/components/ProductOptions/ProductOptions.vue
+++ b/frontend/spa/src/components/ProductOptions/ProductOptions.vue
@@ -0,0 +1,31 @@
+<template>
+  <div v-for="option in options" :key="option.product_option_id" class="mt-3">
+    <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>
+
+<script setup>
+import OptionRadio from "./Types/OptionRadio.vue";
+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>
--- a/frontend/spa/src/components/ProductOptions/Types/OptionCheckbox.vue
+++ b/frontend/spa/src/components/ProductOptions/Types/OptionCheckbox.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <OptionTemplate :name="model.name" :required="model.required">
+      <div class="flex flex-wrap gap-2">
+        <label
+            v-for="value in model.product_option_value"
+            class="group relative flex items-center justify-center btn btn-soft btn-secondary btn-sm"
+            :class="value.selected ? 'btn-active' : ''"
+        >
+          <input
+              type="checkbox"
+              :value="value.product_option_value_id"
+              :checked="value.selected"
+              @change="select(value)"
+              class="absolute inset-0 appearance-none focus:outline-none disabled:cursor-not-allowed"
+          />
+
+          <span class="text-xs font-medium group-has-checked:text-white">
+            {{ value.name }}<span v-if="value.price"> ({{ value.price_prefix }}{{ value.price }})</span>
+          </span>
+        </label>
+      </div>
+    </OptionTemplate>
+  </div>
+</template>
+
+<script setup>
+import OptionTemplate from "./OptionTemplate.vue";
+
+const model = defineModel();
+const emit = defineEmits(['update:modelValue']);
+
+function select(toggledValue) {
+  model.value.product_option_value.forEach(value => {
+    if (value === toggledValue) {
+      value.selected = !value.selected;
+    }
+  });
+
+  model.value.value = model.value.product_option_value.filter(item => item.selected === true);
+
+  emit('update:modelValue', model.value);
+}
+</script>
--- a/frontend/spa/src/components/ProductOptions/Types/OptionRadio.vue
+++ b/frontend/spa/src/components/ProductOptions/Types/OptionRadio.vue
@@ -0,0 +1,42 @@
+<template>
+  <OptionTemplate :name="model.name" :required="model.required">
+    <div class="flex flex-wrap gap-2">
+      <label
+          v-for="value in model.product_option_value"
+          class="group relative flex items-center justify-center btn btn-soft btn-secondary btn-sm"
+          :class="value.selected ? 'btn-active' : ''"
+      >
+
+        <input
+            type="radio"
+            :name="`option-${model.product_option_id}`"
+            :value="value.product_option_value_id"
+            :checked="value.selected"
+            @change="select(value)"
+            class="absolute inset-0 appearance-none focus:outline-none disabled:cursor-not-allowed"
+        />
+
+          <span class="text-xs font-medium">
+            {{ value.name }}<span v-if="value.price"> ({{ value.price_prefix }}{{ value.price }})</span>
+          </span>
+      </label>
+    </div>
+  </OptionTemplate>
+</template>
+
+<script setup>
+import OptionTemplate from "./OptionTemplate.vue";
+
+const model = defineModel();
+const emit = defineEmits(['update:modelValue']);
+
+function select(selectedValue) {
+  model.value.product_option_value.forEach(value => {
+    value.selected = (value === selectedValue);
+  });
+
+  model.value.value = selectedValue;
+
+  emit('update:modelValue', model);
+}
+</script>
--- a/frontend/spa/src/components/ProductOptions/Types/OptionSelect.vue
+++ b/frontend/spa/src/components/ProductOptions/Types/OptionSelect.vue
@@ -0,0 +1,38 @@
+<template>
+  <OptionTemplate :name="model.name" :required="model.required">
+    <select
+        :name="`option-${model.product_option_id}`"
+        class="select"
+        @change="onChange"
+    >
+      <option value="" disabled selected>Выберите значение</option>
+      <option
+          v-for="value in model.product_option_value"
+          :key="value.product_option_value_id"
+          :value="value.product_option_value_id"
+          :selected="value.selected"
+      >
+        {{ value.name }}<span v-if="value.price"> ({{ value.price_prefix }}{{ value.price }})</span>
+      </option>
+    </select>
+  </OptionTemplate>
+</template>
+
+<script setup>
+import OptionTemplate from "./OptionTemplate.vue";
+
+const model = defineModel();
+const emit = defineEmits(['update:modelValue']);
+
+function onChange(event) {
+  const selectedId = Number(event.target.value);
+
+  model.value.product_option_value.forEach(value => {
+    value.selected = (value.product_option_value_id === selectedId);
+  });
+
+  model.value.value = model.value.product_option_value.find(value => value.product_option_value_id === selectedId);
+
+  emit('update:modelValue', model.value);
+}
+</script>
--- a/frontend/spa/src/components/ProductOptions/Types/OptionTemplate.vue
+++ b/frontend/spa/src/components/ProductOptions/Types/OptionTemplate.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h3 class="text-sm mb-2">
+      {{ name }} <span v-if="required" class="text-error">*</span>
+    </h3>
+
+    <fieldset>
+      <slot></slot>
+    </fieldset>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  name: {
+    type: String,
+    required: true,
+  },
+
+  required: {
+    type: Boolean,
+    default: false,
+  }
+});
+</script>
--- a/frontend/spa/src/components/ProductOptions/Types/OptionText.vue
+++ b/frontend/spa/src/components/ProductOptions/Types/OptionText.vue
@@ -0,0 +1,23 @@
+<template>
+  <OptionTemplate :name="model.name" :required="model.required">
+    <input
+        type="text"
+        class="input"
+        :placeholder="model.name"
+        :value="model.value"
+        @input="input(model, $event.target.value)"
+    />
+  </OptionTemplate>
+</template>
+
+<script setup>
+import OptionTemplate from "./OptionTemplate.vue";
+
+const model = defineModel();
+const emit = defineEmits(['update:modelValue']);
+
+function input(model, newValue) {
+  model.value = newValue;
+  emit('update:modelValue', model);
+}
+</script>
--- a/frontend/spa/src/components/ProductOptions/Types/OptionTextarea.vue
+++ b/frontend/spa/src/components/ProductOptions/Types/OptionTextarea.vue
@@ -0,0 +1,23 @@
+<template>
+  <OptionTemplate :name="model.name" :required="model.required">
+    <textarea
+        type="text"
+        class="textarea"
+        :placeholder="model.name"
+        v-text="model.value"
+        @input="input(model, $event.target.value)"
+    />
+  </OptionTemplate>
+</template>
+
+<script setup>
+import OptionTemplate from "./OptionTemplate.vue";
+
+const model = defineModel();
+const emit = defineEmits(['update:modelValue']);
+
+function input(model, newValue) {
+  model.value = newValue;
+  emit('update:modelValue', model);
+}
+</script>
--- a/frontend/spa/src/components/ProductsList.vue
+++ b/frontend/spa/src/components/ProductsList.vue
@@ -0,0 +1,140 @@
+<template>
+  <div class="mx-auto max-w-2xl px-4 py-4 pb-14">
+    <h2 v-if="categoryName" class="text-lg font-bold mb-5 text-center">{{ categoryName }}</h2>
+
+    <template v-if="products.length > 0">
+      <div
+          class="products-grid grid grid-cols-2 gap-x-5 gap-y-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"
+      >
+        <RouterLink
+            v-for="(product, index) in products"
+            :key="product.id"
+            class="product-grid-card group"
+            :to="`/product/${product.id}`"
+            @click="productClick(product, index)"
+        >
+          <ProductImageSwiper :images="product.images"/>
+          <h3 class="product-title mt-4 text-sm">{{ product.name }}</h3>
+
+          <div v-if="product.special" class="mt-1">
+            <p class="text-xs line-through mr-2">{{ product.price }}</p>
+            <p class="text-lg font-medium">{{ product.special }}</p>
+          </div>
+          <p v-else class="mt-1 text-lg font-medium">{{ product.price }}</p>
+
+        </RouterLink>
+        <div ref="bottom" style="height: 1px;"></div>
+      </div>
+
+      <div v-if="isLoadingMore" class="text-center mt-5">
+        <span class="loading loading-spinner loading-md"></span> Загрузка товаров...
+      </div>
+
+      <div v-else-if="hasMore === false" class="text-xs text-center mt-4 pt-4 mb-2 border-t">
+        {{ settings.texts.no_more_products }}
+      </div>
+    </template>
+
+    <div v-else-if="isLoading === true"
+         class="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+      <div v-for="n in 8" :key="n" class="animate-pulse space-y-2">
+        <div class="aspect-square bg-gray-200 rounded-md"></div>
+        <div class="h-4 bg-gray-200 rounded w-3/4"></div>
+        <div class="h-4 bg-gray-200 rounded w-1/2"></div>
+      </div>
+    </div>
+
+    <NoProducts v-else/>
+  </div>
+</template>
+
+<script setup>
+import NoProducts from "@/components/NoProducts.vue";
+import ProductImageSwiper from "@/components/ProductImageSwiper.vue";
+import {useSettingsStore} from "@/stores/SettingsStore.js";
+import {ref} from "vue";
+import {useIntersectionObserver} from '@vueuse/core';
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+
+const yaMetrika = useYaMetrikaStore();
+const settings = useSettingsStore();
+const bottom = ref(null);
+
+const emits = defineEmits(['loadMore']);
+
+const props = defineProps({
+  products: {
+    type: Array,
+    default: () => [],
+  },
+
+  hasMore: {
+    type: Boolean,
+    default: false,
+  },
+
+  categoryName: {
+    type: String,
+    default: () => '',
+  },
+
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+
+  isLoadingMore: {
+    type: Boolean,
+    default: false,
+  }
+});
+
+function productClick(product, index) {
+  window.Telegram.WebApp.HapticFeedback.selectionChanged();
+  yaMetrika.dataLayerPush({
+    "ecommerce": {
+      "currencyCode": settings.currency_code,
+      "click": {
+        "products": [
+          {
+            "id": product.id,
+            "name": product.name,
+            "price": product.final_price_numeric,
+            "brand": product.manufacturer_name,
+            "category": product.category_name,
+            "list": "Главная страница",
+            "position": index,
+          }
+        ]
+      }
+    }
+  });
+}
+
+useIntersectionObserver(
+    bottom,
+    ([entry]) => {
+      console.debug('Check Intersection');
+      if (entry?.isIntersecting === true
+          && props.hasMore === true
+          && props.isLoading === false
+          && props.isLoadingMore === false
+      ) {
+        emits('loadMore');
+      }
+    },
+    {
+      root: null,
+      rootMargin: '400px 0',
+    }
+);
+</script>
+
+<style scoped>
+.product-grid-card .product-title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--product_list_title_max_lines, 3);
+  overflow: hidden;
+}
+</style>
--- a/frontend/spa/src/components/Quantity.vue
+++ b/frontend/spa/src/components/Quantity.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="flex items-center text-center">
+    <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="inc" :disabled="disabled">+</button>
+  </div>
+</template>
+
+<script setup>
+import {computed} from "vue";
+
+const model = defineModel();
+const props = defineProps({
+  max: Number,
+  size: {
+    type: String,
+    default: '',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  }
+});
+
+const btnClassList = computed(() => {
+  let classList = ['btn'];
+  if (props.size) {
+    classList.push(`btn-${props.size}`);
+  }
+  return classList;
+});
+
+function inc() {
+  if (props.disabled) return;
+
+  window.Telegram.WebApp.HapticFeedback.selectionChanged();
+
+  if (props.max && model.value + 1 > props.max) {
+    model.value = props.max;
+    return;
+  }
+
+  model.value++;
+}
+
+function dec() {
+  if (props.disabled) return;
+
+  window.Telegram.WebApp.HapticFeedback.selectionChanged();
+
+  if (model.value  - 1 >= 1) {
+    model.value--;
+  }
+}
+</script>
--- a/frontend/spa/src/components/SearchInput.vue
+++ b/frontend/spa/src/components/SearchInput.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="search-wrapper w-full">
+    <label class="input w-full">
+      <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <g
+            stroke-linejoin="round"
+            stroke-linecap="round"
+            stroke-width="2.5"
+            fill="none"
+            stroke="currentColor"
+        >
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="m21 21-4.3-4.3"></path>
+        </g>
+      </svg>
+      <input
+          readonly
+          class="grow input-lg w-full"
+          placeholder="Поиск по магазину"
+          @click="showSearchPage"
+      />
+    </label>
+  </div>
+</template>
+
+<script setup>
+import {useRouter} from "vue-router";
+import {useSearchStore} from "@/stores/SearchStore.js";
+
+const router = useRouter();
+
+function showSearchPage() {
+  router.push({name: 'search'});
+  useSearchStore().reset();
+  window.Telegram.WebApp.HapticFeedback.impactOccurred('medium');
+}
+</script>
+
+
--- a/frontend/spa/src/constants/options.js
+++ b/frontend/spa/src/constants/options.js
@@ -0,0 +1,7 @@
+export const SUPPORTED_OPTION_TYPES = [
+    'checkbox',
+    'radio',
+    'select',
+    'text',
+    'textarea',
+];
--- a/frontend/spa/src/constants/yaMetrikaGoals.js
+++ b/frontend/spa/src/constants/yaMetrikaGoals.js
@@ -0,0 +1,15 @@
+export const YA_METRIKA_GOAL = {
+    ADD_TO_CART: 'add_to_cart',
+    PRODUCT_OPEN_EXTERNAL: 'product_open_external',
+    CREATE_ORDER: 'create_order',
+    ORDER_CREATED_SUCCESS: 'order_created_success',
+    VIEW_PRODUCT: 'view_product',
+    VIEW_CART: 'view_cart',
+    VIEW_CHECKOUT: 'view_checkout',
+    VIEW_HOME: 'view_home',
+    VIEW_FILTERS: 'view_filters',
+    FILTERS_APPLY: 'filters_apply',
+    FILTERS_RESET: 'filters_reset',
+    VIEW_SEARCH: 'view_search',
+    PERFORM_SEARCH: 'perform_search',
+};
--- a/frontend/spa/src/helpers.js
+++ b/frontend/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}`;
+}
--- a/frontend/spa/src/main.js
+++ b/frontend/spa/src/main.js
@@ -0,0 +1,71 @@
+import {createApp} from 'vue'
+import App from './App.vue'
+import './style.css'
+import {VueTelegramPlugin} from 'vue-tg';
+import {router} from './router';
+import {createPinia} from 'pinia';
+
+import {useCategoriesStore} from "@/stores/CategoriesStore.js";
+import {useSettingsStore} from "@/stores/SettingsStore.js";
+import ApplicationError from "@/ApplicationError.vue";
+import AppMetaInitializer from "@/utils/AppMetaInitializer.ts";
+import {injectYaMetrika} from "@/utils/yaMetrika.js";
+
+import { register } from 'swiper/element/bundle';
+import 'swiper/element/bundle';
+import 'swiper/css/bundle';
+import AppLoading from "@/AppLoading.vue";
+import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
+register();
+
+const pinia = createPinia();
+const app = createApp(App);
+app
+    .use(pinia)
+    .use(router)
+    .use(VueTelegramPlugin);
+
+const settings = useSettingsStore();
+
+const appLoading = createApp(AppLoading);
+appLoading.mount('#app');
+
+settings.load()
+    .then(() => window.Telegram.WebApp.lockOrientation())
+    .then(async () => {
+        console.debug('Load default filters for the main page');
+        const filtersStore = useProductFiltersStore();
+        filtersStore.applied = await filtersStore.fetchFiltersForMainPage();
+    })
+    .then(() => {
+        if (settings.app_enabled === false) {
+            throw new Error('App disabled (maintenance mode)');
+        }
+    })
+    .then(() => {
+        console.debug('[Init] Set theme attributes');
+        document.documentElement.setAttribute('data-theme', settings.theme[window.Telegram.WebApp.colorScheme]);
+        if (settings.night_auto) {
+            window.Telegram.WebApp.onEvent('themeChanged', function () {
+                document.documentElement.setAttribute('data-theme', settings.theme[this.colorScheme]);
+            });
+        }
+
+        for (const key in settings.theme.variables) {
+            document.documentElement.style.setProperty(key, settings.theme.variables[key]);
+        }
+    })
+    .then(() => {
+        console.debug('[Init] Load front page categories and products.');
+        const categoriesStore = useCategoriesStore();
+        categoriesStore.fetchTopCategories();
+    })
+    .then(() => new AppMetaInitializer(settings).init())
+    .then(() => { appLoading.unmount(); app.mount('#app'); })
+    .then(() => window.Telegram.WebApp.ready())
+    .then(() => settings.ya_metrika_enabled && injectYaMetrika())
+    .catch(error => {
+        console.error(error);
+        const errorApp = createApp(ApplicationError, {error});
+        errorApp.mount('#app-error');
+    });
--- a/frontend/spa/src/router.js
+++ b/frontend/spa/src/router.js
@@ -0,0 +1,43 @@
+import {createRouter, createWebHashHistory} from 'vue-router';
+import Home from './views/Home.vue';
+import Product from './views/Product.vue';
+import CategoriesList from "./views/CategoriesList.vue";
+import Cart from "./views/Cart.vue";
+import Products from "@/views/Products.vue";
+import Checkout from "@/views/Checkout.vue";
+import OrderCreated from "@/views/OrderCreated.vue";
+import Search from "@/views/Search.vue";
+import Filters from "@/views/Filters.vue";
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+
+const routes = [
+    {
+        path: '/',
+        name: 'home',
+        component: Home,
+    },
+    {path: '/filters', name: 'filters', component: Filters},
+    {path: '/product/:id', name: 'product.show', component: Product},
+    {
+        path: '/products/:category_id',
+        name: 'product.categories.show',
+        component: Products,
+    },
+    {path: '/categories', name: 'categories', component: CategoriesList},
+    {path: '/category/:id', name: 'category.show', component: CategoriesList},
+    {path: '/cart', name: 'cart', component: Cart},
+    {path: '/checkout', name: 'checkout', component: Checkout},
+    {path: '/success', name: 'order_created', component: OrderCreated},
+    {path: '/search', name: 'search', component: Search},
+];
+
+export const router = createRouter({
+    history: createWebHashHistory('/image/catalog/tgshopspa/'),
+    routes,
+});
+
+router.beforeEach((to, from, next) => {
+    const ym = useYaMetrikaStore();
+    ym.prevPath = from.path;
+    next();
+});
--- a/frontend/spa/src/stores/CartStore.js
+++ b/frontend/spa/src/stores/CartStore.js
@@ -0,0 +1,165 @@
+import {defineStore} from "pinia";
+import {isNotEmpty} from "@/helpers.js";
+import {addToCart, cartEditItem, cartRemoveItem, getCart, setCoupon, setVoucher} from "@/utils/ftch.js";
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+import {useSettingsStore} from "@/stores/SettingsStore.js";
+
+export const useCartStore = defineStore('cart', {
+    state: () => ({
+        items: [],
+        productsCount: 0,
+        total: 0,
+        isLoading: false,
+        reason: null,
+        error_warning: '',
+        attention: '',
+        success: '',
+        coupon: '',
+        voucher: '',
+    }),
+
+    getters: {
+        canCheckout: (state) => {
+            if (state.isLoading || state.error_warning.length > 0) {
+                return false;
+            }
+        },
+    },
+
+    actions: {
+        async getProducts() {
+            try {
+                this.isLoading = true;
+                const {data} = await getCart();
+                this.items = data.products;
+                this.productsCount = data.total_products_count;
+                this.totals = data.totals;
+                this.error_warning = data.error_warning;
+                this.attention = data.attention;
+                this.success = data.success;
+            } catch (error) {
+                console.error(error);
+            } finally {
+                this.isLoading = false;
+            }
+        },
+
+        async addProduct(productId, productName, price, quantity = 1, options = []) {
+            try {
+                this.isLoading = true;
+                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 addToCart(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(cartItem, rowId, index = 0) {
+            try {
+                this.isLoading = true;
+                const formData = new FormData();
+                formData.append('key', rowId);
+                await cartRemoveItem(formData);
+                useYaMetrikaStore().dataLayerPush({
+                    "ecommerce": {
+                        "currencyCode": useSettingsStore().currency_code,
+                        "remove": {
+                            "products": [
+                                {
+                                    "id": cartItem.product_id,
+                                    "name": cartItem.name,
+                                    "quantity": cartItem.quantity,
+                                    "position": index
+                                }
+                            ]
+                        }
+                    }
+                });
+                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 cartEditItem(formData);
+                await this.getProducts();
+            } catch (error) {
+                console.log(error);
+            } finally {
+                this.isLoading = false;
+            }
+        },
+
+        async applyCoupon() {
+            try {
+                this.isLoading = true;
+                this.error_warning = '';
+                const response = await setCoupon(this.coupon);
+
+                if (response.error) {
+                    this.error_warning = response.error;
+                } else {
+                    await this.getProducts();
+                }
+            } catch (error) {
+                console.log(error);
+                this.error_warning = 'Возникла ошибка';
+            } finally {
+                this.isLoading = false;
+            }
+        },
+
+        async applyVoucher() {
+            try {
+                this.isLoading = true;
+                this.error_warning = '';
+                const response = await setVoucher(this.voucher);
+
+                if (response.error) {
+                    this.error_warning = response.error;
+                } else {
+                    await this.getProducts();
+                }
+            } catch (error) {
+                console.log(error);
+                this.error_warning = 'Возникла ошибка';
+            } finally {
+                this.isLoading = false;
+            }
+        },
+    },
+});
--- a/frontend/spa/src/stores/CategoriesStore.js
+++ b/frontend/spa/src/stores/CategoriesStore.js
@@ -0,0 +1,61 @@
+import {defineStore} from "pinia";
+import ftch from "../utils/ftch.js";
+
+export const useCategoriesStore = defineStore('categories', {
+    state: () => ({
+        topCategories: [],
+        categories: [],
+        isLoading: false,
+        isCategoriesLoaded: false,
+    }),
+
+    actions: {
+        async fetchCategories() {
+            if (this.isCategoriesLoaded === false && this.categories.length === 0) {
+                try {
+                    this.isLoading = true;
+                    const {data} = await ftch('categoriesList');
+                    this.categories = data;
+                    this.isCategoriesLoaded = true;
+                } catch (error) {
+                    console.error(error);
+                } finally {
+                    this.isLoading = false;
+                }
+            }
+        },
+
+        async fetchTopCategories() {
+            try {
+                this.isLoading = true;
+                const response = await ftch('categoriesList', {
+                    forMainPage: true,
+                });
+                this.topCategories = response.data;
+            } catch (error) {
+                console.error(error);
+            } finally {
+                this.isLoading = false;
+            }
+        },
+
+        async findCategoryById(id, list = []) {
+            if (! id) return null;
+
+            if (list && list.length === 0) {
+                await this.fetchCategories();
+                list = this.categories;
+            }
+
+            for (const cat of list) {
+                if (parseInt(cat.id) === parseInt(id)) return cat;
+                if (cat.children?.length) {
+                    const found = await this.findCategoryById(id, cat.children);
+                    if (found) return found;
+                }
+            }
+
+            return null;
+        }
+    },
+});
--- a/frontend/spa/src/stores/CheckoutStore.js
+++ b/frontend/spa/src/stores/CheckoutStore.js
@@ -0,0 +1,114 @@
+import {defineStore} from "pinia";
+import {isNotEmpty} from "@/helpers.js";
+import {storeOrder} from "@/utils/ftch.js";
+import {useCartStore} from "@/stores/CartStore.js";
+import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+import {useSettingsStore} from "@/stores/SettingsStore.js";
+
+export const useCheckoutStore = defineStore('checkout', {
+    state: () => ({
+        customer: {
+            firstName: "",
+            lastName: "",
+            email: "",
+            phone: "",
+            address: "",
+            comment: "",
+            tgData: null,
+        },
+
+        order: null,
+
+        isLoading: false,
+        validationErrors: {},
+    }),
+
+    getters: {
+        hasError: (state) => {
+            return (field) => isNotEmpty(state.validationErrors[field]);
+        },
+    },
+
+    actions: {
+        async makeOrder() {
+            try {
+                this.isLoading = true;
+                const data = window.Telegram.WebApp.initDataUnsafe;
+
+                console.log("Allows write to PM: ", data.user.allows_write_to_pm);
+
+                if (! data.user.allows_write_to_pm) {
+                    console.log("Sending request");
+                    const granted = await new Promise(resolve => {
+                        window.Telegram.WebApp.requestWriteAccess((granted) => {
+                            resolve(granted);
+                        });
+                    });
+
+                    if (granted) {
+                        data.user.allows_write_to_pm = true;
+                        console.log('Пользователь разрешил отправку сообщений');
+                    } else {
+                        alert('Вы не дали разрешение — бот не сможет отправлять вам уведомления');
+                    }
+                }
+
+                this.customer.tgData = data;
+
+                const response = await storeOrder(this.customer);
+                this.order = response.data;
+
+                if (! this.order.id) {
+                    console.debug(response.data);
+                    throw new Error('Ошибка создания заказа.');
+                }
+
+                const yaMetrika = useYaMetrikaStore();
+                yaMetrika.reachGoal(YA_METRIKA_GOAL.ORDER_CREATED_SUCCESS, {
+                    price: this.order?.final_total_numeric,
+                    currency: this.order?.currency,
+                });
+                yaMetrika.dataLayerPush({
+                    "ecommerce": {
+                        "currencyCode": useSettingsStore().currency_code,
+                        "purchase": {
+                            "actionField": {
+                                "id": this.order.id,
+                                'revenue': this.order?.final_total_numeric,
+                            },
+                            "products": this.order.products ? this.order.products.map((product, index) => {
+                                return {
+                                    id: product.product_id,
+                                    name: product.name,
+                                    price: product.total_numeric,
+                                    position: index,
+                                    quantity: product.quantity,
+                                };
+                            }) : [],
+                        }
+                    }
+                });
+
+                await window.Telegram.WebApp.HapticFeedback.notificationOccurred('success');
+                await useCartStore().getProducts();
+            } catch (error) {
+                if (error.response?.status === 422) {
+                    this.validationErrors = error.response._data.data;
+                } else {
+                    console.error('Server error', error);
+                }
+
+                window.Telegram.WebApp.HapticFeedback.notificationOccurred('error');
+
+                throw error;
+            } finally {
+                this.isLoading = false;
+            }
+        },
+
+        clearError(field) {
+            this.validationErrors[field] = null;
+        },
+    },
+});
--- a/frontend/spa/src/stores/ProductFiltersStore.js
+++ b/frontend/spa/src/stores/ProductFiltersStore.js
@@ -0,0 +1,41 @@
+import {defineStore} from "pinia";
+import {getFiltersForMainPage} from "@/utils/ftch.js";
+import {md5} from "js-md5";
+
+export const useProductFiltersStore = defineStore('product_filters', {
+    state: () => ({
+        isLoading: false,
+        draft: {},
+        applied: {},
+        default: {},
+        fullPath: '',
+    }),
+
+    getters: {
+        paramsHashForRouter: (state) => md5(JSON.stringify({ filters: state.applied })),
+
+        isFiltersChanged: (state) =>
+            md5(JSON.stringify({ filters: state.applied })) !== md5(JSON.stringify({ filters: state.default })),
+    },
+
+    actions: {
+        async fetchFiltersForMainPage() {
+            if (this.isLoading) return;
+
+            try {
+                this.isLoading = true;
+                const response = await getFiltersForMainPage();
+                this.default = response.data;
+                return response.data;
+            } catch (error) {
+                console.log(error);
+            } finally {
+                this.isLoading = false;
+            }
+        },
+
+        clear() {
+            this.filters = {};
+        }
+    },
+});
--- a/frontend/spa/src/stores/ProductsStore.js
+++ b/frontend/spa/src/stores/ProductsStore.js
@@ -0,0 +1,122 @@
+import {defineStore} from "pinia";
+import ftch from "@/utils/ftch.js";
+import {md5} from 'js-md5';
+import {toRaw} from "vue";
+
+export const useProductsStore = defineStore('products', {
+    state: () => ({
+        products: {
+            data: [],
+            meta: {
+                hasMore: true,
+            },
+        },
+        filters: null,
+        filtersFullUrl: '',
+        search: '',
+        page: 1,
+        isLoading: false,
+        isLoadingMore: false,
+        loadFinished: false,
+        savedScrollY: 0,
+        currentLoadedParamsHash: null,
+    }),
+
+    getters: {
+        paramsHash: (state) => md5(JSON.stringify(toRaw(state.getParams()))),
+        paramsHashForRouter: (state) => md5(JSON.stringify({
+            search: state.search,
+            filters: toRaw(state.filters),
+        })),
+    },
+
+    actions: {
+        getParams() {
+            return {
+                page: this.page,
+                search: this.search,
+                filters: toRaw(this.filters),
+            };
+        },
+
+        async fetchProducts() {
+            try {
+                console.debug('Current params hash: ', this.currentLoadedParamsHash);
+                if (this.products.data.length > 0 && this.paramsHash === this.currentLoadedParamsHash) {
+                    console.debug('Loading products from cache');
+                    return new Promise((resolve, reject) => {
+                        resolve(this.products);
+                    });
+                }
+
+                console.debug('Requested param cache: ', this.paramsHash);
+                console.debug('Invalidate cache. Fetch products from server.', this.getParams());
+                const response = await ftch('products', null, this.getParams());
+                this.currentLoadedParamsHash = this.paramsHash;
+                console.debug('Products loaded from server.');
+                console.debug('New params hash: ', this.currentLoadedParamsHash);
+
+                return {
+                    meta: response.meta,
+                    data: response.data,
+                };
+            } catch (error) {
+                console.error("Failed to load products");
+                console.error(error);
+            } finally {
+            }
+        },
+
+        async loadProducts(filters = null) {
+            if (this.isLoading) return;
+
+            try {
+                console.debug('Load products with filters', filters);
+                this.reset();
+                this.isLoading = true;
+                this.page = 1;
+                this.loadFinished = false;
+                this.search = '';
+                this.filters = filters;
+                this.products = await this.fetchProducts();
+            } catch (e) {
+                console.error('Ошибка загрузки', e);
+            } finally {
+                this.isLoading = false;
+                this.loadFinished = true;
+            }
+        },
+
+        async loadMore() {
+            if (this.isLoading || this.isLoadingMore || this.products.meta.hasMore === false) return;
+
+            try {
+                this.isLoadingMore = true;
+                this.page++;
+                console.debug('Load more products for page: ', this.page);
+                const response = await this.fetchProducts();
+                this.products.meta = response.meta;
+                this.products.data.push(...response.data);
+            } catch (e) {
+                console.error('Ошибка загрузки', e);
+            } finally {
+                this.isLoadingMore = false;
+                this.loadFinished = true;
+                this.isLoading = false;
+            }
+        },
+
+        reset() {
+            this.isLoading = false;
+            this.page = 1;
+            this.loadFinished = false;
+            this.search = '';
+            this.products = {
+                data: [],
+                meta: {
+                    hasMore: true,
+                },
+            };
+        },
+    },
+});
--- a/frontend/spa/src/stores/SearchStore.js
+++ b/frontend/spa/src/stores/SearchStore.js
@@ -0,0 +1,56 @@
+import {defineStore} from "pinia";
+import ftch from "@/utils/ftch.js";
+import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+
+export const useSearchStore = defineStore('search', {
+    state: () => ({
+        search: '',
+        page: 1,
+        products: {
+            data: [],
+            meta: {},
+        },
+
+        isLoading: false,
+        isSearchPerformed: false,
+    }),
+
+    actions: {
+        reset() {
+            this.search = '';
+            this.isSearchPerformed = false;
+            this.isLoading = false;
+            this.page = 1;
+            this.products = {
+                data: [],
+                meta: {},
+            };
+        },
+
+        async performSearch() {
+            if (!this.search) {
+                return this.reset();
+            }
+
+            useYaMetrikaStore().reachGoal(YA_METRIKA_GOAL.PERFORM_SEARCH, {
+                keyword: this.search,
+            });
+
+            try {
+                this.isLoading = true;
+                this.products = await ftch('products', {
+                    page: this.page,
+                    perPage: 10,
+                    search: this.search,
+                });
+            } catch (error) {
+                console.error(error);
+            } finally {
+                this.isLoading = false;
+                this.isSearchPerformed = true;
+            }
+        },
+    },
+
+});
--- a/frontend/spa/src/stores/SettingsStore.js
+++ b/frontend/spa/src/stores/SettingsStore.js
@@ -0,0 +1,56 @@
+import {defineStore} from "pinia";
+import {fetchSettings} from "@/utils/ftch.js";
+
+export const useSettingsStore = defineStore('settings', {
+    state: () => ({
+        app_enabled: true,
+        app_debug: false,
+        store_enabled: true,
+        app_name: 'OpenCart Telegram магазин',
+        app_icon: '',
+        app_icon192: '',
+        app_icon180: '',
+        app_icon152: '',
+        app_icon120: '',
+        manifest_url: null,
+        night_auto: true,
+        ya_metrika_enabled: false,
+        feature_coupons: false,
+        feature_vouchers: false,
+        currency_code: null,
+        theme: {
+            light: 'light', dark: 'dark', variables: {
+                '--product_list_title_max_lines': 2,
+            }
+        },
+        texts: {
+            no_more_products: 'Нет товаров',
+            empty_cart: 'Корзина пуста',
+            order_created_success: 'Заказ успешно оформлен.',
+        },
+    }),
+
+    actions: {
+        async load() {
+            console.log('Load settings');
+            const settings = await fetchSettings();
+            this.manifest_url = settings.manifest_url;
+            this.app_name = settings.app_name;
+            this.app_icon = settings.app_icon;
+            this.app_icon192 = settings.app_icon192;
+            this.app_icon180 = settings.app_icon180;
+            this.app_icon152 = settings.app_icon152;
+            this.app_icon120 = settings.app_icon120;
+            this.theme.light = settings.theme_light;
+            this.theme.dark = settings.theme_dark;
+            this.ya_metrika_enabled = settings.ya_metrika_enabled;
+            this.app_enabled = settings.app_enabled;
+            this.app_debug = settings.app_debug;
+            this.store_enabled = settings.store_enabled;
+            this.feature_coupons = settings.feature_coupons;
+            this.feature_vouchers = settings.feature_vouchers;
+            this.currency_code = settings.currency_code;
+            this.texts = settings.texts;
+        }
+    }
+});
--- a/frontend/spa/src/stores/yaMetrikaStore.js
+++ b/frontend/spa/src/stores/yaMetrikaStore.js
@@ -0,0 +1,130 @@
+import {defineStore} from "pinia";
+import {useSettingsStore} from "@/stores/SettingsStore.js";
+import sha256 from 'crypto-js/sha256';
+import {toRaw} from "vue";
+
+export const useYaMetrikaStore = defineStore('ya_metrika', {
+    state: () => ({
+        queue: [],
+        prevPath: null,
+    }),
+
+    actions: {
+        pushHit(url, params = {}) {
+            if (!useSettingsStore().ya_metrika_enabled) {
+                console.debug('[ym] Yandex Metrika disabled in settings.');
+                return;
+            }
+
+            const fullUrl = `/#${url}`;
+
+            params.referer = params.referer ?? this.prevPath;
+
+            if (typeof window.ym === 'function' && window.YA_METRIKA_ID !== undefined) {
+                console.debug('[ym] Hit ', fullUrl);
+                console.debug('[ym] ID ', window.YA_METRIKA_ID);
+                console.debug('[ym] params ', params);
+                window.ym(window.YA_METRIKA_ID, 'hit', fullUrl, params);
+            } else {
+                console.debug('[ym] Yandex Metrika is not initialized. Pushed to queue.');
+                this.queue.push({
+                    event: 'hit',
+                    payload: {
+                        fullUrl,
+                        params,
+                    }
+                });
+            }
+        },
+
+        reachGoal(target, params = {}) {
+            if (!useSettingsStore().ya_metrika_enabled) {
+                console.debug('[ym] Yandex Metrika disabled in settings.');
+                return;
+            }
+
+            if (typeof window.ym === 'function' && window.YA_METRIKA_ID !== undefined) {
+                console.debug('[ym] reachGoal ', target, ' params: ', params);
+                window.ym(window.YA_METRIKA_ID, 'reachGoal', target, params);
+            } else {
+                console.debug('[ym] Yandex Metrika is not initialized. Pushed to queue.');
+                this.queue.push({
+                    event: 'reachGoal',
+                    payload: {
+                        target,
+                        params
+                    },
+                });
+            }
+        },
+
+        initUserParams() {
+            if (!useSettingsStore().ya_metrika_enabled) {
+                console.debug('[ym] Yandex Metrika disabled in settings.');
+                return;
+            }
+
+            if (typeof window.ym === 'function' && window.YA_METRIKA_ID !== undefined) {
+                let tgID = null;
+
+                if (window?.Telegram?.WebApp?.initDataUnsafe?.user?.id) {
+                    tgID = sha256(window.Telegram.WebApp.initDataUnsafe.user.id).toString();
+                }
+
+                const userParams = {
+                    tg_id: tgID,
+                    language: window.Telegram?.WebApp?.initDataUnsafe?.user?.language_code || 'unknown',
+                    platform: window.Telegram?.WebApp?.platform || 'unknown',
+                };
+
+                window.ym(window.YA_METRIKA_ID, 'userParams', userParams);
+                console.debug('[ym] User params initialized: ', userParams);
+            } else {
+                console.debug('[ym] Yandex Metrika is not initialized. Could not init user params.');
+            }
+        },
+
+        processQueue() {
+            if (this.queue.length === 0) {
+                return;
+            }
+
+            console.debug('[ym] Start processing queue. Size: ', this.queue.length);
+
+            while (this.queue.length > 0) {
+                const item = this.queue.shift();
+                if (item.event === 'hit') {
+                    console.debug('[ym] Queue ', toRaw(item));
+                    window.ym(window.YA_METRIKA_ID, 'hit', item.payload.fullUrl, item.payload.params);
+                } else if (item.event === 'reachGoal') {
+                    window.ym(window.YA_METRIKA_ID, 'reachGoal', item.payload.target, item.payload.params);
+                } else if (item.event === 'dataLayer') {
+                    console.debug('[ym] queue dataLayer push: ', item.payload);
+                    window.dataLayer.push(item.payload);
+                } else {
+                    console.error('[ym] Unsupported queue event: ', item.event);
+                }
+            }
+
+            console.debug('[ym] Queue processing complete. Size: ', this.queue.length);
+        },
+
+        dataLayerPush(object) {
+            if (!useSettingsStore().ya_metrika_enabled) {
+                console.debug('[ym] Yandex Metrika disabled in settings.');
+                return;
+            }
+
+            if (Array.isArray(window.dataLayer)) {
+                console.debug('[ym] dataLayer push: ', object);
+                window.dataLayer.push(object);
+            } else {
+                console.debug('[ym] dataLayer inaccessible. Put to queue');
+                this.queue.push({
+                    event: 'dataLayer',
+                    payload: object,
+                });
+            }
+        }
+    },
+});
--- a/frontend/spa/src/style.css
+++ b/frontend/spa/src/style.css
@@ -0,0 +1,70 @@
+@import "tailwindcss";
+@plugin "daisyui" {
+    themes: all;
+}
+
+html, body, #app {
+    width: 100%;
+    height: 100%;
+}
+
+html {
+    --swiper-pagination-color: var(--color-primary);
+    --swiper-navigation-color: var(--color-primary);
+    --swiper-pagination-bullet-inactive-color: var(--color-base-content);
+    --swiper-pagination-fraction-color: var(--color-neutral-content);
+    --product_list_title_max_lines: 1;
+    --tc-navbar-min-height: 3rem;
+}
+
+.swiper-pagination-bullets {
+    border-radius: var(--radius-selector);
+    padding: 5px 0;
+}
+
+#app {
+    position: relative;
+    /*padding-top: var(--tg-content-safe-area-inset-top);*/
+    padding-bottom: var(--tg-content-safe-area-inset-bottom);
+    padding-left: var(--tg-content-safe-area-inset-left);
+    padding-right: var(--tg-content-safe-area-inset-right);
+}
+
+.app-container {
+    /*padding-top: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));*/
+    padding-bottom: var(--tg-safe-area-inset-bottom, 0px);
+    padding-left: var(--tg-safe-area-inset-left, 0px);
+    padding-right: var(--tg-safe-area-inset-right, 0px);
+}
+
+.safe-top {
+    padding-top: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));
+}
+
+.app-header {
+    z-index: 60;
+    position: fixed;
+    background: var(--color-primary);
+    height: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));
+    min-height: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));
+    max-height: calc(var(--tg-content-safe-area-inset-top) + var(--tg-safe-area-inset-top));
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    align-items: center;
+    color: white;
+    padding-bottom: 8px;
+}
+
+.telecart-main-section {
+    padding-top: calc(var(--tg-content-safe-area-inset-top, 0rem) + var(--tg-safe-area-inset-top, 0rem) + var(--tc-navbar-min-height));
+}
+
+.swiper-pagination-bullets > .swiper-pagination-bullet {
+    background-color: red;
+    color: red;
+}
+
+.swiper-pagination-bullets {
+    top: 10px;
+}
--- a/frontend/spa/src/translations.js
+++ b/frontend/spa/src/translations.js
@@ -0,0 +1,3 @@
+export default {
+    RULE_PRODUCT_PRICE: 'Цена',
+};
--- a/frontend/spa/src/utils/AppMetaInitializer.ts
+++ b/frontend/spa/src/utils/AppMetaInitializer.ts
@@ -0,0 +1,47 @@
+class AppMetaInitializer {
+    private readonly settings: object;
+
+    constructor(settings: object) {
+        this.settings = settings;
+    }
+
+    public init() {
+        console.log('Init app meta');
+        document.title = this.settings.app_name;
+        this.setMeta('application-name', this.settings.app_name);
+        this.setMeta('apple-mobile-web-app-title', this.settings.app_name);
+        this.setMeta('mobile-web-app-capable', 'yes');
+        this.setMeta('apple-mobile-web-app-capable', 'yes');
+        this.setMeta('apple-mobile-web-app-status-bar-style', 'default');
+        this.setMeta('theme-color', '#000000');
+        this.setMeta('msapplication-navbutton-color', '#000000');
+        this.setMeta('apple-mobile-web-app-status-bar-style', 'black-translucent');
+        this.addLink('manifest', this.settings.manifest_url);
+
+        this.addLink('icon', this.settings.app_icon192, '192x192');
+        this.addLink('apple-touch-icon', this.settings.app_icon192);
+        this.addLink('apple-touch-icon', this.settings.app_icon180, '180x180');
+        this.addLink('apple-touch-icon', this.settings.app_icon152, '152x152');
+        this.addLink('apple-touch-icon', this.settings.app_icon120, '120x120');
+    }
+
+    private setMeta(name: string, content: string) {
+        let meta = document.querySelector(`meta[name="${name}"]`);
+        if (!meta) {
+            meta = document.createElement('meta');
+            meta.setAttribute('name', name);
+            document.head.appendChild(meta);
+        }
+        meta.setAttribute('content', content);
+    }
+
+    private addLink(rel: string, href: string, sizes?: string) {
+        const link = document.createElement('link');
+        link.rel = rel;
+        link.href = href;
+        if (sizes) link.sizes = sizes;
+        document.head.appendChild(link);
+    }
+}
+
+export default AppMetaInitializer;
--- a/frontend/spa/src/utils/ftch.js
+++ b/frontend/spa/src/utils/ftch.js
@@ -0,0 +1,99 @@
+import {ofetch} from "ofetch";
+
+const BASE_URL = '/';
+
+function encodeBase64Unicode(str) {
+    return btoa(new TextEncoder().encode(str).reduce((data, byte) => data + String.fromCharCode(byte), ''));
+}
+
+export const apiFetch = ofetch.create({
+    throwHttpErrors: true,
+    onRequest({request, options}) {
+        const data = window.Telegram?.WebApp?.initData;
+
+        if (data) {
+            const encoded = encodeBase64Unicode(data);
+            options.headers = {
+                ...options.headers,
+                'X-Telegram-InitData': encoded,
+            }
+        }
+    },
+});
+
+async function ftch(action, query = null, json = null) {
+    const options = {
+        method: json ? 'POST' : 'GET',
+    }
+    if (query) options.query = query;
+    if (json) options.body = json;
+
+    return await apiFetch(`${BASE_URL}index.php?route=extension/tgshop/handle&api_action=${action}`, options);
+}
+
+export async function storeOrder(data) {
+    return await apiFetch(`${BASE_URL}index.php?route=extension/tgshop/handle&api_action=storeOrder`, {
+        method: 'POST',
+        body: data,
+    });
+}
+
+export async function getCart() {
+    return await ftch('getCart');
+}
+
+export async function addToCart(data) {
+    return await apiFetch(`${BASE_URL}index.php?route=checkout/cart/add`, {
+        method: 'POST',
+        body: data,
+    });
+}
+
+export async function cartRemoveItem(data) {
+    return await apiFetch(`${BASE_URL}index.php?route=checkout/cart/remove`, {
+        method: 'POST',
+        body: data,
+    });
+}
+
+export async function cartEditItem(data) {
+    return await apiFetch(`${BASE_URL}index.php?route=checkout/cart/edit`, {
+        redirect: 'manual',
+        method: 'POST',
+        body: data,
+    });
+}
+
+export async function fetchSettings() {
+    return await ftch('settings');
+}
+
+export async function getFiltersForMainPage() {
+    return await ftch('filtersForMainPage');
+}
+
+export async function setCoupon(coupon) {
+    const formData = new FormData();
+    formData.append('coupon', coupon);
+
+    return await apiFetch(`${BASE_URL}index.php?route=extension/total/coupon/coupon`, {
+        method: 'POST',
+        body: formData,
+    });
+}
+
+export async function setVoucher(voucher) {
+    const formData = new FormData();
+    formData.append('voucher', voucher);
+
+    return await apiFetch(`${BASE_URL}index.php?route=extension/total/voucher/voucher`, {
+        method: 'POST',
+        body: formData,
+    });
+}
+
+export async function fetchBanner() {
+    return await ftch('banner');
+}
+
+export default ftch;
--- a/frontend/spa/src/utils/yaMetrika.js
+++ b/frontend/spa/src/utils/yaMetrika.js
@@ -0,0 +1,30 @@
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+
+function getMetrikaId() {
+    // Пробуем найти все элементы <script> с mc.yandex.ru
+    const scripts = Array.from(document.scripts);
+    for (const s of scripts) {
+        if (s.src.includes('mc.yandex.ru/metrika/tag.js')) {
+            const match = s.src.match(/id=(\d+)/);
+            if (match) return match[1];
+        }
+    }
+    return null;
+}
+
+export function injectYaMetrika() {
+    const script = document.createElement('script');
+    script.src = '/index.php?route=extension/tgshop/handle/ya_metrika';
+    // script.async = true;
+    document.head.appendChild(script);
+    console.debug('[Init] Yandex Metrika injected to the page.');
+
+    script.onload = () => {
+        window.YA_METRIKA_ID = getMetrikaId();
+        console.debug('[Init] Detected Yandex.Metrika ID:', window.YA_METRIKA_ID);
+        const yaMetrika = useYaMetrikaStore();
+        yaMetrika.initUserParams();
+        window.dataLayer = window.dataLayer || [];
+        yaMetrika.processQueue();
+    }
+}
--- a/frontend/spa/src/views/Cart.vue
+++ b/frontend/spa/src/views/Cart.vue
@@ -0,0 +1,187 @@
+<template>
+  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-40">
+    <h2 class="text-2xl text-center">
+      Корзина
+      <span v-if="cart.isLoading" class="loading loading-spinner loading-md"></span>
+    </h2>
+
+    <div v-if="cart.attention" role="alert" class="alert alert-warning">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+      </svg>
+      <span>{{ cart.attention }}</span>
+    </div>
+
+    <div v-if="cart.error_warning" role="alert" class="alert alert-error">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <span>{{ cart.error_warning }}</span>
+    </div>
+
+    <div v-if="cart.items.length > 0">
+      <div
+          v-for="(item, index) in cart.items"
+          :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">
+          <div class="flex">
+            <div class="avatar mr-5">
+              <div class="w-16 rounded">
+                <img :src="item.thumb"/>
+              </div>
+            </div>
+
+            <div>
+              <RouterLink :to="{name: 'product.show', params: {id: item.product_id}}" class="card-title">
+                {{ item.name }} <span v-if="! item.stock" class="text-error font-bold">***</span>
+              </RouterLink>
+              <p class="text-sm font-bold">{{ item.total }}</p>
+              <p>{{ item.price }}/ед</p>
+              <div>
+                <div v-for="option in item.option">
+                  <p><span class="font-bold">{{ option.name }}</span>: {{ option.value }}</p>
+                  <!--              <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>
+          </div>
+
+          <div class="card-actions justify-between">
+            <Quantity
+                :disabled="cart.isLoading"
+                v-model="item.quantity"
+                @update:modelValue="cart.setQuantity(item.cart_id, $event)"
+            />
+            <button class="btn btn-error" @click="removeItem(item, item.cart_id, index)" :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>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="card card-border bg-base-100 mb-3">
+        <div class="card-body">
+          <h2 class="card-title">Ваша корзина</h2>
+          <div v-for="total in cart.totals">
+            <div class="flex justify-between">
+              <span class="text-xs text-base-content mr-2">{{ total.title }}:</span>
+              <span v-if="cart.isLoading" class="loading loading-spinner loading-xs"></span>
+              <span v-else class="text-xs font-bold">{{ total.text }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+          v-if="settings.feature_coupons || settings.feature_vouchers"
+          class="card card-border bg-base-100 mb-3"
+      >
+        <div class="card-body">
+          <div v-if="settings.feature_coupons" class="join">
+            <input v-model="cart.coupon" type="text" class="input" placeholder="Промокод"/>
+            <button
+                class="btn"
+                :disabled="!cart.coupon"
+                @click="cart.applyCoupon"
+            >Применить</button>
+          </div>
+
+          <div v-if="settings.feature_vouchers" class="join">
+            <input v-model="cart.voucher" type="text" class="input" placeholder="Подарочный сертификат"/>
+            <button
+                class="btn"
+                :disabled="!cart.voucher"
+                @click="cart.applyVoucher"
+            >Применить</button>
+          </div>
+        </div>
+      </div>
+
+      <div class="btn-checkout fixed px-4 pt-4 left-0 w-full z-50 flex justify-end items-center gap-2">
+        <button
+            class="btn btn-primary select-none shadow-xl"
+            :disabled="cart.canCheckout === false"
+            @click="goToCheckout"
+        >
+          Перейти к оформлению
+        </button>
+      </div>
+    </div>
+
+    <div
+        v-else
+        class="text-center rounded-2xl"
+    >
+      <div class="text-5xl mb-4">🛒</div>
+      <p class="text-lg mb-3">{{ settings.texts.empty_cart }}</p>
+      <RouterLink class="btn btn-primary" to="/">Начать покупки</RouterLink>
+    </div>
+  </div>
+</template>
+
+<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 {computed, onMounted} from "vue";
+import {useRoute, useRouter} from "vue-router";
+import {useSettingsStore} from "@/stores/SettingsStore.js";
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
+
+const route = useRoute();
+const yaMetrika = useYaMetrikaStore();
+const cart = useCartStore();
+const router = useRouter();
+const settings = useSettingsStore();
+
+// const componentMap = {
+//   radio: OptionRadio,
+//   select: OptionRadio,
+//   checkbox: OptionCheckbox,
+//   text: OptionText,
+//   textarea: OptionText,
+// };
+
+const lastTotal = computed(() => {
+  return cart.totals.at(-1) ?? null;
+});
+
+function removeItem(cartItem, cartId, index) {
+  cart.removeItem(cartItem, cartId, index);
+  window.Telegram.WebApp.HapticFeedback.notificationOccurred('error');
+}
+
+function goToCheckout() {
+  router.push({name: 'checkout'});
+}
+
+onMounted(async () => {
+  window.document.title = 'Корзина покупок';
+  yaMetrika.pushHit(route.path, {
+    title: 'Корзина покупок',
+  });
+  yaMetrika.reachGoal(YA_METRIKA_GOAL.VIEW_CART);
+});
+</script>
+
+<style scoped>
+.btn-checkout {
+  bottom: calc(var(--spacing, 0px) * 22 + var(--tg-safe-area-inset-bottom, 0px))
+}
+</style>
--- a/frontend/spa/src/views/CategoriesList.vue
+++ b/frontend/spa/src/views/CategoriesList.vue
@@ -0,0 +1,137 @@
+<template>
+  <div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8 mb-5">
+    <h2 class="text-3xl mb-5">Категории</h2>
+
+    <div v-if="categoriesStore.isLoading" class="flex flex-col gap-4">
+      <div class="skeleton h-14 w-full"></div>
+      <div class="skeleton h-14 w-full"></div>
+      <div class="skeleton h-14 w-full"></div>
+      <div class="skeleton h-14 w-full"></div>
+      <div class="skeleton h-14 w-full"></div>
+    </div>
+
+    <template v-else>
+      <button v-if="parentId && parentCategory" class="py-1 px-4 flex items-center mb-3 cursor-pointer" @click="goBack">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 min-w-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+        </svg>
+
+        <span class="ml-2 line-clamp-2">Назад к "{{ parentCategory.name }}"</span>
+      </button>
+
+      <button
+          v-if="false"
+          class="py-2 px-4 flex items-center mb-3 cursor-pointer border-b w-full pb-2 border-base-200"
+          @click.prevent="showProductsInParentCategory"
+      >
+        <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="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
+        </svg>
+
+        <span class="ml-2">Показать товары из "{{ parentCategory.name }}"</span>
+      </button>
+
+      <TransitionGroup
+          name="stagger"
+          tag="ul"
+          appear
+      >
+        <li
+            v-for="(category, i) in categories"
+            :key="category.id"
+            :style="{ '--i': i }"
+        >
+          <CategoryItem
+              :category="category"
+              @onSelect="onSelect"
+              class="block px-1 rounded-xl transition hover:bg-base-100/60 active:scale-[0.98] will-change-transform"
+          />
+        </li>
+      </TransitionGroup>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import {computed, onMounted} from "vue";
+import {router} from "@/router.js";
+import {useCategoriesStore} from "@/stores/CategoriesStore.js";
+import {useRoute} from "vue-router";
+import CategoryItem from "@/components/CategoriesList/CategoryItem.vue";
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+
+const route = useRoute();
+const categoriesStore = useCategoriesStore();
+const yaMetrika = useYaMetrikaStore();
+
+const parentId = computed(() => route.params.id ? Number(route.params.id) : null);
+
+// 🔧 Рекурсивный поиск по всему дереву
+function findCategoryById(id, list = categoriesStore.categories) {
+  if (id == null) return null;
+  for (const cat of list) {
+    if (cat.id === id) return cat;
+    if (cat.children?.length) {
+      const found = findCategoryById(id, cat.children);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+const parentCategory = computed(() => findCategoryById(parentId.value));
+
+// Если мы в корне — показываем корневые категории,
+// если внутри — показываем детей найденной категории (или пустой массив, если не нашли)
+const categories = computed(() => {
+  if (!parentId.value) return categoriesStore.categories;
+  return parentCategory.value?.children ?? [];
+});
+
+function onSelect(category) {
+  if (!category?.children?.length) {
+    router.push({name: "product.categories.show", params: {category_id: category.id}});
+  } else {
+    router.push({name: "category.show", params: {id: category.id}});
+  }
+}
+
+function goBack() {
+  router.back();
+}
+
+function showProductsInParentCategory() {
+  if (parentId.value != null) {
+    router.push({name: "product.categories.show", params: {category_id: parentId.value}});
+  }
+}
+
+onMounted(async () => {
+  window.document.title = 'Каталог';
+  yaMetrika.pushHit(route.path, {
+    title: 'Каталог',
+  });
+  await categoriesStore.fetchCategories();
+});
+</script>
+
+<style scoped>
+/* Стаггер для элементов списка */
+.stagger-enter-from,
+.stagger-leave-to {
+  opacity: 0;
+  transform: translateY(8px) scale(0.98);
+}
+.stagger-enter-active {
+  transition: opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1);
+  transition-delay: calc(var(--i) * 40ms); /* задержка по индексу */
+}
+.stagger-leave-active {
+  position: absolute;           /* чтобы соседей не дёргало */
+  width: 100%;
+  transition: opacity .18s ease, transform .18s ease;
+}
+.stagger-move {
+  transition: transform .28s ease; /* анимация перестановки элементов */
+}
+</style>
--- a/frontend/spa/src/views/Checkout.vue
+++ b/frontend/spa/src/views/Checkout.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-20">
+    <h2 class="text-2xl mb-5 text-center">
+      Оформление заказа
+    </h2>
+
+    <div class="w-full">
+      <TgInput
+          v-model="checkout.customer.firstName"
+          placeholder="Введите имя"
+          :error="checkout.validationErrors.firstName"
+          :maxlength="32"
+          @clearError="checkout.clearError('firstName')"
+      />
+
+      <TgInput
+          v-model="checkout.customer.lastName"
+          placeholder="Введите фамилию"
+          :maxlength="32"
+          :error="checkout.validationErrors.lastName"
+          @clearError="checkout.clearError('lastName')"
+      />
+
+      <fieldset class="fieldset">
+        <IMaskComponent
+            v-model="checkout.customer.phone"
+            type="tel"
+            class="input input-lg w-full"
+            mask="+{7} (000) 000-00-00"
+            placeholder="Введите телефон"
+            :unmask="true"
+        />
+        <p v-if="error" class="label text-error">{{ checkout.validationErrors.phone }}</p>
+      </fieldset>
+
+      <TgInput
+          v-model="checkout.customer.email"
+          type="email"
+          placeholder="Введите email (опционально)"
+          :maxlength="96"
+          :error="checkout.validationErrors.email"
+          @clearError="checkout.clearError('email')"
+      />
+
+      <TgTextarea
+          v-model="checkout.customer.comment"
+          placeholder="Комментарий (опционально)"
+          :error="checkout.validationErrors.comment"
+          @clearError="checkout.clearError('comment')"
+      />
+    </div>
+
+    <div
+        class="fixed px-4 pb-10 pt-4 bottom-0 left-0 w-full bg-base-200 z-50 flex flex-col justify-between items-center gap-2 border-t-1 border-t-base-300">
+      <div v-if="error" class="text-error text-sm">{{ error }}</div>
+      <button
+          :disabled="checkout.isLoading"
+          class="btn btn-primary w-full"
+          @click="onCreateBtnClick"
+      >
+        <span v-if="checkout.isLoading" class="loading loading-spinner loading-sm"></span>
+        {{ btnText }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {useCheckoutStore} from "@/stores/CheckoutStore.js";
+import TgInput from "@/components/Form/TgInput.vue";
+import TgTextarea from "@/components/Form/TgTextarea.vue";
+import {useRoute, useRouter} from "vue-router";
+import {computed, onMounted, ref} from "vue";
+import {IMaskComponent} from "vue-imask";
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
+import {useSettingsStore} from "@/stores/SettingsStore.js";
+
+const checkout = useCheckoutStore();
+const yaMetrika = useYaMetrikaStore();
+const route = useRoute();
+const router = useRouter();
+const error = ref(null);
+
+const btnText = computed(() => {
+  return checkout.isLoading ? 'Подождите...' : 'Создать заказ';
+});
+
+async function onCreateBtnClick() {
+  try {
+    error.value = null;
+    yaMetrika.reachGoal(YA_METRIKA_GOAL.CREATE_ORDER, {
+      price: checkout.order?.final_total_numeric,
+      currency: checkout.order?.currency,
+    });
+
+    await checkout.makeOrder();
+
+    router.push({name: 'order_created'});
+  } catch {
+    error.value = 'Невозможно создать заказ.';
+  }
+}
+
+onMounted(async () => {
+  window.document.title = 'Оформление заказа';
+  yaMetrika.pushHit(route.path, {
+    title: 'Оформление заказа',
+  });
+  yaMetrika.reachGoal(YA_METRIKA_GOAL.VIEW_CHECKOUT);
+});
+</script>
--- a/frontend/spa/src/views/Filters.vue
+++ b/frontend/spa/src/views/Filters.vue
@@ -0,0 +1,109 @@
+<template>
+  <div ref="goodsRef" class="pb-10">
+    <div class="flex flex-col">
+      <header class="text-center shrink-0 p-3 font-bold text-xl">
+        Фильтры
+      </header>
+
+      <main class="mt-5 px-5 pt-5 bg-base-200">
+        <div
+            v-if="filtersStore.draft?.rules && Object.keys(filtersStore.draft.rules).length > 0"
+            v-for="(filter, filterId) in filtersStore.draft.rules"
+        >
+          <component
+              v-if="componentMap[filterId]"
+              :is="componentMap[filterId]"
+              :filter="filter"
+          />
+
+          <p v-else>Not supported: {{ filterId }}</p>
+        </div>
+
+        <div v-else>
+          Нет фильтров
+        </div>
+      </main>
+    </div>
+
+    <div
+        class="fixed px-4 pb-10 pt-4 bottom-0 left-0 w-full bg-base-200 z-50 flex flex-col justify-between items-center gap-2 border-t-1 border-t-base-300">
+      <button
+          class="btn btn-link w-full"
+          @click="resetFilters"
+      >
+        Сбросить фильтры
+      </button>
+
+      <button
+          class="btn btn-primary w-full"
+          @click="applyFilters"
+      >
+        Применить
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {nextTick, onMounted} from "vue";
+import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
+import ProductPrice from "@/components/ProductFilters/Components/ProductPrice.vue";
+import ForMainPage from "@/components/ProductFilters/Components/ForMainPage.vue";
+import {useRoute, useRouter} from "vue-router";
+import ProductCategory from "@/components/ProductFilters/Components/ProductCategory/ProductCategory.vue";
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
+
+defineOptions({
+  name: 'Filters'
+});
+
+const componentMap = {
+  RULE_PRODUCT_PRICE: ProductPrice,
+  RULE_PRODUCT_FOR_MAIN_PAGE: ForMainPage,
+  RULE_PRODUCT_CATEGORY: ProductCategory,
+};
+
+const router = useRouter();
+const yaMetrika = useYaMetrikaStore();
+const route = useRoute();
+const emit = defineEmits(['close', 'apply']);
+
+const filtersStore = useProductFiltersStore();
+const haptic = window.Telegram.WebApp.HapticFeedback;
+
+const applyFilters = async () => {
+  filtersStore.applied = JSON.parse(JSON.stringify(filtersStore.draft));
+  console.debug('Filters: apply filters. Hash for router: ', filtersStore.paramsHashForRouter);
+  haptic.impactOccurred('soft');
+  yaMetrika.reachGoal(YA_METRIKA_GOAL.FILTERS_APPLY);
+  await nextTick();
+  router.back();
+}
+
+const resetFilters = async () => {
+  filtersStore.applied = filtersStore.default;
+  console.debug('Filters: reset filters. Hash for router: ', filtersStore.paramsHashForRouter);
+  haptic.notificationOccurred('success');
+  yaMetrika.reachGoal(YA_METRIKA_GOAL.FILTERS_RESET);
+  await nextTick();
+  window.scrollTo(0, 0);
+  router.back();
+}
+
+onMounted(async () => {
+  console.debug('Filters: OnMounted');
+  window.document.title = 'Фильтры';
+
+  yaMetrika.pushHit(route.path, {title: 'Фильтры'});
+  yaMetrika.reachGoal(YA_METRIKA_GOAL.VIEW_FILTERS);
+
+  if (filtersStore.applied?.rules) {
+    console.debug('Filters: Found applied filters.');
+    filtersStore.draft = JSON.parse(JSON.stringify(filtersStore.applied));
+  } else {
+    console.debug('No filters. Load filters from server');
+    filtersStore.draft = await filtersStore.fetchFiltersForMainPage();
+  }
+});
+</script>
--- a/frontend/spa/src/views/Home.vue
+++ b/frontend/spa/src/views/Home.vue
@@ -0,0 +1,152 @@
+<template>
+  <div ref="goodsRef" class="pb-20">
+    <CategoriesInline/>
+
+    <Banner/>
+
+    <div class="px-5 fixed z-50 w-full opacity-90" style="bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + 80px);">
+      <div class="flex justify-center">
+        <button
+            @click="showFilters"
+            class="btn shadow-xl relative"
+            :class="{'btn-accent' : filtersStore.isFiltersChanged}"
+        >
+          <IconFunnel/>
+          Фильтры
+          <span v-if="filtersStore.isFiltersChanged" class="status status-primary"></span>
+        </button>
+      </div>
+    </div>
+
+    <ProductsList
+        :products="products"
+        :hasMore="hasMore"
+        :isLoading="isLoading"
+        :isLoadingMore="isLoadingMore"
+        @loadMore="onLoadMore"
+    />
+  </div>
+</template>
+
+<script setup>
+import ProductsList from "@/components/ProductsList.vue";
+import CategoriesInline from "../components/CategoriesInline.vue";
+import {nextTick, onActivated, onMounted, ref, toRaw} from "vue";
+import IconFunnel from "@/components/Icons/IconFunnel.vue";
+import {useRouter} from "vue-router";
+import ftch from "@/utils/ftch.js";
+import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
+import Banner from "@/components/Banner.vue";
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
+import {useSettingsStore} from "@/stores/SettingsStore.js";
+
+defineOptions({
+  name: 'Home'
+});
+
+const router = useRouter();
+const filtersStore = useProductFiltersStore();
+const yaMetrika = useYaMetrikaStore();
+const haptic = window.Telegram.WebApp.HapticFeedback;
+const settings = useSettingsStore();
+
+const products = ref([]);
+const hasMore = ref(false);
+const isLoading = ref(false);
+const isLoadingMore = ref(false);
+const page = ref(1);
+const perPage = 20;
+
+function showFilters() {
+  haptic.impactOccurred('soft');
+  router.push({name: 'filters'});
+}
+
+async function fetchProducts() {
+  try {
+    isLoading.value = true;
+    console.debug('Home: Load products for Main Page.');
+    console.debug('Home: Fetch products from server using filters: ', toRaw(filtersStore.applied));
+    const response = await ftch('products', null, toRaw({
+      page: page.value,
+      perPage: perPage,
+      filters: filtersStore.applied,
+    }));
+    products.value = response.data;
+    hasMore.value = response.meta.hasMore;
+    console.debug('Home: Products for main page loaded.');
+
+    yaMetrika.dataLayerPush({
+      ecommerce: {
+        currencyCode: settings.currency_code,
+        impressions: products.value.map((product, index) => {
+          return {
+            id: product.id,
+            name: product.name,
+            price: product.final_price_numeric,
+            brand: product.manufacturer_name,
+            category: product.category_name,
+            list: 'Главная страница',
+            position: index,
+            discount: product.price_numeric - product.final_price_numeric,
+            quantity: product.product_quantity,
+          };
+        }),
+      },
+    });
+  } catch (error) {
+    console.error(error);
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+async function onLoadMore() {
+  try {
+    console.debug('Home: onLoadMore');
+    if (isLoading.value === true || isLoadingMore.value === true || hasMore.value === false) return;
+    isLoadingMore.value = true;
+    page.value++;
+    console.debug('Home: Load more for page ', page.value, ' using filters: ', toRaw(filtersStore.applied));
+    const response = await ftch('products', null, toRaw({
+      page: page.value,
+      filters: filtersStore.applied,
+    }));
+    products.value.push(...response.data);
+    hasMore.value = response.meta.hasMore;
+  } catch (error) {
+    console.error(error);
+  } finally {
+    isLoadingMore.value = false;
+  }
+}
+
+onActivated(() => {
+  yaMetrika.pushHit('/', {
+    title: 'Главная страница',
+  });
+  yaMetrika.reachGoal(YA_METRIKA_GOAL.VIEW_HOME);
+});
+
+onMounted(async () => {
+  window.document.title = 'Главная страница';
+  console.debug("[Home] Home Mounted");
+  console.debug("[Home] Scroll top");
+  await fetchProducts();
+  window.scrollTo(0, 0);
+});
+</script>
+
+<style scoped>
+.filters-status {
+  background-color: var(--color-info);
+  color: var(--color-info);
+  box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000);
+  aspect-ratio: 1;
+  border-radius: var(--radius-selector);
+  width: .5rem;
+  height: .5rem;
+  display: inline-block;
+}
+</style>
--- a/frontend/spa/src/views/OrderCreated.vue
+++ b/frontend/spa/src/views/OrderCreated.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30 flex flex-col items-center h-full justify-center">
+    <div class="flex flex-col justify-center items-center px-5">
+      <div class="mb-3">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-25 text-success">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.746 3.746 0 0 1 3.296-1.043A3.746 3.746 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 0 1 3.296 1.043 3.746 3.746 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
+        </svg>
+      </div>
+
+      <p class="text-2xl font-bold mb-3">Спасибо за заказ!</p>
+      <p class="text-center mb-4">{{ settings.texts.order_created_success }}</p>
+
+      <ul v-if="checkout.order" class="list w-full bg-base-200 mb-4">
+        <li class="list-row flex justify-between">
+          <div>Номер заказа:</div>
+          <div class="font-bold">#{{ checkout.order.id }}</div>
+        </li>
+
+        <li class="list-row flex justify-between">
+          <div>Дата:</div>
+          <div class="font-bold">{{ checkout.order.created_at }}</div>
+        </li>
+
+        <li class="list-row flex justify-between">
+          <div>Сумма:</div>
+          <div class="font-bold">{{ checkout.order.total }}</div>
+        </li>
+      </ul>
+
+      <p class="text-xs mb-10">
+        Подтверждение отправлено Вам в личных сообщениях.
+      </p>
+
+      <RouterLink class="btn btn-primary" to="/">На главную</RouterLink>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {useCheckoutStore} from "@/stores/CheckoutStore.js";
+import {onMounted} from "vue";
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+import {useRoute} from "vue-router";
+import {useSettingsStore} from "@/stores/SettingsStore.js";
+
+const checkout = useCheckoutStore();
+const yaMetrika = useYaMetrikaStore();
+const settings = useSettingsStore();
+const route = useRoute();
+
+onMounted(() => {
+  window.document.title = 'Заказ оформлен';
+  yaMetrika.pushHit(route.path, {
+    title: 'Заказ оформлен',
+  });
+});
+</script>
--- a/frontend/spa/src/views/Product.vue
+++ b/frontend/spa/src/views/Product.vue
@@ -0,0 +1,362 @@
+<template>
+  <div>
+    <div>
+      <swiper-container ref="swiperEl" init="false">
+        <swiper-slide
+            v-for="(image, index) in product.images"
+            lazy="true"
+        >
+          <img
+              :src="image.thumbnailURL"
+              :alt="image.alt"
+              @click="showFullScreen(index)"
+          />
+        </swiper-slide>
+      </swiper-container>
+
+      <FullScreenImageViewer
+          v-if="isFullScreen"
+          :images="product.images"
+          :activeIndex="initialFullScreenIndex"
+          @close="closeFullScreen"
+      />
+
+      <!-- Product info -->
+      <div class="mx-auto max-w-2xl px-4 pt-3 pb-32 sm:px-6 rounded-t-lg">
+        <div class="lg:col-span-2 lg:border-r lg:pr-8">
+          <h1 class="font-bold tracking-tight text-3xl">{{ product.name }}</h1>
+        </div>
+        <div>
+          <h3 class="text-sm font-medium">{{ product.manufacturer }}</h3>
+        </div>
+
+        <div class="mt-4 lg:row-span-3 lg:mt-0">
+          <div v-if="product.special" class="flex items-center">
+            <p class="text-2xl tracking-tight mr-3">{{ product.special }}</p>
+            <p class="text-base-400 line-through">{{ product.price }}</p>
+          </div>
+          <p v-else class="text-3xl tracking-tight">{{ product.price }}</p>
+
+          <p v-if="product.tax" class="text-sm">Без НДС: {{ product.tax }}</p>
+          <p v-if="product.points && product.points > 0" class="text-sm">Бонусные баллы: {{ product.points }}</p>
+          <p v-for="discount in product.discounts" class="text-sm">
+            {{ discount.quantity }} или больше {{ discount.price }}
+          </p>
+
+          <p v-if="false" class="text-xs">Кол-во на складе: {{ product.quantity }} шт.</p>
+          <p v-if="product.minimum && product.minimum > 1" class="text-xs">
+            Минимальное кол-во для заказа: {{ product.minimum }}
+          </p>
+          <p class="text-xs">Наличие: {{ product.stock }}</p>
+        </div>
+
+        <div v-if="product.options && product.options.length" class="mt-4">
+          <ProductOptions v-model="product.options"/>
+        </div>
+
+        <div class="py-10">
+          <!-- Description and details -->
+          <div>
+            <h3 class="sr-only">Description</h3>
+
+            <div class="space-y-6">
+              <p class="text-base" v-html="product.description"></p>
+            </div>
+          </div>
+
+          <div v-if="product.attribute_groups && product.attribute_groups.length > 0" class="mt-3">
+            <h3 class="font-bold mb-2">Характеристики</h3>
+
+            <div class="space-y-6">
+              <div class="overflow-x-auto">
+                <table class="table table-xs">
+                  <tbody>
+                  <template v-for="attrGroup in product.attribute_groups" :key="attrGroup.attribute_group_id">
+                    <tr class="bg-base-200 font-semibold">
+                      <td colspan="2">{{ attrGroup.name }}</td>
+                    </tr>
+                    <tr v-for="attr in attrGroup.attribute" :key="attr.attribute_id">
+                      <td class="w-1/3">{{ attr.name }}</td>
+                      <td>{{ attr.text }}</td>
+                    </tr>
+                  </template>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="product.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">
+      <template v-if="settings.store_enabled">
+        <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"
+                :class="isInCart ? 'btn-success' : 'btn-primary'"
+                :disabled="cart.isLoading || canAddToCart === false"
+                @click="onCartBtnClick"
+            >
+              <span v-if="cart.isLoading" class="loading loading-spinner loading-sm"></span>
+              {{ btnText }}
+            </button>
+          </div>
+
+          <Quantity
+              v-if="isInCart === false"
+              :modelValue="quantity"
+              @update:modelValue="setQuantity"
+              size="lg"
+          />
+        </div>
+      </template>
+
+      <template v-else>
+        <button
+            class="btn btn-primary btn-lg w-full"
+            :disabled="! product.share"
+            @click="openProductInMarketplace"
+        >
+          <template v-if="product.share">
+            Открыть товар
+            <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="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>
+            </svg>
+          </template>
+
+          <template>Товар недоступен</template>
+
+        </button>
+      </template>
+    </div>
+
+    <ProductNotFound v-else/>
+
+    <FullScreenImageViewer
+        v-if="isFullScreen"
+        :images="product.images"
+        :activeIndex="initialFullScreenIndex"
+        @close="closeFullScreen"
+    />
+    <LoadingFullScreen v-if="isLoading"/>
+  </div>
+</template>
+
+<script setup>
+import {computed, onMounted, onUnmounted, ref} from "vue";
+import {useRoute, useRouter} from 'vue-router'
+import ProductOptions from "../components/ProductOptions/ProductOptions.vue";
+import {useCartStore} from "../stores/CartStore.js";
+import Quantity from "../components/Quantity.vue";
+import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";
+import {apiFetch} from "@/utils/ftch.js";
+import FullScreenImageViewer from "@/components/FullScreenImageViewer.vue";
+import LoadingFullScreen from "@/components/LoadingFullScreen.vue";
+import ProductNotFound from "@/components/ProductNotFound.vue";
+import {useSettingsStore} from "@/stores/SettingsStore.js";
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
+
+const route = useRoute();
+const productId = computed(() => route.params.id);
+const product = ref({});
+const cart = useCartStore();
+const quantity = ref(1);
+const error = ref('');
+const router = useRouter();
+const isInCart = ref(false);
+const btnText = computed(() => isInCart.value ? 'В корзине' : 'Купить');
+const isFullScreen = ref(false);
+const initialFullScreenIndex = ref(0);
+const isLoading = ref(false);
+const settings = useSettingsStore();
+const yaMetrika = useYaMetrikaStore();
+
+const canAddToCart = computed(() => {
+  if (!product.value || product.value.options === undefined || product.value.options?.length === 0) {
+    return true;
+  }
+
+  const required = product.value.options.filter(item => {
+    return SUPPORTED_OPTION_TYPES.includes(item.type)
+        && item.required === true
+        && !item.value;
+  });
+
+  return required.length === 0;
+});
+
+function showFullScreen(index) {
+  window.Telegram.WebApp.HapticFeedback.selectionChanged();
+  isFullScreen.value = true;
+  initialFullScreenIndex.value = index;
+  document.body.style.overflow = 'hidden';
+  history.pushState({fullscreen: true}, '');
+}
+
+function closeFullScreen() {
+  isFullScreen.value = false;
+  document.body.style.overflow = '';
+}
+
+async function onCartBtnClick() {
+  try {
+    error.value = '';
+
+    if (isInCart.value === false) {
+      await cart.addProduct(productId.value, product.value.name, product.value.price, quantity.value, product.value.options);
+      isInCart.value = true;
+      window.Telegram.WebApp.HapticFeedback.notificationOccurred('success');
+      yaMetrika.reachGoal(YA_METRIKA_GOAL.ADD_TO_CART, {
+        price: product.value.final_price_numeric,
+        currency: product.value.currency,
+      });
+      yaMetrika.dataLayerPush({
+        "ecommerce": {
+          "currencyCode": settings.currency_code,
+          "add": {
+            "products": [
+              {
+                "id": product.value?.id,
+                "name": product.value?.name,
+                "price": product.value?.final_price_numeric,
+                "brand": product.value?.manufacturer,
+                "category": product.value?.category?.name,
+                "quantity": 1,
+                "list": "Выдача категории",
+                "position": 2
+              }
+            ]
+          }
+        }
+      });
+    } else {
+      window.Telegram.WebApp.HapticFeedback.selectionChanged();
+      await router.push({'name': 'cart'});
+    }
+
+  } catch (e) {
+    await window.Telegram.WebApp.HapticFeedback.notificationOccurred('error');
+    error.value = e.message;
+  }
+}
+
+function openProductInMarketplace() {
+  if (!product.value.share) {
+    return;
+  }
+
+  yaMetrika.reachGoal(YA_METRIKA_GOAL.PRODUCT_OPEN_EXTERNAL, {
+    price: product.value?.final_price_numeric,
+    currency: product.value?.currency,
+  });
+
+  window.Telegram.WebApp.openLink(product.value.share, {try_instant_view: false});
+}
+
+function setQuantity(newQuantity) {
+  quantity.value = newQuantity;
+  window.Telegram.WebApp.HapticFeedback.selectionChanged();
+}
+
+let canVibrate = true;
+
+function onPopState() {
+  if (isFullScreen.value) {
+    closeFullScreen();
+  } else {
+    // пусть Vue Router сам обработает
+    router.back();
+  }
+}
+
+const swiperEl = ref(null);
+
+onUnmounted(() => {
+  window.removeEventListener('popstate', onPopState);
+});
+
+onMounted(async () => {
+  isLoading.value = true;
+  try {
+    const {data} = await apiFetch(`/index.php?route=extension/tgshop/handle&api_action=product_show&id=${productId.value}`);
+    product.value = data;
+    window.document.title = data.name;
+
+    yaMetrika.pushHit(route.path, {
+      title: data.name,
+      params: {
+        'Название товара': data.name,
+        'ИД товара': data.product_id,
+        'Цена': data.price,
+      },
+    });
+
+    yaMetrika.reachGoal(YA_METRIKA_GOAL.VIEW_PRODUCT, {
+      price: data.final_price_numeric,
+      currency: data.currency,
+    });
+
+    yaMetrika.dataLayerPush({
+      "ecommerce": {
+        "currencyCode": settings.currency_code,
+        "detail": {
+          "products": [
+            {
+              "id": data.product_id,
+              "name": data.name,
+              "price": data.final_price_numeric,
+              "brand": data.manufacturer,
+              "category": data.category?.name,
+            }
+          ]
+        }
+      }
+    });
+  } catch (error) {
+    console.error(error);
+  } finally {
+    isLoading.value = false;
+  }
+
+
+  window.addEventListener('popstate', onPopState);
+
+  swiperEl.value.addEventListener('swiperslidermove', (event) => {
+    if (!canVibrate) return;
+    window.Telegram.WebApp.HapticFeedback.impactOccurred('soft');
+    canVibrate = false;
+    setTimeout(() => {
+      canVibrate = true;
+    }, 50);
+  });
+
+  Object.assign(swiperEl.value, {
+    injectStyles: [`
+    .swiper-pagination {
+      position: relative;
+      padding-top: 15px;
+    }
+      `],
+    pagination: {
+      dynamicBullets: true,
+      clickable: true,
+    },
+  });
+
+  swiperEl.value.initialize();
+});
+</script>
--- a/frontend/spa/src/views/Products.vue
+++ b/frontend/spa/src/views/Products.vue
@@ -0,0 +1,87 @@
+<template>
+  <div ref="goodsRef" class="pb-10">
+    <ProductsList
+        :products="productsStore.products.data"
+        :hasMore="productsStore.products.meta.hasMore"
+        :isLoading="productsStore.isLoading"
+        :isLoadingMore="productsStore.isLoadingMore"
+        :categoryName="category?.name"
+        @loadMore="productsStore.loadMore"
+    />
+  </div>
+</template>
+
+<script setup>
+import ProductsList from "@/components/ProductsList.vue";
+import {onMounted, ref} from "vue";
+import {useRoute} from "vue-router";
+import {useProductsStore} from "@/stores/ProductsStore.js";
+import {useCategoriesStore} from "@/stores/CategoriesStore.js";
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+
+defineOptions({
+  name: 'Products'
+});
+
+const route = useRoute();
+const productsStore = useProductsStore();
+const categoriesStore = useCategoriesStore();
+const yaMetrika = useYaMetrikaStore();
+
+const categoryId = route.params.category_id ?? null;
+const category = ref(null);
+
+onMounted(async () => {
+  console.debug("[Category] Category Products Mounted");
+  console.debug("[Category] Load products for category: ", categoryId);
+  category.value = await categoriesStore.findCategoryById(categoryId);
+  console.debug("[Category] Category Name: ", category.value?.name);
+
+  window.document.title = `${category.value?.name ?? 'Неизвестная категория'}`;
+  yaMetrika.pushHit(route.path, {
+    title: `${category.value?.name ?? 'Неизвестная категория'}`,
+  });
+
+  if (productsStore.filtersFullUrl === route.fullPath) {
+    await productsStore.loadProducts(productsStore.filters ?? {
+      operand: "AND",
+      rules: {
+        RULE_PRODUCT_CATEGORIES: {
+          criteria: {
+            product_category_ids: {
+              type: "product_categories",
+              params: {
+                operator: "contains",
+                value: [
+                  categoryId
+                ]
+              }
+            }
+          }
+        }
+      },
+    });
+  } else {
+    productsStore.reset();
+    productsStore.filtersFullUrl = route.fullPath;
+    await productsStore.loadProducts({
+      operand: "AND",
+      rules: {
+        RULE_PRODUCT_CATEGORIES: {
+          criteria: {
+            product_category_ids: {
+              type: "product_categories",
+              params: {
+                operator: "contains",
+                value: [
+                  categoryId
+                ]
+              }
+            }
+          }
+        }
+      },
+    });
+  }
+});
+</script>
--- a/frontend/spa/src/views/Search.vue
+++ b/frontend/spa/src/views/Search.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-20">
+    <h2 class="text-2xl mb-5 text-center">Поиск</h2>
+
+    <div class="w-full">
+      <label class="input w-full">
+        <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <g
+              stroke-linejoin="round"
+              stroke-linecap="round"
+              stroke-width="2.5"
+              fill="none"
+              stroke="currentColor"
+          >
+            <circle cx="11" cy="11" r="8"></circle>
+            <path d="m21 21-4.3-4.3"></path>
+          </g>
+        </svg>
+        <input
+            ref="searchInput"
+            type="search"
+            class="grow input-lg"
+            placeholder="Поиск по магазину"
+            v-model="searchStore.search"
+            @search="debouncedSearch"
+            @input="debouncedSearch"
+        />
+      </label>
+    </div>
+
+    <div v-if="searchStore.isLoading === false && searchStore.products.data.length > 0">
+      <RouterLink
+          v-for="product in searchStore.products.data"
+          :key="product.id"
+          class="flex mb-5"
+          :to="{name: 'product.show', params: {id: product.id}}"
+      >
+        <div v-if="product.images && product.images.length > 0" class="avatar">
+          <div class="w-24 rounded">
+            <img :src="product.images[0].url" :alt="product.images[0].alt"/>
+          </div>
+        </div>
+
+        <div class="ml-5 p-0">
+          <h2 class="card-title">{{ product.name }}</h2>
+          <p>{{ product.price }}</p>
+        </div>
+      </RouterLink>
+    </div>
+
+    <div v-if="searchStore.isLoading === true">
+      <div v-for="n in 3" class="flex w-full gap-4 mb-3">
+        <div class="skeleton h-32 w-32"></div>
+        <div class="flex flex-col gap-2 w-full">
+          <div class="skeleton h-4 w-full"></div>
+          <div class="skeleton h-4 w-28"></div>
+          <div class="skeleton h-4 w-28"></div>
+        </div>
+      </div>
+    </div>
+
+    <div
+        v-if="searchStore.isSearchPerformed && searchStore.isLoading === false && searchStore.products.data.length === 0"
+        class="flex flex-col items-center justify-center text-center py-16"
+    >
+      <span class="text-5xl mb-4">🛒</span>
+      <h2 class="text-xl font-semibold mb-2">Товары не найдены</h2>
+      <p class="text-sm mb-4">Попробуйте изменить или уточнить запрос</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {useSearchStore} from "@/stores/SearchStore.js";
+import {useDebounceFn} from "@vueuse/core";
+import {onMounted, ref} from "vue";
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+import {useRoute} from "vue-router";
+import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
+
+const route = useRoute();
+const yaMetrika = useYaMetrikaStore();
+const searchStore = useSearchStore();
+const searchInput = ref(null);
+const debouncedSearch = useDebounceFn(() => searchStore.performSearch(), 500);
+
+onMounted(async () => {
+  window.document.title = 'Поиск';
+  yaMetrika.pushHit(route.path, {
+    title: 'Поиск',
+  });
+  yaMetrika.reachGoal(YA_METRIKA_GOAL.VIEW_SEARCH);
+});
+</script>