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

feat: new settings and mainpage blocks

Browse Source
This commit is contained in:
Nikita Kiselev
2025-11-11 00:30:39 +03:00
parent 5fb45000ac
commit 6176c720b1
97 changed files with 1842 additions and 1658 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/spa/src/App.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="drawer h-full">
<input id="app-drawer" type="checkbox" class="drawer-toggle" v-model="drawerOpen" />
<input id="app-drawer" type="checkbox" class="drawer-toggle" v-model="drawerOpen"/>
<div class="drawer-content">
<div class="app-container h-full">
@@ -9,18 +9,18 @@
<Navbar @drawer="toggleDrawer"/>
<section class="telecart-main-section">
<FullscreenViewport v-if="platform === 'ios' || platform === 'android'" />
<FullscreenViewport v-if="platform === 'ios' || platform === 'android'"/>
<AppDebugMessage v-if="settings.app_debug"/>
<RouterView v-slot="{ Component, route }">
<KeepAlive include="Home" :key="filtersStore.paramsHashForRouter">
<component :is="Component" :key="route.fullPath" />
<component :is="Component" :key="route.fullPath"/>
</KeepAlive>
</RouterView>
<CartButton v-if="settings.store_enabled" />
<Dock v-if="isAppDockShown" />
<CartButton v-if="settings.store_enabled"/>
<Dock v-if="isAppDockShown"/>
</section>
</div>
</div>
@@ -38,8 +38,7 @@
<script setup>
import {computed, onMounted, onUnmounted, ref, watch} from "vue";
import {useWebAppViewport} from 'vue-tg';
import {useMiniApp, FullscreenViewport} from 'vue-tg';
import {FullscreenViewport, useMiniApp, useWebAppViewport} from 'vue-tg';
import {useRoute, useRouter} from "vue-router";
import {useSettingsStore} from "@/stores/SettingsStore.js";
import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
@@ -64,10 +63,10 @@ const haptic = window.Telegram.WebApp.HapticFeedback;
const drawerOpen = ref(false);
const routesToHideAppDock = [
'product.show',
'checkout',
'order_created',
'filters',
'product.show',
'checkout',
'order_created',
'filters',
];
const isAppDockShown = computed(() => {
@@ -80,7 +79,7 @@ function navigateBack() {
}
function toggleDrawer() {
drawerOpen.value = !drawerOpen.value
drawerOpen.value = !drawerOpen.value;
}
watch(

28
frontend/spa/src/components/CategoriesInline.vue
View File

@@ -1,28 +0,0 @@
<template>
<div class="flex items-center justify-center p-5 gap-2 flex-wrap">
<RouterLink class="btn btn-md" 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 btn-md max-w-[12rem]"
:to="{name: 'product.categories.show', params: {category_id: category.id}}"
@click="onCategoryClick"
>
<span class="overflow-hidden text-ellipsis whitespace-nowrap">{{ category.name }}</span>
</RouterLink>
</div>
</template>
<script setup>
import {useCategoriesStore} from "@/stores/CategoriesStore.js";
const categoriesStore = useCategoriesStore();
function onCategoryClick() {
window.Telegram.WebApp.HapticFeedback.impactOccurred('soft');
}
</script>

16
frontend/spa/src/components/Dock.vue
View File

@@ -21,6 +21,18 @@
<span class="dock-label">Главная</span>
</RouterLink>
<RouterLink
:to="{name: 'categories'}"
:class="{'active': route.name === 'categories'}"
class="telecart-dock-item"
@click="onDockItemClick"
>
<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="dock-label">Каталог</span>
</RouterLink>
<RouterLink
:to="{name: 'search'}"
:class="{'active': route.name === 'search'}"
@@ -88,8 +100,8 @@ function onDockItemClick() {
flex-direction: column;
align-items: center;
border-radius: var(--radius-field);
padding: 5px 13px;
min-width: 90px;
padding: 5px;
min-width: 50px;
}
.telecart-dock-item.active {

46
frontend/spa/src/components/MainPage/Blocks/CategoriesTopBlock.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<section class="px-4">
<header>
<div v-if="block.title" class="font-bold uppercase text-center">{{ block.title }}</div>
<div v-if="block.description" class="text-sm text-center">{{ block.description }}</div>
</header>
<main>
<div class="flex items-center justify-center p-5 gap-2 flex-wrap">
<RouterLink class="btn btn-md" 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 block.data?.categories || []"
class="btn btn-md max-w-[12rem]"
:to="{name: 'product.categories.show', params: {category_id: category.id}}"
@click="onCategoryClick"
>
<span class="overflow-hidden text-ellipsis whitespace-nowrap">{{ category.name }}</span>
</RouterLink>
</div>
</main>
</section>
</template>
<script setup>
import {ref} from "vue";
const isLoading = ref(false);
const props = defineProps({
block: {
type: Object,
required: true,
}
});
function onCategoryClick() {
window.Telegram.WebApp.HapticFeedback.impactOccurred('soft');
}
</script>

8
frontend/spa/src/components/MainPage/Blocks/ErrorBlock.vue Normal file
View File

@@ -0,0 +1,8 @@
<template>
<div 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>Проблема при отображении блока.</span>
</div>
</template>

110
frontend/spa/src/components/MainPage/Blocks/ProductsFeedBlock.vue Normal file
View File

@@ -0,0 +1,110 @@
<template>
<section class="px-4">
<header>
<div v-if="block.title" class="font-bold uppercase text-center">{{ block.title }}</div>
<div v-if="block.description" class="text-sm text-center">{{ block.description }}</div>
</header>
<main>
<ProductsList
:products="products"
:hasMore="hasMore"
:isLoading="isLoading"
:isLoadingMore="isLoadingMore"
@loadMore="onLoadMore"
/>
</main>
</section>
</template>
<script setup>
import {onMounted, ref, toRaw} from "vue";
import ProductsList from "@/components/ProductsList.vue";
import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
import {useSettingsStore} from "@/stores/SettingsStore.js";
import ftch from "@/utils/ftch.js";
const filtersStore = useProductFiltersStore();
const yaMetrika = useYaMetrikaStore();
const settings = useSettingsStore();
const products = ref([]);
const hasMore = ref(false);
const isLoading = ref(false);
const isLoadingMore = ref(false);
const page = ref(1);
const perPage = 20;
const props = defineProps({
block: {
type: Object,
required: true,
}
});
async function fetchProducts() {
try {
isLoading.value = true;
console.debug('Home: Load products for Main Page.');
console.debug('Home: Fetch products from server using filters: ', toRaw(filtersStore.applied));
const response = await ftch('products', null, toRaw({
page: page.value,
maxPages: props.block.data.max_page_count,
perPage: perPage,
filters: filtersStore.applied,
}));
products.value = response.data;
hasMore.value = response.meta.hasMore;
console.debug('ProductsFeedBlock: Products for main page loaded.');
yaMetrika.dataLayerPush({
ecommerce: {
currencyCode: settings.currency_code,
impressions: products.value.map((product, index) => {
return {
id: product.id,
name: product.name,
price: product.final_price_numeric,
brand: product.manufacturer_name,
category: product.category_name,
list: 'Главная страница',
position: index,
discount: product.price_numeric - product.final_price_numeric,
quantity: product.product_quantity,
};
}),
},
});
} catch (error) {
console.error(error);
} finally {
isLoading.value = false;
}
}
async function onLoadMore() {
try {
console.debug('ProductsFeedBlock: onLoadMore');
if (isLoading.value === true || isLoadingMore.value === true || hasMore.value === false) return;
isLoadingMore.value = true;
page.value++;
console.debug('ProductsFeedBlock: Load more for page ', page.value, ' using filters: ', toRaw(filtersStore.applied));
const response = await ftch('products', null, toRaw({
page: page.value,
maxPages: props.block.data.max_page_count,
filters: filtersStore.applied,
}));
products.value.push(...response.data);
hasMore.value = response.meta.hasMore;
} catch (error) {
console.error(error);
} finally {
isLoadingMore.value = false;
}
}
onMounted(async () => {
console.debug("[Products Feed] Mounted");
await fetchProducts();
});
</script>

26
frontend/spa/src/components/MainPage/Blocks/SliderBlock.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<section class="px-4">
<header>
<div v-if="block.title" class="font-bold uppercase text-center">{{ block.title }}</div>
<div v-if="block.description" class="text-sm text-center mb-2">{{ block.description }}</div>
</header>
<main>
<Slider :config="block.data" :goalName="block.goal_name"/>
</main>
</section>
</template>
<script setup>
import Slider from "@/components/Slider.vue";
const props = defineProps({
block: {
type: Object,
required: true,
}
});
</script>
<style scoped lang="scss">
</style>

34
frontend/spa/src/components/MainPage/EmptyBlocks.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div class="flex flex-col items-center justify-center text-center py-16 px-4">
<div class="mb-6">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-16 text-base-content/40">
<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>
</div>
<h2 class="text-xl font-semibold mb-3">Главная страница пуста</h2>
<p class="text-sm text-base-content/70 mb-2 max-w-md">
На главной странице не сконфигурировано ни одного блока для отображения.
</p>
<p class="text-sm text-base-content/70 max-w-md">
Перейдите в настройки модуля <span class="font-semibold">TeleCart</span> и добавьте блоки на главную страницу.
</p>
<div class="mt-6 p-4 bg-base-200 rounded-lg max-w-md">
<div class="flex items-start gap-3">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 text-info shrink-0 mt-0.5">
<path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
</svg>
<p class="text-xs text-base-content/60 text-left">
Вы можете добавить слайдеры, категории, ленты товаров и другие блоки для создания красивой главной страницы.
</p>
</div>
</div>
</div>
</template>
<script setup>
</script>
<style scoped lang="scss">
</style>

41
frontend/spa/src/components/MainPage/MainPage.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<div v-if="blocks.blocks?.length > 0" v-for="(block, index) in blocks.blocks">
<template v-if="blockTypeToComponentMap[block.type]">
<component
v-if="block.is_enabled"
:is="blockTypeToComponentMap[block.type]"
:block="block"
/>
</template>
<div v-else-if="blockTypeToComponentMap[block.type] === undefined">
<div role="alert" class="alert alert-error mx-4">
<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>Unsupported Block Type: <span class="font-bold">{{ block.type }}</span></span>
</div>
</div>
</div>
<EmptyBlocks v-else/>
</template>
<script setup>
import SliderBlock from "@/components/MainPage/Blocks/SliderBlock.vue";
import CategoriesTopBlock from "@/components/MainPage/Blocks/CategoriesTopBlock.vue";
import {useBlocksStore} from "@/stores/BlocksStore.js";
import ErrorBlock from "@/components/MainPage/Blocks/ErrorBlock.vue";
import ProductsFeedBlock from "@/components/MainPage/Blocks/ProductsFeedBlock.vue";
import EmptyBlocks from "@/components/MainPage/EmptyBlocks.vue";
const blockTypeToComponentMap = {
slider: SliderBlock,
categories_top: CategoriesTopBlock,
products_feed: ProductsFeedBlock,
error: ErrorBlock,
};
const blocks = useBlocksStore();
</script>

103
frontend/spa/src/components/ProductsList.vue
View File

@@ -1,50 +1,66 @@
<template>
<div class="mx-auto max-w-2xl px-4 py-4 pb-14">
<h2 v-if="categoryName" class="text-lg font-bold mb-5 text-center">{{ categoryName }}</h2>
<div>
<div class="mx-auto max-w-2xl px-4 py-4 pb-14">
<h2 v-if="categoryName" class="text-lg font-bold mb-5 text-center">{{ categoryName }}</h2>
<template v-if="products.length > 0">
<div
class="products-grid grid grid-cols-2 gap-x-5 gap-y-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"
>
<RouterLink
v-for="(product, index) in products"
:key="product.id"
class="product-grid-card group"
:to="`/product/${product.id}`"
@click="productClick(product, index)"
<template v-if="products.length > 0">
<div
class="products-grid grid grid-cols-2 gap-x-5 gap-y-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"
>
<ProductImageSwiper :images="product.images"/>
<h3 class="product-title mt-4 text-sm">{{ product.name }}</h3>
<RouterLink
v-for="(product, index) in products"
:key="product.id"
class="product-grid-card group"
:to="`/product/${product.id}`"
@click="productClick(product, index)"
>
<ProductImageSwiper :images="product.images"/>
<h3 class="product-title mt-4 text-sm">{{ product.name }}</h3>
<div v-if="product.special" class="mt-1">
<p class="text-xs line-through mr-2">{{ product.price }}</p>
<p class="text-lg font-medium">{{ product.special }}</p>
</div>
<p v-else class="mt-1 text-lg font-medium">{{ product.price }}</p>
<div v-if="product.special" class="mt-1">
<p class="text-xs line-through mr-2">{{ product.price }}</p>
<p class="text-lg font-medium">{{ product.special }}</p>
</div>
<p v-else class="mt-1 text-lg font-medium">{{ product.price }}</p>
</RouterLink>
<div ref="bottom" style="height: 1px;"></div>
</RouterLink>
<div ref="bottom" style="height: 1px;"></div>
</div>
<div v-if="isLoadingMore" class="text-center mt-5">
<span class="loading loading-spinner loading-md"></span> Загрузка товаров...
</div>
<div v-else-if="hasMore === false" class="text-xs text-center mt-4 pt-4 mb-2 border-t">
{{ settings.texts.text_no_more_products }}
</div>
</template>
<div v-else-if="isLoading === true"
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>
<div class="h-4 bg-gray-200 rounded w-3/4"></div>
<div class="h-4 bg-gray-200 rounded w-1/2"></div>
</div>
</div>
<div v-if="isLoadingMore" class="text-center mt-5">
<span class="loading loading-spinner loading-md"></span> Загрузка товаров...
</div>
<div v-else-if="hasMore === false" class="text-xs text-center mt-4 pt-4 mb-2 border-t">
{{ settings.texts.no_more_products }}
</div>
</template>
<div v-else-if="isLoading === true"
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>
<div class="h-4 bg-gray-200 rounded w-3/4"></div>
<div class="h-4 bg-gray-200 rounded w-1/2"></div>
</div>
<NoProducts v-else/>
</div>
<NoProducts v-else/>
<div class="fixed z-50 w-full opacity-90" style="bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + 80px);">
<div class="flex justify-center">
<button
@click="showFilters"
class="btn shadow-xl relative"
:class="{'btn-accent' : filtersStore.isFiltersChanged}"
>
<IconFunnel/>
Фильтры
<span v-if="filtersStore.isFiltersChanged" class="status status-primary"></span>
</button>
</div>
</div>
</div>
</template>
@@ -55,9 +71,15 @@ import {useSettingsStore} from "@/stores/SettingsStore.js";
import {ref} from "vue";
import {useIntersectionObserver} from '@vueuse/core';
import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
import IconFunnel from "@/components/Icons/IconFunnel.vue";
import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
import {useRouter} from "vue-router";
const router = useRouter();
const haptic = window.Telegram.WebApp.HapticFeedback;
const yaMetrika = useYaMetrikaStore();
const settings = useSettingsStore();
const filtersStore = useProductFiltersStore();
const bottom = ref(null);
const emits = defineEmits(['loadMore']);
@@ -128,6 +150,11 @@ useIntersectionObserver(
rootMargin: '400px 0',
}
);
function showFilters() {
haptic.impactOccurred('soft');
router.push({name: 'filters'});
}
</script>
<style scoped>

68
frontend/spa/src/components/MainpageSlider.vue → frontend/spa/src/components/Slider.vue
View File

@@ -1,25 +1,21 @@
<template>
<div
v-if="sliders.mainpage_slider.is_enabled && sliders.mainpage_slider.slides.length > 0"
class="app-banner"
:class="classList"
>
<div v-if="config.slides.length > 0" class="app-banner" :class="classList">
<Swiper
:effect="slideEffect"
class="select-none"
:slides-per-view="1"
:space-between="sliders.mainpage_slider.space_between"
:space-between="config.space_between"
:pagination="pagination"
:lazy="true"
:modules="modules"
:scrollbar="scrollbar"
:free-mode="sliders.mainpage_slider.free_mode"
:loop="sliders.mainpage_slider.loop"
:free-mode="config.free_mode"
:loop="config.loop"
:autoplay="autoplay"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<SwiperSlide v-for="slide in sliders.mainpage_slider.slides" :key="slide.id">
<SwiperSlide v-for="slide in config.slides" :key="slide.id">
<RouterLink
v-if="slide?.link?.type === 'category'"
:to="{name: 'product.categories.show', params: {category_id: slide.link.value.category_id}}"
@@ -48,6 +44,16 @@
</SwiperSlide>
</Swiper>
</div>
<div v-else>
<div 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>У слайдера не загружены изображения.</span>
</div>
</div>
</template>
<script setup>
@@ -56,11 +62,21 @@ import 'swiper/css';
import 'swiper/css/navigation';
import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
import {EffectCoverflow, EffectCards, EffectCube, EffectFlip, Scrollbar, Autoplay} from 'swiper/modules';
import {Autoplay, EffectCards, EffectCoverflow, EffectCube, EffectFlip, Scrollbar} from 'swiper/modules';
import {computed, onMounted} from "vue";
import {useSlidersStore} from "@/stores/SlidersStore.js";
const sliders = useSlidersStore();
const props = defineProps({
config: {
type: Object,
required: true,
},
goalName: {
type: String,
default: null,
}
});
const yaMetrika = useYaMetrikaStore();
const modules = [
Autoplay,
@@ -72,15 +88,15 @@ const modules = [
];
const classList = computed(() => {
if (sliders.mainpage_slider.effect === 'cards') {
if (props.config.effect === 'cards') {
return ['px-8'];
}
if (sliders.mainpage_slider.effect === 'flip') {
if (props.config.effect === 'flip') {
return ['px-4', 'pb-4', 'pt-4'];
}
if (sliders.mainpage_slider.effect === 'cube') {
if (props.config.effect === 'cube') {
return ['px-4', 'pb-10'];
}
@@ -91,19 +107,19 @@ const onSwiper = (swiper) => {
console.log(swiper);
};
const onSlideChange = () => {
console.log('slide change');
};
const slideEffect = computed(() => {
if (sliders.mainpage_slider.effect === 'slide') {
if (props.config.effect === 'slide') {
return null;
}
return sliders.mainpage_slider.effect;
return props.config.effect;
});
const pagination = computed(() => {
if (sliders.mainpage_slider.pagination) {
if (props.config.pagination) {
return {
clickable: true, dynamicBullets: false,
};
@@ -112,7 +128,7 @@ const pagination = computed(() => {
});
const scrollbar = computed(() => {
if (sliders.mainpage_slider.scrollbar) {
if (props.config.scrollbar) {
return {
hide: true,
};
@@ -121,7 +137,7 @@ const scrollbar = computed(() => {
});
const autoplay = computed(() => {
if (sliders.mainpage_slider.autoplay) {
if (props.config.autoplay) {
return {
delay: 3000,
reverseDirection: false,
@@ -132,9 +148,11 @@ const autoplay = computed(() => {
});
function sliderClick(slide) {
yaMetrika.reachGoal(YA_METRIKA_GOAL.SLIDER_HOME_CLICK, {
banner: slide.title,
});
if (props.goalName) {
yaMetrika.reachGoal(props.goalName, {
banner: slide.title,
});
}
}
function openExternalLink(link, slide) {
@@ -150,7 +168,7 @@ function openExternalLink(link, slide) {
}
onMounted(() => {
console.debug('[Mainpage Slider] Status: ', sliders.mainpage_slider);
console.debug('[Mainpage Slider] Init with config: ', props.config);
});
</script>

20
frontend/spa/src/main.js
View File

@@ -16,7 +16,7 @@ import 'swiper/element/bundle';
import 'swiper/css/bundle';
import AppLoading from "@/AppLoading.vue";
import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
import {useSlidersStore} from "@/stores/SlidersStore.js";
import {useBlocksStore} from "@/stores/BlocksStore.js";
register();
const pinia = createPinia();
@@ -27,23 +27,24 @@ app
.use(VueTelegramPlugin);
const settings = useSettingsStore();
useSlidersStore().fetchMainpageSlider();
const blocks = useBlocksStore();
const appLoading = createApp(AppLoading);
appLoading.mount('#app');
settings.load()
.then(() => window.Telegram.WebApp.lockOrientation())
.then(async () => {
console.debug('Load default filters for the main page');
const filtersStore = useProductFiltersStore();
filtersStore.applied = await filtersStore.fetchFiltersForMainPage();
})
.then(() => {
if (settings.app_enabled === false) {
throw new Error('App disabled (maintenance mode)');
}
})
.then(() => blocks.processBlocks(settings.mainpage_blocks))
.then(async () => {
console.debug('Load default filters for the main page');
const filtersStore = useProductFiltersStore();
filtersStore.applied = await filtersStore.fetchFiltersForMainPage();
})
.then(() => {
console.debug('[Init] Set theme attributes');
document.documentElement.setAttribute('data-theme', settings.theme[window.Telegram.WebApp.colorScheme]);
@@ -57,11 +58,6 @@ settings.load()
document.documentElement.style.setProperty(key, settings.theme.variables[key]);
}
})
.then(() => {
console.debug('[Init] Load front page categories and products.');
const categoriesStore = useCategoriesStore();
categoriesStore.fetchTopCategories();
})
.then(() => new AppMetaInitializer(settings).init())
.then(() => { appLoading.unmount(); app.mount('#app'); })
.then(() => window.Telegram.WebApp.ready())

32
frontend/spa/src/stores/BlocksStore.js Normal file
View File

@@ -0,0 +1,32 @@
import {defineStore} from "pinia";
import {processBlock} from "@/utils/ftch.js";
export const useBlocksStore = defineStore('blocks', {
state: () => ({
blocks: [],
}),
actions: {
async processBlocks(rawBlocks) {
const results = await Promise.allSettled(
rawBlocks.map(block => {
console.debug('[Blocks Store]: Process block ', block);
return processBlock(block)
.then(response => response);
})
);
this.blocks = results
.map(r => {
if (r.status === 'fulfilled') {
return r.value.data;
} else {
return {
is_enabled: true,
type: 'error',
};
}
});
}
},
});

14
frontend/spa/src/stores/CategoriesStore.js
View File

@@ -25,20 +25,6 @@ export const useCategoriesStore = defineStore('categories', {
}
},
async fetchTopCategories() {
try {
this.isLoading = true;
const response = await ftch('categoriesList', {
forMainPage: true,
});
this.topCategories = response.data;
} catch (error) {
console.error(error);
} finally {
this.isLoading = false;
}
},
async findCategoryById(id, list = []) {
if (! id) return null;

8
frontend/spa/src/stores/SettingsStore.js
View File

@@ -24,10 +24,11 @@ export const useSettingsStore = defineStore('settings', {
}
},
texts: {
no_more_products: 'Нет товаров',
empty_cart: 'Корзина пуста',
order_created_success: 'Заказ успешно оформлен.',
text_no_more_products: 'Нет товаров',
text_empty_cart: 'Корзина пуста',
text_order_created_success: 'Заказ успешно оформлен.',
},
mainpage_blocks: [],
}),
actions: {
@@ -51,6 +52,7 @@ export const useSettingsStore = defineStore('settings', {
this.feature_vouchers = settings.feature_vouchers;
this.currency_code = settings.currency_code;
this.texts = settings.texts;
this.mainpage_blocks = settings.mainpage_blocks;
}
}
});

26
frontend/spa/src/stores/SlidersStore.js
View File

@@ -1,26 +0,0 @@
import {defineStore} from "pinia";
import {fetchBanner} from "@/utils/ftch.js";
export const useSlidersStore = defineStore('sliders', {
state: () => ({
mainpage_slider: {
is_enabled: false,
space_between: 30,
autoplay: false,
effect: 'cube', // null, flip, cards, cube
pagination: false,
scrollbar: false,
free_mode: false,
loop: false,
slides: [],
},
}),
actions: {
async fetchMainpageSlider() {
console.debug('[Sliders Store] Fetch mainpage slider from server.');
const response = await fetchBanner();
this.mainpage_slider = Object.assign({}, this.mainpage_slider, response.data);
}
},
});

9
frontend/spa/src/style.css
View File

@@ -4,8 +4,6 @@
}
html, body, #app {
width: 100%;
height: 100%;
overflow-x: hidden;
}
@@ -58,7 +56,12 @@ html {
}
.telecart-main-section {
padding-top: calc(var(--tg-content-safe-area-inset-top, 0rem) + var(--tg-safe-area-inset-top, 0rem) + var(--tc-navbar-min-height));
padding-top: calc(
var(--tg-content-safe-area-inset-top, 0rem)
+ var(--tg-safe-area-inset-top, 0rem)
+ var(--tc-navbar-min-height)
+ 1rem
);
}
.swiper-pagination-bullets {

8
frontend/spa/src/utils/ftch.js
View File

@@ -16,7 +16,7 @@ export const apiFetch = ofetch.create({
options.headers = {
...options.headers,
'X-Telegram-InitData': encoded,
}
};
}
},
});
@@ -24,7 +24,7 @@ export const apiFetch = ofetch.create({
async function ftch(action, query = null, json = null) {
const options = {
method: json ? 'POST' : 'GET',
}
};
if (query) options.query = query;
if (json) options.body = json;
@@ -92,8 +92,8 @@ export async function setVoucher(voucher) {
});
}
export async function fetchBanner() {
return await ftch('banner');
export async function processBlock(block) {
return await ftch('processBlock', null, block);
}
export default ftch;

2
frontend/spa/src/views/Cart.vue
View File

@@ -125,7 +125,7 @@
class="text-center rounded-2xl"
>
<div class="text-5xl mb-4">🛒</div>
<p class="text-lg mb-3">{{ settings.texts.empty_cart }}</p>
<p class="text-lg mb-3">{{ settings.texts.text_empty_cart }}</p>
<RouterLink class="btn btn-primary" to="/">Начать покупки</RouterLink>
</div>
</div>

2
frontend/spa/src/views/CategoriesList.vue
View File

@@ -1,5 +1,5 @@
<template>
<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">
<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 pb-20">
<h2 class="text-3xl mb-5">Категории</h2>
<div v-if="categoriesStore.isLoading" class="flex flex-col gap-4">

4
frontend/spa/src/views/Filters.vue
View File

@@ -79,7 +79,7 @@ const applyFilters = async () => {
yaMetrika.reachGoal(YA_METRIKA_GOAL.FILTERS_APPLY);
await nextTick();
router.back();
}
};
const resetFilters = async () => {
filtersStore.applied = filtersStore.default;
@@ -89,7 +89,7 @@ const resetFilters = async () => {
await nextTick();
window.scrollTo(0, 0);
router.back();
}
};
onMounted(async () => {
console.debug('Filters: OnMounted');

112
frontend/spa/src/views/Home.vue
View File

@@ -1,47 +1,18 @@
<template>
<div ref="goodsRef" class="pb-20">
<CategoriesInline/>
<div class="overflow-hidden">
<MainpageSlider/>
</div>
<div class="px-5 fixed z-50 w-full opacity-90" style="bottom: calc(var(--tg-safe-area-inset-bottom, 0px) + 80px);">
<div class="flex justify-center">
<button
@click="showFilters"
class="btn shadow-xl relative"
:class="{'btn-accent' : filtersStore.isFiltersChanged}"
>
<IconFunnel/>
Фильтры
<span v-if="filtersStore.isFiltersChanged" class="status status-primary"></span>
</button>
</div>
</div>
<ProductsList
:products="products"
:hasMore="hasMore"
:isLoading="isLoading"
:isLoadingMore="isLoadingMore"
@loadMore="onLoadMore"
/>
<MainPage/>
</div>
</template>
<script setup>
import ProductsList from "@/components/ProductsList.vue";
import CategoriesInline from "../components/CategoriesInline.vue";
import {onActivated, onMounted, ref, toRaw} from "vue";
import IconFunnel from "@/components/Icons/IconFunnel.vue";
import {onActivated, onMounted} from "vue";
import {useRouter} from "vue-router";
import ftch from "@/utils/ftch.js";
import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
import MainpageSlider from "@/components/MainpageSlider.vue";
import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
import {useSettingsStore} from "@/stores/SettingsStore.js";
import MainPage from "@/components/MainPage/MainPage.vue";
import {useBlocksStore} from "@/stores/BlocksStore.js";
defineOptions({
name: 'Home'
@@ -52,79 +23,10 @@ const filtersStore = useProductFiltersStore();
const yaMetrika = useYaMetrikaStore();
const haptic = window.Telegram.WebApp.HapticFeedback;
const settings = useSettingsStore();
const products = ref([]);
const hasMore = ref(false);
const isLoading = ref(false);
const isLoadingMore = ref(false);
const page = ref(1);
const perPage = 20;
function showFilters() {
haptic.impactOccurred('soft');
router.push({name: 'filters'});
}
async function fetchProducts() {
try {
isLoading.value = true;
console.debug('Home: Load products for Main Page.');
console.debug('Home: Fetch products from server using filters: ', toRaw(filtersStore.applied));
const response = await ftch('products', null, toRaw({
page: page.value,
perPage: perPage,
filters: filtersStore.applied,
}));
products.value = response.data;
hasMore.value = response.meta.hasMore;
console.debug('Home: Products for main page loaded.');
yaMetrika.dataLayerPush({
ecommerce: {
currencyCode: settings.currency_code,
impressions: products.value.map((product, index) => {
return {
id: product.id,
name: product.name,
price: product.final_price_numeric,
brand: product.manufacturer_name,
category: product.category_name,
list: 'Главная страница',
position: index,
discount: product.price_numeric - product.final_price_numeric,
quantity: product.product_quantity,
};
}),
},
});
} catch (error) {
console.error(error);
} finally {
isLoading.value = false;
}
}
async function onLoadMore() {
try {
console.debug('Home: onLoadMore');
if (isLoading.value === true || isLoadingMore.value === true || hasMore.value === false) return;
isLoadingMore.value = true;
page.value++;
console.debug('Home: Load more for page ', page.value, ' using filters: ', toRaw(filtersStore.applied));
const response = await ftch('products', null, toRaw({
page: page.value,
filters: filtersStore.applied,
}));
products.value.push(...response.data);
hasMore.value = response.meta.hasMore;
} catch (error) {
console.error(error);
} finally {
isLoadingMore.value = false;
}
}
const blocks = useBlocksStore();
onActivated(() => {
console.debug("[Home] Home Activated");
yaMetrika.pushHit('/', {
title: 'Главная страница',
});
@@ -134,8 +36,6 @@ onActivated(() => {
onMounted(async () => {
window.document.title = 'Главная страница';
console.debug("[Home] Home Mounted");
console.debug("[Home] Scroll top");
await fetchProducts();
window.scrollTo(0, 0);
});
</script>

2
frontend/spa/src/views/OrderCreated.vue
View File

@@ -8,7 +8,7 @@
</div>
<p class="text-2xl font-bold mb-3">Спасибо за заказ!</p>
<p class="text-center mb-4">{{ settings.texts.order_created_success }}</p>
<p class="text-center mb-4">{{ settings.texts.text_order_created_success }}</p>
<ul v-if="checkout.order" class="list w-full bg-base-200 mb-4">
<li class="list-row flex justify-between">