alsaze/paxton-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Wiki Activity

product-card

Browse Source
This commit is contained in:
Veselov 2025-09-05 17:33:46 +03:00
parent 3259495ffb
commit 02abf2781e
15 changed files with 144 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api/endpoints/getProductsList.ts Normal file
View File

@ -0,0 +1,4 @@
import api from '~/api/instance'
export const getProductsList = async () =>
await api.wc.v3ProductsList()

1
api/endpoints/index.ts
View File

@ -1,2 +1,3 @@
export * from './getProductsDetail'
export * from './getProductsList'
export * from './getProductsVariationsList'

1
api/queries/index.ts
View File

@ -1,2 +1,3 @@
export * from './useGetProductsDetail'
export * from './useGetProductsList'
export * from './useGetProductsVariationsList'

10
api/queries/useGetProductsList.ts Normal file
View File

@ -0,0 +1,10 @@
import { useQuery } from '@tanstack/vue-query'
import { getProductsList } from '~/api/endpoints/getProductsList'
export const useGetProductsList = () => {
return useQuery({
queryKey: ['get-products-list'],
queryFn: () => getProductsList(),
staleTime: Infinity,
})
}

0
components/ProductCard.vue Normal file
View File

1
components/ProductVariations.vue
View File

@ -31,6 +31,7 @@ const { currentVariantId } = useCurrentProduct()
&__variation {
img {
border-radius: 10px;
cursor: pointer;
}
}
}

1
composables/index.ts
View File

@ -1,2 +1,3 @@
export * from './useCurrentProduct'
export * from './useProduct'
export * from './useProductsList'

7
composables/useProduct.ts
View File

