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

feat: add product view page

Browse Source
This commit is contained in:
Nikita Kiselev
2025-07-12 11:30:26 +03:00
parent 252854e67e
commit f13e128d03
11 changed files with 309 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
spa/src/components/ProductList.vue
View File

@@ -1,47 +0,0 @@
<template>
<div class="bg-base-100">
<div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
<h2 class="sr-only">Products</h2>
<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">
<a v-for="product in products" :key="product.id" class="group">
<div class="carousel carousel-center rounded-box" ref="carouselRef" @scroll.passive="onScroll">
<div v-for="(image, i) in product.images" :key="i" class="carousel-item">
<img :src="image.url" :alt="image.alt"/>
</div>
</div>
<h3 class="mt-4 text-sm">{{ product.name }}</h3>
<p class="mt-1 text-lg font-medium">{{ product.price }}</p>
</a>
</div>
</div>
</div>
</template>
<script setup>
import {$fetch} from 'ofetch';
import {onMounted, ref} from "vue";
import { useHapticFeedback } from 'vue-tg';
const hapticFeedback = useHapticFeedback();
const products = ref([]);
onMounted(async () => {
const {data} = await $fetch('/index.php?route=extension/tgshop/handle&api_action=products');
products.value = data;
});
const carouselRef = ref();
let lastScrollLeft = 0;
function onScroll(e) {
const scrollLeft = e.target.scrollLeft;
const delta = Math.abs(scrollLeft - lastScrollLeft);
if (delta > 30) {
hapticFeedback.impactOccurred('soft');
lastScrollLeft = scrollLeft;
}
}
</script>