feat: new settings and mainpage blocks

2025-11-11 00:30:39 +03:00
parent 5fb45000ac
commit 6176c720b1
97 changed files with 1842 additions and 1658 deletions
--- a/frontend/spa/src/components/CategoriesInline.vue
+++ b/frontend/spa/src/components/CategoriesInline.vue
@@ -1,28 +0,0 @@
-<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/Dock.vue
+++ b/frontend/spa/src/components/Dock.vue
@@ -21,6 +21,18 @@
        <span class="dock-label">Главная</span>
      </RouterLink>

+      <RouterLink
+          :to="{name: 'categories'}"
+          :class="{'active': route.name === 'categories'}"
+          class="telecart-dock-item"
+          @click="onDockItemClick"
+      >
+        <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="dock-label">Каталог</span>
+      </RouterLink>
+
      <RouterLink
          :to="{name: 'search'}"
          :class="{'active': route.name === 'search'}"
@@ -88,8 +100,8 @@ function onDockItemClick() {
  flex-direction: column;
  align-items: center;
  border-radius: var(--radius-field);
-  padding: 5px 13px;
-  min-width: 90px;
+  padding: 5px;
+  min-width: 50px;
 }

 .telecart-dock-item.active {
--- a/frontend/spa/src/components/MainPage/Blocks/CategoriesTopBlock.vue
+++ b/frontend/spa/src/components/MainPage/Blocks/CategoriesTopBlock.vue
@@ -0,0 +1,46 @@
+<template>
+  <section class="px-4">
+    <header>
+      <div v-if="block.title" class="font-bold uppercase text-center">{{ block.title }}</div>
+      <div v-if="block.description" class="text-sm text-center">{{ block.description }}</div>
+    </header>
+    <main>
+      <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 block.data?.categories || []"
+            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>
+    </main>
+  </section>
+</template>
+
+<script setup>
+import {ref} from "vue";
+
+const isLoading = ref(false);
+
+const props = defineProps({
+  block: {
+    type: Object,
+    required: true,
+  }
+});
+
+function onCategoryClick() {
+  window.Telegram.WebApp.HapticFeedback.impactOccurred('soft');
+}
+</script>
--- a/frontend/spa/src/components/MainPage/Blocks/ErrorBlock.vue
+++ b/frontend/spa/src/components/MainPage/Blocks/ErrorBlock.vue
@@ -0,0 +1,8 @@
+<template>
+  <div 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>Проблема при отображении блока.</span>
+  </div>
+</template>
--- a/frontend/spa/src/components/MainPage/Blocks/ProductsFeedBlock.vue
+++ b/frontend/spa/src/components/MainPage/Blocks/ProductsFeedBlock.vue
@@ -0,0 +1,110 @@
+<template>
+  <section class="px-4">
+    <header>
+      <div v-if="block.title" class="font-bold uppercase text-center">{{ block.title }}</div>
+      <div v-if="block.description" class="text-sm text-center">{{ block.description }}</div>
+    </header>
+    <main>
+      <ProductsList
+          :products="products"
+          :hasMore="hasMore"
+          :isLoading="isLoading"
+          :isLoadingMore="isLoadingMore"
+          @loadMore="onLoadMore"
+      />
+    </main>
+  </section>
+</template>
+
+<script setup>
+import {onMounted, ref, toRaw} from "vue";
+import ProductsList from "@/components/ProductsList.vue";
+import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+import {useSettingsStore} from "@/stores/SettingsStore.js";
+import ftch from "@/utils/ftch.js";
+
+const filtersStore = useProductFiltersStore();
+const yaMetrika = useYaMetrikaStore();
+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;
+
+const props = defineProps({
+  block: {
+    type: Object,
+    required: true,
+  }
+});
+
+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,
+      maxPages: props.block.data.max_page_count,
+      perPage: perPage,
+      filters: filtersStore.applied,
+    }));
+    products.value = response.data;
+    hasMore.value = response.meta.hasMore;
+    console.debug('ProductsFeedBlock: 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('ProductsFeedBlock: onLoadMore');
+    if (isLoading.value === true || isLoadingMore.value === true || hasMore.value === false) return;
+    isLoadingMore.value = true;
+    page.value++;
+    console.debug('ProductsFeedBlock: Load more for page ', page.value, ' using filters: ', toRaw(filtersStore.applied));
+    const response = await ftch('products', null, toRaw({
+      page: page.value,
+      maxPages: props.block.data.max_page_count,
+      filters: filtersStore.applied,
+    }));
+    products.value.push(...response.data);
+    hasMore.value = response.meta.hasMore;
+  } catch (error) {
+    console.error(error);
+  } finally {
+    isLoadingMore.value = false;
+  }
+}
+
+onMounted(async () => {
+  console.debug("[Products Feed] Mounted");
+  await fetchProducts();
+});
+</script>
--- a/frontend/spa/src/components/MainPage/Blocks/SliderBlock.vue
+++ b/frontend/spa/src/components/MainPage/Blocks/SliderBlock.vue
@@ -0,0 +1,26 @@
+<template>
+  <section class="px-4">
+    <header>
+      <div v-if="block.title" class="font-bold uppercase text-center">{{ block.title }}</div>
+      <div v-if="block.description" class="text-sm text-center mb-2">{{ block.description }}</div>
+    </header>
+    <main>
+      <Slider :config="block.data" :goalName="block.goal_name"/>
+    </main>
+  </section>
+</template>
+
+<script setup>
+import Slider from "@/components/Slider.vue";
+
+const props = defineProps({
+  block: {
+    type: Object,
+    required: true,
+  }
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>
--- a/frontend/spa/src/components/MainPage/EmptyBlocks.vue
+++ b/frontend/spa/src/components/MainPage/EmptyBlocks.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="flex flex-col items-center justify-center text-center py-16 px-4">
+    <div class="mb-6">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-16 text-base-content/40">
+        <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>
+    </div>
+    <h2 class="text-xl font-semibold mb-3">Главная страница пуста</h2>
+    <p class="text-sm text-base-content/70 mb-2 max-w-md">
+      На главной странице не сконфигурировано ни одного блока для отображения.
+    </p>
+    <p class="text-sm text-base-content/70 max-w-md">
+      Перейдите в настройки модуля <span class="font-semibold">TeleCart</span> и добавьте блоки на главную страницу.
+    </p>
+    <div class="mt-6 p-4 bg-base-200 rounded-lg max-w-md">
+      <div class="flex items-start gap-3">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 text-info shrink-0 mt-0.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
+        </svg>
+        <p class="text-xs text-base-content/60 text-left">
+          Вы можете добавить слайдеры, категории, ленты товаров и другие блоки для создания красивой главной страницы.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
--- a/frontend/spa/src/components/MainPage/MainPage.vue
+++ b/frontend/spa/src/components/MainPage/MainPage.vue
@@ -0,0 +1,41 @@
+<template>
+  <div v-if="blocks.blocks?.length > 0" v-for="(block, index) in blocks.blocks">
+    <template v-if="blockTypeToComponentMap[block.type]">
+      <component
+          v-if="block.is_enabled"
+          :is="blockTypeToComponentMap[block.type]"
+          :block="block"
+      />
+    </template>
+
+    <div v-else-if="blockTypeToComponentMap[block.type] === undefined">
+      <div role="alert" class="alert alert-error mx-4">
+        <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>Unsupported Block Type: <span class="font-bold">{{ block.type }}</span></span>
+      </div>
+    </div>
+  </div>
+
+  <EmptyBlocks v-else/>
+</template>
+
+<script setup>
+import SliderBlock from "@/components/MainPage/Blocks/SliderBlock.vue";
+import CategoriesTopBlock from "@/components/MainPage/Blocks/CategoriesTopBlock.vue";
+import {useBlocksStore} from "@/stores/BlocksStore.js";
+import ErrorBlock from "@/components/MainPage/Blocks/ErrorBlock.vue";
+import ProductsFeedBlock from "@/components/MainPage/Blocks/ProductsFeedBlock.vue";
+import EmptyBlocks from "@/components/MainPage/EmptyBlocks.vue";
+
+const blockTypeToComponentMap = {
+  slider: SliderBlock,
+  categories_top: CategoriesTopBlock,
+  products_feed: ProductsFeedBlock,
+  error: ErrorBlock,
+};
+
+const blocks = useBlocksStore();
+</script>
--- a/frontend/spa/src/components/ProductsList.vue
+++ b/frontend/spa/src/components/ProductsList.vue
@@ -1,50 +1,66 @@
 <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>
+  <div>
+    <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)"
+      <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"
        >
-          <ProductImageSwiper :images="product.images"/>
-          <h3 class="product-title mt-4 text-sm">{{ product.name }}</h3>
+          <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>
+            <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>
+          </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.text_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>

-      <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>
+      <NoProducts v-else/>
    </div>

-    <NoProducts v-else/>
+    <div class="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>
  </div>
 </template>

@@ -55,9 +71,15 @@ import {useSettingsStore} from "@/stores/SettingsStore.js";
 import {ref} from "vue";
 import {useIntersectionObserver} from '@vueuse/core';
 import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+import IconFunnel from "@/components/Icons/IconFunnel.vue";
+import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
+import {useRouter} from "vue-router";

+const router = useRouter();
+const haptic = window.Telegram.WebApp.HapticFeedback;
 const yaMetrika = useYaMetrikaStore();
 const settings = useSettingsStore();
+const filtersStore = useProductFiltersStore();
 const bottom = ref(null);

 const emits = defineEmits(['loadMore']);
@@ -128,6 +150,11 @@ useIntersectionObserver(
      rootMargin: '400px 0',
    }
 );
