wip: cart

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();