wip: cart

spa/src/views/Cart.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="max-w-3xl mx-auto p-4 space-y-6">
+    <h2 class="text-2xl font-semibold text-gray-900">Корзина</h2>
+
+    <div
+        v-if="cart.items.length"
+        class="rounded-2xl border border-gray-200 bg-white shadow-md overflow-hidden divide-y"
+    >
+      <div
+          v-for="item in cart.items"
+          :key="item.productId"
+          class="p-4 flex items-center justify-between"
+      >
+        <div class="flex-1">
+          <h3 class="text-base font-semibold text-gray-900">{{ item.productName }}</h3>
+          <p class="text-sm text-gray-500 mt-1">{{ item.price }}</p>
+          <div class="flex items-center gap-2 mt-3">
+            <button
+                class="w-8 h-8 rounded-full bg-gray-100 text-xl text-gray-700 flex items-center justify-center active:scale-90 transition"
+                @click="decrease(item)"
+            >−</button>
+            <span class="text-sm font-medium w-6 text-center">{{ item.quantity }}</span>
+            <button
+                class="w-8 h-8 rounded-full bg-gray-100 text-xl text-gray-700 flex items-center justify-center active:scale-90 transition"
+                @click="increase(item)"
+            >＋</button>
+          </div>
+        </div>
+
+        <button
+            @click="remove(item)"
+            class="ml-4 text-sm text-red-500 hover:underline"
+        >
+          Удалить
+        </button>
+      </div>
+    </div>
+
+    <div
+        v-else
+        class="text-center text-gray-500 py-12 border border-dashed border-gray-300 rounded-2xl bg-white"
+    >
+      <p class="text-lg">Ваша корзина пуста</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useCartStore } from '../stores/CartStore.js'
+
+const cart = useCartStore()
+
+function increase(item) {
+  item.quantity++
+}
+
+function decrease(item) {
+  if (item.quantity > 1) {
+    item.quantity--
+  } else {
+    remove(item)
+  }
+}
+
+function remove(item) {
+  const index = cart.items.findIndex(i => i.productId === item.productId)
+  if (index !== -1) cart.items.splice(index, 1)
+}
+</script>

spa/src/views/Product.vue

@@ -44,22 +44,59 @@
 </template>
 
 <script setup>
-import {onMounted, ref} from "vue";
+import {computed, onMounted, onUnmounted, ref, watch, watchEffect} from "vue";
 import {$fetch} from "ofetch";
 import { useRoute } from 'vue-router'
 import { useRouter } from 'vue-router'
 import {useHapticFeedback} from 'vue-tg';
 import ProductOptions from "../components/ProductOptions/ProductOptions.vue";
 const hapticFeedback = useHapticFeedback();
+import {useCartStore} from "../stores/CartStore.js";
 
-const router = useRouter()
-const route = useRoute()
-const productId = route.params.id
-const product = ref([]);
+const route = useRoute();
+const router = useRouter();
+const productId = computed(() => route.params.id);
+const product = ref({});
+
+const cart = useCartStore();
+
+const buttonText = computed(() => {
+  const item = cart.items.find(i => i.productId === productId.value);
+  return item && item.quantity > 0
+      ? `В корзине: ${item.quantity} · Перейти`
+      : 'Добавить в корзину'
+});
+
+const isInCartNow = computed(() => {
+  const item = cart.items.find(i => i.productId === productId.value)
+  return item && item.quantity > 0
+})
+
+watchEffect(() => {
+  window.Telegram.WebApp.MainButton.setText(buttonText.value);
+});
 
 onMounted(async () => {
-  const {data} = await $fetch(`/index.php?route=extension/tgshop/handle&api_action=product_show&id=${productId}`);
+  const {data} = await $fetch(`/index.php?route=extension/tgshop/handle&api_action=product_show&id=${productId.value}`);
   product.value = data;
+
+  const tg = window.Telegram.WebApp;
+  tg.MainButton.show();
+  tg.MainButton.setText(buttonText.value);
+  tg.MainButton.hasShineEffect = true;
+  tg.MainButton.onClick(async () => {
+    if (cart.hasProduct(productId.value)) {
+      router.push({name: 'cart.show'});
+    } else {
+      cart.addProduct(productId.value, product.value.name, product.value.price, 1, product.value.options);
+    }
+  });
+});
+
+onUnmounted(() => {
+  const tg = window.Telegram.WebApp;
+  tg.MainButton.offClick();
+  tg.MainButton.hide();
 });
 
 const carouselRef = ref();

spa/src/views/ProductsList.vue

@@ -14,11 +14,8 @@
 
       <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>
+
+          <ProductImageSwiper :images="product.images"/>
 
           <h3 class="mt-4 text-sm">{{ product.name }}</h3>
           <p class="mt-1 text-lg font-medium">{{ product.price }}</p>
@@ -36,6 +33,7 @@ import {useHapticFeedback} from 'vue-tg';
 import { useRouter, useRoute } from 'vue-router';
 import ftch from "../utils/ftch.js";
 import NoProducts from "../components/NoProducts.vue";
+import ProductImageSwiper from "../components/ProductImageSwiper.vue";
 
 const hapticFeedback = useHapticFeedback();
 const router = useRouter();