+
+function showFilters() {
+  haptic.impactOccurred('soft');
+  router.push({name: 'filters'});
+}
 </script>

 <style scoped>
--- a/frontend/spa/src/components/MainpageSlider.vue
+++ b/frontend/spa/src/components/MainpageSlider.vue
@@ -1,25 +1,21 @@
 <template>
-  <div
-      v-if="sliders.mainpage_slider.is_enabled && sliders.mainpage_slider.slides.length > 0"
-      class="app-banner"
-      :class="classList"
-  >
+  <div v-if="config.slides.length > 0" class="app-banner" :class="classList">
    <Swiper
        :effect="slideEffect"
        class="select-none"
        :slides-per-view="1"
-        :space-between="sliders.mainpage_slider.space_between"
+        :space-between="config.space_between"
        :pagination="pagination"
        :lazy="true"
        :modules="modules"
        :scrollbar="scrollbar"
-        :free-mode="sliders.mainpage_slider.free_mode"
-        :loop="sliders.mainpage_slider.loop"
+        :free-mode="config.free_mode"
+        :loop="config.loop"
        :autoplay="autoplay"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
    >
-      <SwiperSlide v-for="slide in sliders.mainpage_slider.slides" :key="slide.id">
+      <SwiperSlide v-for="slide in config.slides" :key="slide.id">
        <RouterLink
            v-if="slide?.link?.type === 'category'"
            :to="{name: 'product.categories.show', params: {category_id: slide.link.value.category_id}}"
