feat: add Categories

spa/src/views/CategoriesList.vue

@@ -0,0 +1,30 @@
+<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 class="grid grid-cols-2 gap-x-6 gap-y-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
+      <RouterLink
+          v-for="category in categories"
+          :key="category.id"
+          :to="`/category/${category.id}`"
+          class="group border border-gray-200 rounded-lg py-2 px-4 flex flex-col justify-center items-center"
+      >
+        <img :src="category.image" :alt="category.name" loading="lazy"/>
+        <h3 class="mt-4 text-lg">{{ category.name }}</h3>
+      </RouterLink>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue";
+import ftch from "../utils/ftch.js";
+
+const categories = ref([]);
+
+onMounted(async () => {
+  const {data} = await ftch('categoriesList');
+  console.log(data);
+  categories.value = data;
+});
+</script>

spa/src/views/Hero.vue

@@ -0,0 +1,48 @@
+<template>
+  <div
+      class="hero min-h-screen relative"
+      style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);"
+  >
+    <div class="hero-overlay"></div>
+    <div class="hero-content text-neutral-content text-center">
+      <div class="max-w-md">
+        <h1 class="mb-5 text-5xl font-bold">Товарняк</h1>
+        <p class="mb-5">
+          Мы гордо продаём то, что другие боятся.
+        </p>
+        <button class="btn btn-primary" @click="$emit('action')">
+          Показать товар лицом
+        </button>
+        <div class="mt-4 flex justify-center">
+          <svg
+              class="w-6 h-6 text-white animate-bounce"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
+          </svg>
+        </div>
+
+        <div class="absolute text-gray-400 left-3 bottom-3">
+          {{ platform }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import {useMiniApp} from "vue-tg";
+import {ref} from "vue";
+
+const emits = defineEmits(['action']);
+const tg = useMiniApp();
+const platform = ref();
+platform.value = tg.platform;
+</script>
+
+<style scoped>
+
+</style>

spa/src/views/Home.vue

@@ -1,95 +1,21 @@
 <template>
-  <div
-      class="hero min-h-screen relative"
-      style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);"
-  >
-    <div class="hero-overlay"></div>
-    <div class="hero-content text-neutral-content text-center">
-      <div class="max-w-md">
-        <h1 class="mb-5 text-5xl font-bold">Товарняк</h1>
-        <p class="mb-5">
-          Мы гордо продаём то, что другие боятся.
-        </p>
-        <button class="btn btn-primary" @click="scrollToProducts">
-          Показать товар лицом
-        </button>
-        <div class="mt-4 flex justify-center">
-          <svg
-              class="w-6 h-6 text-white animate-bounce"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              viewBox="0 0 24 24"
-              xmlns="http://www.w3.org/2000/svg">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
-          </svg>
-        </div>
-
-        <div class="absolute text-gray-400 left-3 bottom-3">
-          {{ platform }}
-        </div>
-      </div>
-    </div>
-  </div>
-
   <div ref="goodsRef">
-    <div class="bg-base-100">
-      <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
-        <h2 class="sr-only">Products</h2>
-
-        <div 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">
-          <RouterLink v-for="product in products" :key="product.id" class="group" :to="`/product/${product.id}`">
-            <div class="carousel carousel-center rounded-box" ref="carouselRef" @scroll.passive="onScroll">
-              <div v-for="(image, i) in product.images" :key="i" class="carousel-item">
-                <img :src="image.url" :alt="image.alt"/>
-              </div>
-            </div>
-
-            <h3 class="mt-4 text-sm">{{ product.name }}</h3>
-            <p class="mt-1 text-lg font-medium">{{ product.price }}</p>
-          </RouterLink>
-        </div>
-      </div>
-    </div>
+    <CategoriesInline/>
+    <ProductsList/>
   </div>
 </template>
 
 <script setup>
-import {$fetch} from 'ofetch';
 import {onMounted, ref} from "vue";
-import {useHapticFeedback, useMiniApp} from 'vue-tg';
-
-const hapticFeedback = useHapticFeedback();
-
-const products = ref([]);
-
-onMounted(async () => {
-  const {data} = await $fetch('/index.php?route=extension/tgshop/handle&api_action=products');
-  products.value = data;
-});
 
 const goodsRef = ref();
 function scrollToProducts() {
   goodsRef.value?.scrollIntoView({ behavior: 'smooth' });
 }
 
-const tg = useMiniApp();
-const platform = ref();
-platform.value = tg.platform;
-
-const carouselRef = ref();
-let lastScrollLeft = 0;
-function onScroll(e) {
-  const scrollLeft = e.target.scrollLeft;
-  const delta = Math.abs(scrollLeft - lastScrollLeft);
-
-  if (delta > 30) {
-    hapticFeedback.impactOccurred('soft');
-    lastScrollLeft = scrollLeft;
-  }
-}
-
 import { useBackButton } from 'vue-tg';
+import ProductsList from "./ProductsList.vue";
+import CategoriesInline from "../components/CategoriesInline.vue";
 const backButton = useBackButton();
 
 onMounted(() => {

spa/src/views/Product.vue

@@ -6,6 +6,7 @@
           <img
               :src="image.url"
               class="w-full"
+              loading="lazy"
               :alt="image.alt" />
         </div>
       </div>
@@ -79,6 +80,4 @@ function onScroll(e) {
     lastScrollLeft = scrollLeft;
   }
 }
-
-
 </script>

spa/src/views/ProductsList.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-6 lg:max-w-7xl lg:px-8">
+    <h2 class="text-lg font-bold mb-5 text-center">{{ productsMeta.currentCategoryName }}</h2>
+
+    <div v-if="products.length > 0" 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">
+      <RouterLink v-for="product in products" :key="product.id" class="group" :to="`/product/${product.id}`">
+        <div class="carousel carousel-center rounded-box" ref="carouselRef" @scroll.passive="onScroll">
+          <div v-for="(image, i) in product.images" :key="i" class="carousel-item">
+            <img :src="image.url" :alt="image.alt" loading="lazy"/>
+          </div>
+        </div>
+
+        <h3 class="mt-4 text-sm">{{ product.name }}</h3>
+        <p class="mt-1 text-lg font-medium">{{ product.price }}</p>
+      </RouterLink>
+    </div>
+
+    <NoProducts v-else/>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue";
+import {useBackButton, useHapticFeedback, useMiniApp} from 'vue-tg';
+import { useRouter, useRoute } from 'vue-router';
+import ftch from "../utils/ftch.js";
+import NoProducts from "../components/NoProducts.vue";
+
+const hapticFeedback = useHapticFeedback();
+const router = useRouter();
+const route = useRoute();
+const categoryId = route.params.id;
+
+const products = ref([]);
+const productsMeta = ref([]);
+
+const carouselRef = ref();
+let lastScrollLeft = 0;
+function onScroll(e) {
+  const scrollLeft = e.target.scrollLeft;
+  const delta = Math.abs(scrollLeft - lastScrollLeft);
+
+  if (delta > 30) {
+    hapticFeedback.impactOccurred('soft');
+    lastScrollLeft = scrollLeft;
+  }
+}
+
+const backButton = useBackButton();
+if (typeof backButton.show === 'function') {
+  backButton.show();
+  backButton.onClick(() => {
+    router.back()
+  });
+}
+
+onMounted(async () => {
+  const {data, meta} = await ftch('products', {
+    categoryId: categoryId,
+  });
+  productsMeta.value = meta;
+  products.value = data;
+});
+</script>