feat(product): change router history driver, change add to cart behaviour

spa/src/components/CartButton.vue

@@ -24,13 +24,13 @@ const router = useRouter();
 const route = useRoute();
 
 const isCartBtnShow = computed(() => {
-  return route.name !== 'cart.show' && route.name !== 'checkout';
+  return route.name !== 'cart' && route.name !== 'checkout';
 });
 
 
 function openCart() {
   window.Telegram.WebApp.HapticFeedback.selectionChanged();
-  router.push({name: 'cart.show'});
+  router.push({name: 'cart'});
 }
 
 onMounted(async () => {

spa/src/router.js

@@ -1,4 +1,4 @@
-import {createMemoryHistory, createRouter} from 'vue-router';
+import {createRouter, createWebHistory} from 'vue-router';
 import Home from './views/Home.vue';
 import Product from './views/Product.vue';
 import CategoriesList from "./views/CategoriesList.vue";
@@ -13,12 +13,13 @@ const routes = [
     {path: '/products/:category_id', name: 'product.categories.show', component: Products},
     {path: '/categories', name: 'categories', component: CategoriesList},
     {path: '/category/:id', name: 'category.show', component: CategoriesList},
-    {path: '/cart', name: 'cart.show', component: Cart},
+    {path: '/cart', name: 'cart', component: Cart},
     {path: '/checkout', name: 'checkout', component: Checkout},
     {path: '/success', name: 'order_created', component: OrderCreated},
 ];
 
 export const router = createRouter({
-    history: createMemoryHistory('/image/catalog/tgshopspa/'),
+    // history: createMemoryHistory('/image/catalog/tgshopspa/'),
+    history: createWebHistory('/image/catalog/tgshopspa/'),
     routes,
 });

spa/src/views/Product.vue

@@ -80,6 +80,7 @@
         </div>
 
         <Quantity
+            v-if="isInCart === false"
             :modelValue="quantity"
             @update:modelValue="setQuantity"
             size="lg"
@@ -91,7 +92,7 @@
 
 <script setup>
 import {computed, onMounted, ref} from "vue";
-import {useRoute} from 'vue-router'
+import {useRoute, useRouter} from 'vue-router'
 import ProductOptions from "../components/ProductOptions/ProductOptions.vue";
 import {useCartStore} from "../stores/CartStore.js";
 import ProductImageSwiper from "../components/ProductImageSwiper.vue";
@@ -105,6 +106,7 @@ const product = ref({});
 const cart = useCartStore();
 const quantity = ref(1);
 const error = ref('');
+const router = useRouter();
 
 const isInCart = ref(false);
 const btnText = computed(() => isInCart.value ? 'В корзине' : 'Купить');
@@ -126,9 +128,16 @@ const canAddToCart = computed(() => {
 async function actionBtnClick() {
   try {
     error.value = '';
+
+    if (isInCart.value === false) {
       await cart.addProduct(productId.value, product.value.name, product.value.price, quantity.value, product.value.options);
       isInCart.value = true;
       window.Telegram.WebApp.HapticFeedback.notificationOccurred('success');
+    } else {
+      window.Telegram.WebApp.HapticFeedback.selectionChanged();
+      await router.push({'name': 'cart'});
+    }
+
   } catch (e) {
     await window.Telegram.WebApp.HapticFeedback.notificationOccurred('error');
     error.value = e.message;