@@ -48,6 +44,16 @@
      </SwiperSlide>
    </Swiper>
  </div>
+
+  <div v-else>
+    <div 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>У слайдера не загружены изображения.</span>
+    </div>
+  </div>
 </template>

 <script setup>
@@ -56,11 +62,21 @@ import 'swiper/css';
 import 'swiper/css/navigation';
 import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
 import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
-import {EffectCoverflow, EffectCards, EffectCube, EffectFlip, Scrollbar, Autoplay} from 'swiper/modules';
+import {Autoplay, EffectCards, EffectCoverflow, EffectCube, EffectFlip, Scrollbar} from 'swiper/modules';
 import {computed, onMounted} from "vue";
-import {useSlidersStore} from "@/stores/SlidersStore.js";

-const sliders = useSlidersStore();
+const props = defineProps({
+  config: {
+    type: Object,
+    required: true,
+  },
+
+  goalName: {
+    type: String,
+    default: null,
+  }
+});
+
 const yaMetrika = useYaMetrikaStore();
 const modules = [
  Autoplay,
@@ -72,15 +88,15 @@ const modules = [
 ];

 const classList = computed(() => {
-  if (sliders.mainpage_slider.effect === 'cards') {
+  if (props.config.effect === 'cards') {
    return ['px-8'];
  }

-  if (sliders.mainpage_slider.effect === 'flip') {
+  if (props.config.effect === 'flip') {
    return ['px-4', 'pb-4', 'pt-4'];
  }

-  if (sliders.mainpage_slider.effect === 'cube') {
+  if (props.config.effect === 'cube') {
    return ['px-4', 'pb-10'];
  }

@@ -91,19 +107,19 @@ const onSwiper = (swiper) => {
  console.log(swiper);
 };
 const onSlideChange = () => {
-  console.log('slide change');
+
 };

 const slideEffect = computed(() => {
-  if (sliders.mainpage_slider.effect === 'slide') {
+  if (props.config.effect === 'slide') {
    return null;
  }

-  return sliders.mainpage_slider.effect;
+  return props.config.effect;
 });

 const pagination = computed(() => {
-  if (sliders.mainpage_slider.pagination) {
+  if (props.config.pagination) {
    return {
      clickable: true, dynamicBullets: false,
    };
@@ -112,7 +128,7 @@ const pagination = computed(() => {
 });

 const scrollbar = computed(() => {
-  if (sliders.mainpage_slider.scrollbar) {
+  if (props.config.scrollbar) {
    return {
      hide: true,
    };
@@ -121,7 +137,7 @@ const scrollbar = computed(() => {
 });

 const autoplay = computed(() => {
-  if (sliders.mainpage_slider.autoplay) {
+  if (props.config.autoplay) {
    return {
      delay: 3000,
      reverseDirection: false,
@@ -132,9 +148,11 @@ const autoplay = computed(() => {
 });

 function sliderClick(slide) {
-  yaMetrika.reachGoal(YA_METRIKA_GOAL.SLIDER_HOME_CLICK, {
-    banner: slide.title,
-  });
+  if (props.goalName) {
+    yaMetrika.reachGoal(props.goalName, {
+      banner: slide.title,
+    });
+  }
 }

 function openExternalLink(link, slide) {
@@ -150,7 +168,7 @@ function openExternalLink(link, slide) {
 }

 onMounted(() => {
-  console.debug('[Mainpage Slider] Status: ', sliders.mainpage_slider);
+  console.debug('[Mainpage Slider] Init with config: ', props.config);
 });
 </script>