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

wip: shopping cart

Browse Source
This commit is contained in:
Nikita Kiselev
2025-07-23 18:40:57 +03:00
parent bb2ee38118
commit 49d41747d3
22 changed files with 545 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,13 @@
<template>
<div class="flex items-center justify-center p-5 gap-2 flex-wrap">
<RouterLink class="btn" to="/categories">
<RouterLink class="btn btn-sm" to="/categories">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
</svg>
Каталог
</RouterLink>
<RouterLink v-for="category in categoriesStore.topCategories" class="btn" :to="`/category/${category.id}`">
<RouterLink v-for="category in categoriesStore.topCategories" class="btn btn-sm" :to="{name: 'product.categories.show', params: {category_id: category.id}}">
{{ category.name }}
</RouterLink>
</div>

27
spa/src/components/CategoriesList/CategoryItem.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<a
href="#"
:key="category.id"
class="py-2 px-4 flex items-center mb-3"
@click.prevent="$emit('onSelect', category)"
>
<div class="avatar">
<div class="w-8 h-8 rounded">
<img :src="category.image" :alt="category.name" loading="lazy" width="30" height="30" class="bg-base-400"/>
</div>
</div>
<h3 class="ml-5 text-lg">{{ category.name }}</h3>
</a>
</template>
<script setup>
const props = defineProps({
category: {
type: Object,
required: true,
}
});
const emit = defineEmits(["onSelect"]);
</script>

73
spa/src/components/ProductsList.vue
View File

