feat: added new products_carousel bock type

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>

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>

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>

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>