product-card

api/endpoints/getProductsList.ts

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

api/endpoints/index.ts

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

api/queries/index.ts

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

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,
+  })
+}

components/ProductVariations.vue

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

composables/index.ts

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

composables/useProduct.ts

@@ -1,8 +1,11 @@
 import { useGetProductsDetail, useGetProductsVariationsList } from '~/api/queries'
 
 export const useProduct = () => {
-  const { data: productsData } = useGetProductsDetail(79)
+  const route = useRoute()
-  const { data: productsVariationsData } = useGetProductsVariationsList(79)
+  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)

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,
+  }
+}

layouts/default.vue

@@ -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;
   }
 }
 

package.json

@@ -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",

pages/index.vue

@@ -1,22 +1,61 @@
 <template>
-  <div class="card">
+  <div class="index">
-    <ProductImages />
+    <div
-    <ProductDescription />
+      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 {
+.cards-list {
-  width: 100%;
+  padding: 40px;
-  display: flex;
-  flex-direction: row;
 
-  @media (max-width: 768px) {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 4px;
+}
+
+.card {
+  width: 400px;
+  display: flex;
   flex-direction: column;
-    align-items: center;
+  cursor: pointer;
+
+  &__description {
+    padding-inline: 10px;
   }
 }
 </style>

pages/product/[id].vue

@@ -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>

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<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, // открыть/закрыть по умолчанию
+      })
     })
   }
 })

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"