From 02abf2781e683dff53cc1674fcadc04a36150e0a Mon Sep 17 00:00:00 2001 From: Veselov Date: Fri, 5 Sep 2025 17:33:46 +0300 Subject: [PATCH] product-card --- api/endpoints/getProductsList.ts | 4 +++ api/endpoints/index.ts | 1 + api/queries/index.ts | 1 + api/queries/useGetProductsList.ts | 10 ++++++ components/ProductCard.vue | 0 components/ProductVariations.vue | 1 + composables/index.ts | 1 + composables/useProduct.ts | 7 ++-- composables/useProductsList.ts | 17 +++++++++ layouts/default.vue | 13 ++++++- package.json | 1 + pages/index.vue | 59 +++++++++++++++++++++++++------ pages/product/[id].vue | 22 ++++++++++++ plugins/vue-query.ts | 10 ++++-- yarn.lock | 12 +++++++ 15 files changed, 144 insertions(+), 15 deletions(-) create mode 100644 api/endpoints/getProductsList.ts create mode 100644 api/queries/useGetProductsList.ts create mode 100644 components/ProductCard.vue create mode 100644 composables/useProductsList.ts create mode 100644 pages/product/[id].vue diff --git a/api/endpoints/getProductsList.ts b/api/endpoints/getProductsList.ts new file mode 100644 index 0000000..c5d4369 --- /dev/null +++ b/api/endpoints/getProductsList.ts @@ -0,0 +1,4 @@ +import api from '~/api/instance' + +export const getProductsList = async () => + await api.wc.v3ProductsList() diff --git a/api/endpoints/index.ts b/api/endpoints/index.ts index 839b8a7..d511ff7 100644 --- a/api/endpoints/index.ts +++ b/api/endpoints/index.ts @@ -1,2 +1,3 @@ export * from './getProductsDetail' +export * from './getProductsList' export * from './getProductsVariationsList' diff --git a/api/queries/index.ts b/api/queries/index.ts index 4f39839..46d6f71 100644 --- a/api/queries/index.ts +++ b/api/queries/index.ts @@ -1,2 +1,3 @@ export * from './useGetProductsDetail' +export * from './useGetProductsList' export * from './useGetProductsVariationsList' diff --git a/api/queries/useGetProductsList.ts b/api/queries/useGetProductsList.ts new file mode 100644 index 0000000..eab13a7 --- /dev/null +++ b/api/queries/useGetProductsList.ts @@ -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, + }) +} diff --git a/components/ProductCard.vue b/components/ProductCard.vue new file mode 100644 index 0000000..e69de29 diff --git a/components/ProductVariations.vue b/components/ProductVariations.vue index 5fce625..0a907ab 100644 --- a/components/ProductVariations.vue +++ b/components/ProductVariations.vue @@ -31,6 +31,7 @@ const { currentVariantId } = useCurrentProduct() &__variation { img { border-radius: 10px; + cursor: pointer; } } } diff --git a/composables/index.ts b/composables/index.ts index de5288e..7a1c205 100644 --- a/composables/index.ts +++ b/composables/index.ts @@ -1,2 +1,3 @@ export * from './useCurrentProduct' export * from './useProduct' +export * from './useProductsList' diff --git a/composables/useProduct.ts b/composables/useProduct.ts index 875e28d..61ebf4c 100644 --- a/composables/useProduct.ts +++ b/composables/useProduct.ts @@ -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(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) diff --git a/composables/useProductsList.ts b/composables/useProductsList.ts new file mode 100644 index 0000000..98f959c --- /dev/null +++ b/composables/useProductsList.ts @@ -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, + } +} diff --git a/layouts/default.vue b/layouts/default.vue index cc39124..fb2861b 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -2,7 +2,10 @@
-

+

PAXTON

@@ -20,6 +23,10 @@
+ + diff --git a/pages/product/[id].vue b/pages/product/[id].vue new file mode 100644 index 0000000..d968845 --- /dev/null +++ b/pages/product/[id].vue @@ -0,0 +1,22 @@ + + + + + diff --git a/plugins/vue-query.ts b/plugins/vue-query.ts index 9733f2b..e952c27 100644 --- a/plugins/vue-query.ts +++ b/plugins/vue-query.ts @@ -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('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, // открыть/закрыть по умолчанию + }) }) } }) diff --git a/yarn.lock b/yarn.lock index 2185703..f7ebafa 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"