feat: add telegram api

2025-07-10 23:14:09 +03:00
parent ca6275fb7e
commit b958feaec7
3 changed files with 22 additions and 11 deletions
--- a/spa/index.html
+++ b/spa/index.html
@@ -3,7 +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" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <title>Vite + Vue</title>
 </head>
 <body>
--- a/spa/src/components/ProductList.vue
+++ b/spa/src/components/ProductList.vue
@@ -4,7 +4,9 @@
      <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">
-        <a v-for="product in products" :key="product.id" class="group">
+        <a v-for="product in products" :key="product.id" class="group"
+           @touchstart="handleHaptic"
+        >
          <img :src="product.image" :alt="product.name"
               class="aspect-square w-full rounded-lg bg-gray-200 object-cover group-hover:opacity-75 xl:aspect-7/8"/>
          <h3 class="mt-4 text-sm text-gray-700">{{ product.name }}</h3>
@@ -25,4 +27,8 @@ onMounted(async () => {
  const {data} = await $fetch('https://ocstore.nikitakiselev.ru/index.php?route=extension/tgshop/handle&api_action=products');
  products.value = data;
 });
+
+function handleHaptic() {
+  window.Telegram?.WebApp?.HapticFeedback?.impactOccurred?.('heavy');
+}
 </script>
--- a/spa/src/main.js
+++ b/spa/src/main.js
@@ -3,3 +3,7 @@ import App from './App.vue'
 import './style.css'

 createApp(App).mount('#app')
+
+const tg = window.Telegram.WebApp;
+tg.ready();
+tg.expand(); // на весь экран