@ -1,8 +1,11 @@
import { useGetProductsDetail, useGetProductsVariationsList } from '~/api/queries'
export const useProduct = () => {
const { data: productsData } = useGetProductsDetail(79)
const { data: productsVariationsData } = useGetProductsVariationsList(79)
const route = useRoute()
const currentId = ref<number>(route.params.id)
const { data: productsData } = useGetProductsDetail(currentId)
const { data: productsVariationsData } = useGetProductsVariationsList(currentId)
function getAttribute(attributes: string[], name: string) {
return attributes?.find(attribute => attribute?.name === name)

17
composables/useProductsList.ts Normal file
View File

@ -0,0 +1,17 @@
import { useGetProductsList } from '~/api/queries'
export const useProductsList = () => {
const { data: productData } = useGetProductsList()
const productCardData = computed(() => productData?.value?.map(product => ({
id: product?.id,
name: product?.name,
price: product?.price,
variations: product?.variations,
images: product?.images?.splice(0, 5),
})) ?? [])
return {
productCardData,
}
}

13
layouts/default.vue
View File

@ -2,7 +2,10 @@
<div class="layout">
<header class="header">
<div class="header__container">
<h1 class="header__headline">
<h1
class="header__headline"
@click="router.push(`/`)"
>
PAXTON
</h1>
</div>
@ -20,6 +23,10 @@
</div>
</template>
<script setup lang="ts">
const router = useRouter()
</script>
<style lang="scss" scoped>
.layout {
display: flex;
@ -46,6 +53,7 @@
background: white;
&__container {
height: 100%;
display: flex;
flex-direction: row;
align-items: center;
@ -54,9 +62,12 @@
}
&__headline {
display: flex;
align-items: center;
height: 100%;
font-size: 32px;
color: black;
cursor: pointer;
}
}

1
package.json
View File

@ -19,6 +19,7 @@
"@nuxt/ui": "3.2.0",
"@nuxtjs/i18n": "^10.0.4",
"@tanstack/vue-query": "^5.75.5",
"@tanstack/vue-query-devtools": "^5.87.1",
"@vueuse/core": "^13.1.0",
"dayjs": "^1.11.13",
"decimal.js": "^10.5.0",

59
pages/index.vue
View File

@ -1,22 +1,61 @@
<template>
<div class="card">
<ProductImages />
<ProductDescription />
<div class="index">
<div
class="cards-list"
>
<pre>
{{ productCardData }}
</pre>
<div
v-for="product in productCardData"
:key="product.id"
class="card"
@click="router.push(`/product/${product.id}`)"
>
<img :src="product?.images[0]?.src" alt="product?.image">
<div class="card__description">
<div>{{ product?.name }}</div>
<div class="d-flex align-items-center">
{{ product?.price }}
<Icon name="ph:currency-rub" />
</div>
<div v-if="product?.variations?.length">
{{ `+${product?.variations?.length} Цвета` }}
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { useProductsList } from '~/composables'
const { productCardData } = useProductsList()
const router = useRouter()
</script>
<style lang="scss">
.card {
width: 100%;
display: flex;
flex-direction: row;
.cards-list {
padding: 40px;
@media (max-width: 768px) {
flex-direction: column;
align-items: center;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4px;
}
.card {
width: 400px;
display: flex;
flex-direction: column;
cursor: pointer;
&__description {
padding-inline: 10px;
}
}
</style>

22
pages/product/[id].vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<div class="product">
<ProductImages />
<ProductDescription />
</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss">
.product {
width: 100%;
display: flex;
flex-direction: row;
@media (max-width: 768px) {
flex-direction: column;
align-items: center;
}
}
</style>

10
plugins/vue-query.ts
View File

@ -2,7 +2,6 @@ import type {
DehydratedState,
VueQueryPluginOptions,
} from '@tanstack/vue-query'
// Nuxt 3 app aliases
import { defineNuxtPlugin, useState } from '#imports'
import {
dehydrate,
@ -11,10 +10,12 @@ import {
VueQueryPlugin,
} from '@tanstack/vue-query'
// импортируем Devtools
import { VueQueryDevtools } from '@tanstack/vue-query-devtools'
export default defineNuxtPlugin((nuxt) => {
const vueQueryState = useState<DehydratedState | null>('vue-query')
// Modify your Vue Query global settings here
const queryClient = new QueryClient({
defaultOptions: {
queries: {
@ -40,6 +41,11 @@ export default defineNuxtPlugin((nuxt) => {
if (import.meta.client) {
nuxt.hooks.hook('app:created', () => {
hydrate(queryClient, vueQueryState.value)
// Монтируем Devtools только на клиенте
nuxt.vueApp.use(VueQueryDevtools, {
initialIsOpen: false, // открыть/закрыть по умолчанию
})
})
}
})

12
yarn.lock
View File

@ -2354,6 +2354,11 @@
resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.83.0.tgz#ac3bf337007bb7ea97b1fd2e7c3ceb4240f36dbc"
integrity sha512-0M8dA+amXUkyz5cVUm/B+zSk3xkQAcuXuz5/Q/LveT4ots2rBpPTZOzd7yJa2Utsf8D2Upl5KyjhHRY+9lB/XA==
"@tanstack/query-devtools@5.86.0":
version "5.86.0"
resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.86.0.tgz#77c90d625f4c9f92c948ecab8f5cabb4e360ccc8"
integrity sha512-/JDw9BP80eambEK/EsDMGAcsL2VFT+8F5KCOwierjPU7QP8Wt1GT32yJpn3qOinBM8/zS3Jy36+F0GiyJp411A==
"@tanstack/table-core@8.21.3":
version "8.21.3"
resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.21.3.tgz#2977727d8fc8dfa079112d9f4d4c019110f1732c"
@ -2364,6 +2369,13 @@
resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz#1dff176df9cc8f93c78c5e46bcea11079b397578"
integrity sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==
"@tanstack/vue-query-devtools@^5.87.1":
version "5.87.1"
resolved "https://registry.yarnpkg.com/@tanstack/vue-query-devtools/-/vue-query-devtools-5.87.1.tgz#c21a56fe6fb9b625f355141b3bed7c0b1b5a2dc2"
integrity sha512-Amm1HQ8KT5yrPu84xyz7rS59jhqtEQxkTNbVxGYXSrPps/bXrEYcBNBjkIKiIE1fggNSo7kPM5YcDSyP2v3ewQ==
dependencies:
"@tanstack/query-devtools" "5.86.0"
"@tanstack/vue-query@^5.75.5":
version "5.83.0"
resolved "https://registry.yarnpkg.com/@tanstack/vue-query/-/vue-query-5.83.0.tgz#79e9329d9a8e7ee2b317df062c0abb8408102c41"