nikitakiselev/interview-demo-code
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nikita Kiselev
2025-08-03 19:07:54 +03:00
parent 63adf96908
commit ebc352dcdf
3 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
spa/src/components/CartButton.vue
View File

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

7
spa/src/router.js
View File

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

11
spa/src/views/Product.vue
View File

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