feat: added new products_carousel bock type

2025-11-13 13:41:35 +03:00
parent 6f9855995d
commit f0837e5c94
22 changed files with 747 additions and 108 deletions
--- a/frontend/spa/index.html
+++ b/frontend/spa/index.html
@@ -3,8 +3,8 @@
 <head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>OpenCart Telegram Mini App</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <title>TeleCart</title>
 </head>
 <body>
 <div id="app"></div>
--- a/frontend/spa/src/components/Dock.vue
+++ b/frontend/spa/src/components/Dock.vue
@@ -1,70 +1,65 @@
 <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>
+  <div class="dock dock-lg select-none">
+    <RouterLink
+        :to="{name: 'home'}"
+        :class="{'dock-active': route.name === 'home'}"
+        @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: '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: 'categories'}"
+        :class="{'dock-active': route.name === 'categories'}"
+        @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'}"
-          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">
+    <RouterLink
+        :to="{name: 'search'}"
+        :class="{'dock-active': route.name === 'search'}"
+        @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="{'dock-active': route.name === 'cart'}"
+        @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="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"/>
+                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>
-        <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>
+      <span class="dock-label">Корзина</span>
+    </RouterLink>
  </div>
 </template>

@@ -82,31 +77,3 @@ 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;
-  min-width: 50px;
-}
-
-.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/MainPage/Blocks/CategoriesTopBlock.vue
+++ b/frontend/spa/src/components/MainPage/Blocks/CategoriesTopBlock.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="px-4">
+  <section>
    <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>
--- a/frontend/spa/src/components/MainPage/Blocks/ProductsCarouselBlock.vue
+++ b/frontend/spa/src/components/MainPage/Blocks/ProductsCarouselBlock.vue
@@ -0,0 +1,75 @@
+<template>
+  <section class="px-4">
+    <header class="flex justify-between items-center mb-2">
+      <div>
+        <div v-if="block.title" class="font-bold uppercase">{{ block.title }}</div>
+        <div v-if="block.description" class="text-sm">{{ block.description }}</div>
+      </div>
+
+      <div>
+        <RouterLink
+            :to="{name: 'product.categories.show',
+            params: { category_id: block.data.category_id }}"
+            class="btn btn-outline btn-xs"
+        >
+          {{ block.data.all_text || 'Смотреть всё' }}
+        </RouterLink>
+      </div>
+    </header>
+    <main>
+      <Swiper
+          class="select-none"
+          :slides-per-view="block.data?.carousel?.slides_per_view || 2.5"
+          :space-between="block.data?.carousel?.space_between || 20"
+          :autoplay="block.data?.carousel?.autoplay || false"
+          :freeMode="freeModeSettings"
+          :lazy="true"
+      >
+        <SwiperSlide v-for="product in block.data.products.data" :key="product.id">
+          <RouterLink
+              :to="{name: 'product.show', params: {id: product.id}}"
+              @click="slideClick(product)"
+          >
+            <div class="text-center">
+              <img :src="product.images[0].url" :alt="product.name" loading="lazy">
+              <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>
+          </RouterLink>
+        </SwiperSlide>
+      </Swiper>
+    </main>
+  </section>
+</template>
+
+<script setup>
+import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+import {Swiper, SwiperSlide} from "swiper/vue";
+
+const yaMetrika = useYaMetrikaStore();
+
+const freeModeSettings = {
+  enabled: false,
+};
+
+const props = defineProps({
+  block: {
+    type: Object,
+    required: true,
+  }
+});
+
+function slideClick(product) {
+  if (props.block.goal_name) {
+    yaMetrika.reachGoal(props.block.goal_name, {
+      product_id: product.id,
+      product_name: product.name,
+    });
+  }
+}
+</script>
--- a/frontend/spa/src/components/MainPage/Blocks/ProductsFeedBlock.vue
+++ b/frontend/spa/src/components/MainPage/Blocks/ProductsFeedBlock.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="px-4">
+  <section>
    <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>
--- a/frontend/spa/src/components/MainPage/Blocks/SliderBlock.vue
+++ b/frontend/spa/src/components/MainPage/Blocks/SliderBlock.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="px-4">
+  <section>
    <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>
--- a/frontend/spa/src/components/MainPage/MainPage.vue
+++ b/frontend/spa/src/components/MainPage/MainPage.vue
@@ -1,5 +1,9 @@
 <template>
-  <div v-if="blocks.blocks?.length > 0" v-for="(block, index) in blocks.blocks">
+  <div
+      v-if="blocks.blocks?.length > 0"
+      v-for="(block, index) in blocks.blocks"
+      class="mb-5"
+  >
    <template v-if="blockTypeToComponentMap[block.type]">
      <component
          v-if="block.is_enabled"
@@ -29,11 +33,13 @@ 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";
+import ProductsCarouselBlock from "@/components/MainPage/Blocks/ProductsCarouselBlock.vue";

 const blockTypeToComponentMap = {
  slider: SliderBlock,
  categories_top: CategoriesTopBlock,
  products_feed: ProductsFeedBlock,
+  products_carousel: ProductsCarouselBlock,
  error: ErrorBlock,
 };

--- a/frontend/spa/src/stores/yaMetrikaStore.js
+++ b/frontend/spa/src/stores/yaMetrikaStore.js
@@ -43,6 +43,10 @@ export const useYaMetrikaStore = defineStore('ya_metrika', {
                return;
            }

+            if (! target) {
+                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);