@@ -1,7 +1,39 @@
<template>
<div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-6 lg:max-w-7xl lg:px-8">
<h2 class="text-lg font-bold mb-5 text-center">{{ productsStore.products.meta.currentCategoryName }}</h2>
<div v-if="productsStore.isLoading"
<div v-if="productsStore.products.data.length > 0">
<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"
>
<RouterLink
v-for="product in productsStore.products.data"
:key="product.id"
class="group"
:to="`/product/${product.id}`"
@click="haptic"
>
<ProductImageSwiper :images="product.images"/>
<h3 class="mt-4 text-sm">{{ product.name }}</h3>
<p class="mt-1 text-lg font-medium">{{ product.price }}</p>
</RouterLink>
</div>
<div v-if="productsStore.isLoading" class="text-center mt-5">
<span class="loading loading-spinner loading-md"></span> Загрузка...
</div>
<div
v-if="productsStore.hasMore === false"
class="text-gray-500 text-xs text-center mt-4 pt-4 mb-2 border-t"
>
{{ settings.noMoreProductsMessage }}
</div>
</div>
<NoProducts v-else-if="productsStore.loadFinished"/>
<div v-else
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">
<div v-for="n in 8" :key="n" class="animate-pulse space-y-2">
<div class="aspect-square bg-gray-200 rounded-md"></div>
@@ -9,39 +41,6 @@
<div class="h-4 bg-gray-200 rounded w-1/2"></div>
</div>
</div>
<template v-else>
<h2 class="text-lg font-bold mb-5 text-center">{{ productsStore.products.meta.currentCategoryName }}</h2>
<div v-if="productsStore.products.data.length > 0">
<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"
>
<RouterLink
v-for="product in productsStore.products.data"
:key="product.id"
class="group"
:to="`/product/${product.id}`"
@click="haptic"
>
<ProductImageSwiper :images="product.images"/>
<h3 class="mt-4 text-sm">{{ product.name }}</h3>
<p class="mt-1 text-lg font-medium">{{ product.price }}</p>
</RouterLink>
</div>
<div
v-if="productsStore.hasMore === false"
class="text-gray-500 text-xs text-center mt-4 pt-4 mb-2 border-t"
>
{{ settings.noMoreProductsMessage }}
</div>
</div>
<NoProducts v-else/>
</template>
</div>
</template>
@@ -55,7 +54,7 @@ import {useSettingsStore} from "@/stores/SettingsStore.js";
import {nextTick, onMounted, ref, watch} from "vue";
const route = useRoute();
const categoryId = route.params.id ?? null;
const categoryId = route.params.category_id ?? null;
const productsStore = useProductsStore();
const settings = useSettingsStore();
@@ -85,13 +84,14 @@ async function loadMore() {
console.error('Ошибка загрузки', e)
} finally {
productsStore.isLoading = false;
productsStore.loadFinished = true;
}
}
useInfiniteScroll(
window,
loadMore,
{distance: 300}
{distance: 500}
)
watch(() => route.params.id, async newId => {
@@ -103,7 +103,6 @@ watch(() => route.params.id, async newId => {
});
onMounted(async () => {
console.log("Mounted");
const saved = productsStore.savedCategoryId === categoryId;
console.log("Saved Category: ", saved);

3
spa/src/main.js
View File

@@ -17,6 +17,8 @@ app.mount('#app');
const settings = useSettingsStore();
const categoriesStore = useCategoriesStore();
categoriesStore.fetchTopCategories();
categoriesStore.fetchCategories();
import {useCategoriesStore} from "@/stores/CategoriesStore.js";
import {useSettingsStore} from "@/stores/SettingsStore.js";
@@ -30,4 +32,3 @@ if (settings.night_auto) {
}
window.Telegram.WebApp.ready();

12
spa/src/router.js
View File

@@ -4,23 +4,19 @@ import Product from './views/Product.vue';
import CategoriesList from "./views/CategoriesList.vue";
import Cart from "./views/Cart.vue";
import Products from "@/views/Products.vue";
import Checkout from "@/views/Checkout.vue";
const routes = [
{path: '/', name: 'home', component: Home},
{path: '/product/:id', name: 'product.show', component: Product},
{path: '/products/:category_id', name: 'product.categories.show', component: Products},
{path: '/categories', name: 'categories', component: CategoriesList},
{path: '/category/:id', name: 'category.show', component: Products},
{path: '/category/:id', name: 'category.show', component: CategoriesList},
{path: '/cart', name: 'cart.show', component: Cart},
{path: '/checkout', name: 'checkout', component: Checkout},
];
export const router = createRouter({
history: createMemoryHistory('/image/catalog/tgshopspa/'),
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition; // Восстановить позицию прокрутки
} else {
return {top: 0}; // Или оставить на старте
}
}
});

33
spa/src/stores/CartStore.js
View File

@@ -1,25 +1,38 @@
import {defineStore} from "pinia";
import ftch from "@/utils/ftch.js";
import {$fetch} from "ofetch";
import {isNotEmpty} from "@/helpers.js";
import {apiFetch} from "@/utils/ftch.js";
export const useCartStore = defineStore('cart', {
state: () => ({
items: [],
products: [],
productsCount: 0,
total: 0,
isLoading: false,
reason: null,
error_warning: '',
attention: '',
success: '',
}),
getters: {
canCheckout: (state) => {
if (state.isLoading) {
return false;
}
},
},
actions: {
async getProducts() {
try {
this.isLoading = true;
const {data} = await ftch('cart');
this.products = data.products;
this.productsCount = data.count;
this.total = data.total;
const data = await apiFetch('/index.php?route=extension/tgshop/handle/cart');
this.items = data.products;
this.productsCount = data.total_products_count;
this.totals = data.totals;
this.error_warning = data.error_warning;
this.attention = data.attention;
this.success = data.success;
} catch (error) {
console.error(error);
} finally {
@@ -49,7 +62,7 @@ export const useCartStore = defineStore('cart', {
}
})
const response = await $fetch('/index.php?route=checkout/cart/add', {
const response = await apiFetch('/index.php?route=checkout/cart/add', {
method: 'POST',
body: formData,
});
@@ -72,7 +85,7 @@ export const useCartStore = defineStore('cart', {
this.isLoading = true;
const formData = new FormData();
formData.append('key', rowId);
await $fetch('/index.php?route=checkout/cart/remove', {
await apiFetch('/index.php?route=checkout/cart/remove', {
method: 'POST',
body: formData,
});
@@ -89,7 +102,7 @@ export const useCartStore = defineStore('cart', {
this.isLoading = true;
const formData = new FormData();
formData.append(`quantity[${cartId}]`, quantity);
await $fetch('/index.php?route=checkout/cart/edit', {
await apiFetch('/index.php?route=checkout/cart/edit', {
redirect: 'manual',
method: 'POST',
body: formData,

15
spa/src/stores/CategoriesStore.js
View File

@@ -4,10 +4,25 @@ import ftch from "../utils/ftch.js";
export const useCategoriesStore = defineStore('categories', {
state: () => ({
topCategories: [],
categories: [],
isLoading: false,
}),
actions: {
async fetchCategories() {
if (this.isLoading === false && this.categories.length === 0) {
try {
this.isLoading = true;
const {data} = await ftch('categoriesList');
this.categories = data;
} catch (error) {
console.error(error);
} finally {
this.isLoading = false;
}
}
},
async fetchTopCategories() {
try {
this.isLoading = true;

2
spa/src/stores/ProductsStore.js
View File

@@ -9,6 +9,7 @@ export const useProductsStore = defineStore('products', {
},
page: 1,
isLoading: false,
loadFinished: false,
hasMore: true,
savedCategoryId: null,
savedScrollY: 0,
@@ -32,6 +33,7 @@ export const useProductsStore = defineStore('products', {
reset() {
this.page = 1;
this.hasMore = true;
this.loadFinished = false;
this.products = {
data: [],
meta: {},

7
spa/src/style.css
View File

@@ -3,10 +3,7 @@
themes: all;
}
html, body {
overscroll-behavior-y: none;
-webkit-overflow-scrolling: auto;
}
#app {
padding-top: var(--tg-content-safe-area-inset-top);
@@ -20,4 +17,4 @@ html, body {
padding-bottom: var(--tg-safe-area-inset-bottom);
padding-left: var(--tg-safe-area-inset-left);
padding-right: var(--tg-safe-area-inset-right);
}
}

25
spa/src/utils/ftch.js
View File

@@ -1,11 +1,26 @@
import {$fetch} from "ofetch";
import {ofetch} from "ofetch";
const BASE_URL = '/';
export const apiFetch = ofetch.create({
onRequest({ request, options }) {
const initData = window.Telegram?.WebApp?.initData
if (initData) {
options.headers = {
...options.headers,
'X-Telegram-InitData': initData,
}
}
},
});
export default async function (action, query = null, json = null) {
return await $fetch(`${BASE_URL}index.php?route=extension/tgshop/handle&api_action=${action}`, {
const options = {
method: json ? 'POST' : 'GET',
query: query,
body: json,
});
}
if (query) options.query = query;
if (json) options.body = json;
return await apiFetch(`${BASE_URL}index.php?route=extension/tgshop/handle&api_action=${action}`, options);
};

93
spa/src/views/Cart.vue
View File

@@ -5,9 +5,23 @@
<span v-if="cart.isLoading" class="loading loading-spinner loading-md"></span>
</h2>
<div v-if="cart.products.length > 0">
<div v-if="cart.attention" role="alert" class="alert alert-warning">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<span>{{ cart.attention }}</span>
</div>
<div v-if="cart.error_warning" role="alert" class="alert alert-error">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>{{ cart.error_warning }}</span>
</div>
<div v-if="cart.items.length > 0">
<div
v-for="item in cart.products"
v-for="item in cart.items"
:key="item.cart_id"
class="card card-border bg-base-100 card-sm mb-3"
:class="item.stock === false ? 'border-error' : ''"
@@ -19,21 +33,20 @@
</div>
</div>
<p v-if="! item.stock" class="text-error font-bold">Товар отсутствует на складе в нужном количестве.</p>
<h2 class="card-title">{{ item.name }}</h2>
<p class="text-sm font-bold">{{ formatPrice(item.total) }} ₽</p>
<p>{{ formatPrice(item.price) }} ₽/ед</p>
<h2 class="card-title">{{ item.name }} <span v-if="! item.stock" class="text-error font-bold">***</span></h2>
<p class="text-sm font-bold">{{ item.total }}</p>
<p>{{ item.price }}/ед</p>
<div>
<div v-for="option in item.option">
<component
v-if="SUPPORTED_OPTION_TYPES.includes(option.type) && componentMap[option.type]"
:is="componentMap[option.type]"
:option="option"
/>
<div v-else class="text-sm text-error">
Тип опции "{{ option.type }}" не поддерживается.
</div>
<p><span class="font-bold">{{ option.name }}</span>: {{ option.value }}</p>
<!-- <component-->
<!-- v-if="SUPPORTED_OPTION_TYPES.includes(option.type) && componentMap[option.type]"-->
<!-- :is="componentMap[option.type]"-->
<!-- :option="option"-->
<!-- />-->
<!-- <div v-else class="text-sm text-error">-->
<!-- Тип опции "{{ option.type }}" не поддерживается.-->
<!-- </div>-->
</div>
</div>
<div class="card-actions justify-between">
@@ -51,14 +64,29 @@
</div>
</div>
<div class="card card-border bg-base-100">
<div class="card-body">
<h2 class="card-title">Ваша корзина</h2>
<div v-for="total in cart.totals">
<div class="flex justify-between">
<span class="text-xs text-base-content mr-2">{{ total.title }}:</span>
<span v-if="cart.isLoading" class="loading loading-spinner loading-xs"></span>
<span v-else class="text-xs font-bold">{{ total.text }}</span>
</div>
</div>
</div>
</div>
<div class="fixed px-4 pb-10 pt-4 bottom-0 left-0 w-full bg-base-200 z-50 flex justify-between items-center gap-2 border-t-1 border-t-base-300">
<div>
<span class="text-xs text-base-content mr-2">Всего:</span>
<span v-if="cart.isLoading" class="loading loading-spinner loading-xs"></span>
<span v-else class="text-accent font-bold">{{ formatPrice(cart.total) }} ₽</span>
<div v-if="lastTotal">
<span class="text-xs text-base-content mr-2">{{ lastTotal.title }}:</span><br>
<span v-if="cart.isLoading" class="loading loading-spinner loading-xs"></span>
<span v-else class="text-accent font-bold">{{ lastTotal.text }}</span>
</div>
</div>
<button class="btn btn-primary" :disabled="cart.isLoading">Перейти к оформлению</button>
<button class="btn btn-primary" :disabled="cart.canCheckout === false">Перейти к оформлению</button>
</div>
</div>
@@ -66,7 +94,8 @@
v-else
class="text-center rounded-2xl"
>
<p class="text-lg">Ваша корзина пуста</p>
<p class="text-lg mb-3">Ваша корзина пуста</p>
<RouterLink class="btn btn-primary" to="/">Начать покупки.</RouterLink>
</div>
</div>
</template>
@@ -74,21 +103,25 @@
<script setup>
import { useCartStore } from '../stores/CartStore.js'
import Quantity from "@/components/Quantity.vue";
import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";
// import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";
import OptionRadio from "@/components/ProductOptions/Cart/OptionRadio.vue";
import OptionCheckbox from "@/components/ProductOptions/Cart/OptionCheckbox.vue";
import OptionText from "@/components/ProductOptions/Cart/OptionText.vue";
import {formatPrice} from "../helpers.js";
import {computed} from "vue";
const cart = useCartStore();
const componentMap = {
radio: OptionRadio,
select: OptionRadio,
checkbox: OptionCheckbox,
text: OptionText,
textarea: OptionText,
};
// const componentMap = {
// radio: OptionRadio,
// select: OptionRadio,
// checkbox: OptionCheckbox,
// text: OptionText,
// textarea: OptionText,
// };
const lastTotal = computed(() => {
return cart.totals.at(-1) ?? null;
});
function removeItem(cartId) {
cart.removeItem(cartId);

84
spa/src/views/CategoriesList.vue
View File

@@ -2,29 +2,81 @@
<div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8 mb-5">
<h2 class="text-3xl mb-5">Категории</h2>
<div class="grid grid-cols-2 gap-x-6 gap-y-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
<RouterLink
v-for="category in categories"
:key="category.id"
:to="`/category/${category.id}`"
class="group border border-gray-200 rounded-lg py-2 px-4 flex flex-col justify-center items-center"
>
<img :src="category.image" :alt="category.name" loading="lazy"/>
<h3 class="mt-4 text-lg">{{ category.name }}</h3>
</RouterLink>
<button v-if="parentId" class="py-2 px-4 flex items-center mb-3 cursor-pointer" @click="goBack">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
</svg>
<span class="ml-2">Назад к "{{ parentCategory.name }}"</span>
</button>
<button
v-if="parentId"
class="py-2 px-4 flex items-center mb-3 cursor-pointer"
@click.prevent="showProductsInParentCategory"
>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
</svg>
<span class="ml-2">Показать все товары</span>
</button>
<div v-for="category in categories" :key="category.id">
<CategoryItem
:category="category"
@onSelect="onSelect"
/>
</div>
</div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import ftch from "../utils/ftch.js";
import {computed, onMounted} from "vue";
import {router} from "@/router.js";
import {useCategoriesStore} from "@/stores/CategoriesStore.js";
import {useRoute} from "vue-router";
import CategoryItem from "@/components/CategoriesList/CategoryItem.vue";
const categories = ref([]);
const route = useRoute();
const parentId = computed(() => route.params.id ? Number(route.params.id) : null);
const parentCategory = computed(() => findCategoryById(parentId.value));
const categoriesStore = useCategoriesStore();
function findCategoryById(id) {
for (const category of categoriesStore.categories) {
if (category.id === id) {
return category;
}
}
return []
}
const categories = computed(() => {
if (! parentId.value) {
return categoriesStore.categories;
}
return findCategoryById(parentId.value).children;
});
function onSelect(category) {
if (category.children.length === 0) {
router.push({ name: "product.categories.show", params: { category_id: category.id } });
} else {
router.push({ name: "category.show", params: { id: category.id } });
}
}
function goBack() {
router.back();
}
function showProductsInParentCategory() {
router.push({ name: "product.categories.show", params: { category_id: parentId.value } });
}
onMounted(async () => {
const {data} = await ftch('categoriesList');
console.log(data);
categories.value = data;
categoriesStore.fetchCategories();
});
</script>

13
spa/src/views/Checkout.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div class="max-w-3xl mx-auto p-4 space-y-6 pb-30">
<h2 class="text-2xl">
Корзина
<span class="loading loading-spinner loading-md"></span>
</h2>
</div>
</template>
<script setup>
</script>

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

@@ -15,6 +15,8 @@
<div class="mt-4 lg:row-span-3 lg:mt-0">
<p class="text-3xl tracking-tight">{{ product.price }}</p>
<p v-if="false" class="text-xs">Кол-во на складе: {{ product.quantity }} шт.</p>
<p v-if="product.minimum && product.minimum > 1">Минимальное кол-ва для заказа: {{ product.minimum }}</p>
</div>
<div v-if="product.options && product.options.length" class="mt-4">
@@ -67,13 +69,13 @@
<script setup>
import {computed, onMounted, ref} from "vue";
import {$fetch} from "ofetch";
import {useRoute} from 'vue-router'
import ProductOptions from "../components/ProductOptions/ProductOptions.vue";
import {useCartStore} from "../stores/CartStore.js";
import ProductImageSwiper from "../components/ProductImageSwiper.vue";
import Quantity from "../components/Quantity.vue";
import {SUPPORTED_OPTION_TYPES} from "@/constants/options.js";
import {apiFetch} from "@/utils/ftch.js";
const route = useRoute();
const productId = computed(() => route.params.id);
@@ -117,7 +119,7 @@ function setQuantity(newQuantity) {
}
onMounted(async () => {
const {data} = await $fetch(`/index.php?route=extension/tgshop/handle&api_action=product_show&id=${productId.value}`);
const {data} = await apiFetch(`/index.php?route=extension/tgshop/handle&api_action=product_show&id=${productId.value}`);
product.value = data;
});
</script>