product-card

api/endpoints/getProductAttributesDetail.ts

@@ -0,0 +1,4 @@
+import api from '~/api/instance'
+
+export const getProductAttributesDetail = async (productId: number) =>
+  await api.wc.v3ProductsAttributesDetail(productId)

api/endpoints/getProductsList.ts

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

api/endpoints/getProductsVariationsList.ts

@@ -1,4 +1,4 @@
 import api from '~/api/instance'
 
 export const getProductsVariationsList = async (productId: number) =>
-  await api.wc.v3ProductsVariationsList(productId)
+  await api.wc.v3ProductsVariationsList(productId, { per_page: 99 })

api/endpoints/index.ts

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

api/endpoints/orders/index.ts

@@ -0,0 +1 @@
+export * from './postOrdersCreate'

api/endpoints/orders/postOrdersCreate.ts

@@ -0,0 +1,4 @@
+import api from '~/api/instance'
+
+export const postOrdersCreate = async (parent_id: number | undefined) =>
+  await api.wc.v3OrdersCreate({ parent_id })

api/mutations/index.ts

@@ -0,0 +1 @@
+export * from './usePostOrdersCreate'

api/mutations/usePostOrdersCreate.ts

@@ -0,0 +1,19 @@
+import type { MaybeRef } from 'vue'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
+import { unref } from 'vue'
+import { postOrdersCreate } from '~/api/endpoints/orders'
+
+export const usePostOrdersCreate = () => {
+  const queryClient = useQueryClient()
+
+  return useMutation({
+    mutationFn: (params: { parent_id: MaybeRef<number | undefined> }) =>
+      postOrdersCreate(unref(params.parent_id)),
+
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ['post-orders-create', unref(variables.parent_id)],
+      })
+    },
+  })
+}

api/queries/index.ts

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

api/queries/useGetProductAttributesDetail.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/vue-query'
+import { unref } from 'vue'
+import { getProductAttributesDetail } from '~/api/endpoints'
+
+export const useGetProductAttributesDetail = (productId: MaybeRef<number>) => {
+  return useQuery({
+    queryKey: ['get-products-detail', productId],
+    queryFn: () => getProductAttributesDetail(unref(productId)),
+  })
+}

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

app.vue

@@ -5,3 +5,7 @@
     </NuxtLayout>
   </UApp>
 </template>
+
+<style lang="scss">
+@use '@/assets/scss/main' as *;
+</style>

assets/scss/main.scss

@@ -24,7 +24,32 @@ h3 {
   @include h3('h3');
 }
 
-// Buttons
-button {
-  cursor: pointer;
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(128, 128, 128, 0.5);
+  border-radius: 4px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(128, 128, 128, 0.7);
+  background-clip: padding-box;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(128, 128, 128, 0.5) transparent;
+}
+
+body {
+  -ms-overflow-style: -ms-autohiding-scrollbar;
 }

assets/scss/utils.scss

@@ -142,3 +142,7 @@ $indents: 0 2 4 5 6 8 10 12 15 16 18 20 24 25 28 30 32 36 40 48 50 52 60 64;
 .text-align-center  { text-align: center !important; }
 .text-align-left  { text-align: left !important; }
 .text-align-right  { text-align: right !important; }
+
+.cursor-pointer { cursor: pointer !important; }
+.cursor-not-allowed { cursor: not-allowed !important; }
+.cursor-progress { cursor: progress !important; }

components/ProductDescription.vue

@@ -2,19 +2,9 @@
   <div class="product-description">
     <h1>{{ productsData?.name }}</h1>
 
-    <h2>{{ currentVariant?.price }}  <Icon name="ph:currency-rub" /></h2>
+    <h2>{{ currentVariant?.options[0]?.price }}  <Icon name="ph:currency-rub" /></h2>
 
-    <div class="product-description__variations">
-      <div
-        v-for="variation in productsVariationsData"
-        :key="variation?.id"
-        @click="() => currentVariantId = variation?.id"
-      >
-        <div class="product-description__variation">
-          <img width="80" :src="variation?.image?.src" :alt="variation?.image?.src">
-        </div>
-      </div>
-    </div>
+    <ProductVariations v-if="colors?.length > 1" />
 
     <div>
       {{ `Цвет: ${t(`colors.${currentColor}`)}` }}
@@ -30,37 +20,49 @@
 
     <div class="product-description__sizes">
       <div
-        v-for="size in sizes"
-        :key="size"
+        v-for="option in currentVariant?.options"
+        :key="option"
         class="product-description__size"
-        @click="() => currentSize = size"
+        @click="() => currentSize = option"
       >
-        <UButton block :label="size" :variant="currentSize === size ? undefined : 'outline'" />
+        <UButton
+          block
+          :label="getAttribute(option?.attributes, 'size')?.option"
+          :disabled="option?.stock_status === 'outofstock'"
+          :variant="currentSize === option ? undefined : 'outline'"
+        />
       </div>
     </div>
 
-    <UButton class="justify-content-center" label="Добавить в корзину" size="xl" />
+    <UButton
+      :disabled="!currentSize"
+      class="justify-content-center"
+      label="Добавить в корзину"
+      size="xl"
+      @click="addToCartBtn"
+    />
 
     <UAccordion :items="items" />
   </div>
 </template>
 
 <script setup lang="ts">
-import type { AccordionItem } from '@nuxt/ui'
+import ProductVariations from '~/components/ProductVariations.vue'
 import { useCurrentProduct, useProduct } from '~/composables'
 
 const { t } = useI18n()
+const { addToCart } = useCart()
 
-const { productsData, productsVariationsData, sizes } = useProduct()
-const { currentVariant, currentVariantId, currentColor, currentMaterial } = useCurrentProduct()
+const { productsData, colors, getAttribute } = useProduct()
+const { currentVariant, currentColor, currentMaterial } = useCurrentProduct()
 
-const currentSize = ref(0)
+const currentSize = ref(undefined)
 
-const items = ref<AccordionItem[]>([
+const items = computed(() => [
   {
     label: 'Описание товара',
     icon: 'i-heroicons-document-text',
-    content: productsData?.value?.description,
+    content: productsData?.value?.description?.replace(/<\/?p>/g, ''),
   },
   {
     label: 'Состав и параметры',
@@ -83,28 +85,31 @@ const items = ref<AccordionItem[]>([
     content: 'Возврат в течение 14 дней\nОбмен размера в течение 7 дней',
   },
 ])
+
+function addToCartBtn() {
+  addToCart(currentSize?.value?.id)
+}
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .product-description {
-  padding-top: 50px;
+  width: 100%;
+  max-width: 335px;
 
+  @media (min-width: 768px) {
+    position: sticky;
+    align-self: self-start;
+    top: 40px;
+    overflow-y: auto;
+    max-height: calc(100vh - 80px);
+  }
+
+  padding-top: 30px;
+  padding-inline: 30px;
   display: flex;
   flex-direction: column;
   gap: 10px;
 
-  width: 400px;
-  padding-inline: 30px;
-
-  &__variations {
-    padding: 10px;
-    border-radius: 10px;
-    background: white;
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-  }
-
   &__sizes {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
@@ -115,12 +120,6 @@ const items = ref<AccordionItem[]>([
     width: 65px;
   }
 
-  &__variation {
-    img {
-      border-radius: 10px;
-    }
-  }
-
   h2 {
     display: flex;
     flex-direction: row;

components/ProductVariations.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="product-variations">
+    <div
+      v-for="variation in variations"
+      :key="variation?.option?.id"
+      @click="() => currentVariant = variation"
+    >
+      <div class="product-variations__variation">
+        <img width="80" :src="variation?.image[0]?.src" :alt="variation?.image[0]?.src">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCurrentProduct, useProduct } from '~/composables'
+
+const { variations } = useProduct()
+const { currentVariant } = useCurrentProduct()
+</script>
+
+<style lang="scss">
+.product-variations {
+  padding: 10px;
+  border-radius: 10px;
+  background: white;
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+
+  &__variation {
+    img {
+      border-radius: 10px;
+      cursor: pointer;
+    }
+  }
+}
+</style>

composables/index.ts

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

composables/useCart.ts

@@ -0,0 +1,19 @@
+export const useCart = () => {
+  const addToCart = (item: any) => {
+    if (process.client) {
+      localStorage.setItem('cart', JSON.stringify(item))
+    }
+  }
+
+  const getCart = () => {
+    if (process.client) {
+      return localStorage.getItem('cart')
+    }
+    return null
+  }
+
+  return {
+    addToCart,
+    getCart,
+  }
+}

composables/useCurrentProduct.ts

@@ -1,31 +1,28 @@
+import { useProduct } from '#build/imports'
 import { createSharedComposable } from '@vueuse/core'
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 
 export const useCurrentProduct = createSharedComposable(() => {
-  const { defaultVariant, productsData, productsVariationsData, getAttribute } = useProduct()
+  const { variations, productsData } = useProduct()
 
-  const currentVariantId = ref(defaultVariant?.value?.id)
+  const currentVariant = ref(variations?.value[0])
 
-  const currentVariant = computed(() =>
-    productsVariationsData?.value?.find(variation => variation?.id === currentVariantId?.value))
-
-  const currentColor = computed(() => getAttribute(currentVariant?.value?.attributes, 'color')?.option)
-  const currentMaterial = computed(() => getAttribute(currentVariant?.value?.attributes, 'material')?.option)
+  const currentColor = computed(() => currentVariant?.value?.identifier?.split('_')[0])
+  const currentMaterial = computed(() => currentVariant?.value?.identifier?.split('_')[1])
 
   const currentVariantImages = computed(() =>
-    productsData?.value?.images?.filter(img => img?.src?.includes(`${currentColor.value}_${currentMaterial.value}_`)))
+    productsData?.value?.images?.filter(img => img?.src?.includes(`${currentVariant?.value?.identifier}_`)))
 
-  watch(() => defaultVariant.value, (newValue) => {
+  watch(() => variations.value, (newValue) => {
     if (newValue) {
-      currentVariantId.value = newValue.id
+      currentVariant.value = newValue[0]
     }
   })
 
   return {
-    currentVariantId,
-    currentVariant,
     currentColor,
     currentMaterial,
+    currentVariant,
     currentVariantImages,
   }
 })

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<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)
@@ -21,6 +24,29 @@ export const useProduct = () => {
   const materials = computed(() => getAttribute(productsData?.value?.attributes, 'material')?.options)
   const sizes = computed(() => getAttribute(productsData?.value?.attributes, 'size')?.options)
 
+  function getIdentifier(productVariant) {
+    const color = getAttribute(productVariant?.attributes, 'color')?.option
+    const material = getAttribute(productVariant?.attributes, 'material')?.option
+
+    return `${color}_${material}`
+  }
+
+  const variations = computed(() =>
+    colors?.value?.map((color) => {
+      if (!productsVariationsData?.value) {
+        return []
+      }
+
+      const productAsColor = productsVariationsData?.value?.filter(variant => getAttribute(variant?.attributes, 'color')?.option === color)
+      const identifier = getIdentifier(productAsColor[0])
+
+      return {
+        identifier,
+        image: productsData?.value?.images?.filter(img => img?.src?.includes(`${identifier}_`)),
+        options: productAsColor,
+      }
+    }) ?? [])
+
   return {
     productsData,
     productsVariationsData,
@@ -34,6 +60,9 @@ export const useProduct = () => {
     materials,
     sizes,
 
+    variations,
+
     getAttribute,
+    getIdentifier,
   }
 }

composables/useProductsList.ts

@@ -0,0 +1,19 @@
+import { useGetProductsList } from '~/api/queries'
+
+export const useProductsList = () => {
+  const { getAttribute } = useProduct()
+  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?.slice(0, 5),
+    colors: getAttribute(product?.attributes, 'color')?.options,
+  })) ?? [])
+
+  return {
+    productCardData,
+  }
+}

i18n/locales/ru.json

@@ -2,7 +2,8 @@
   "colors": {
     "black": "черный",
     "beige": "бежевый",
-    "grey": "серый"
+    "grey": "серый",
+    "grey-black": "серо-черный"
   },
   "materials": {
     "cotton": "хлопок",

layouts/default.vue

@@ -2,9 +2,20 @@
   <div class="layout">
     <header class="header">
       <div class="header__container">
-        <h1 class="header__headline">
+        <Icon name="lucide:menu" class="cursor-pointer ml20 w-6 h-6 text-gray-700" />
+
+        <h1
+          class="header__headline"
+          @click="router.push(`/`)"
+        >
           PAXTON
         </h1>
+
+        <Icon
+          name="lucide:shopping-cart"
+          class="cursor-pointer mr20 w-6 h-6 text-gray-700"
+          @click="router.push(`/cart`)"
+        />
       </div>
     </header>
 
@@ -20,6 +31,10 @@
   </div>
 </template>
 
+<script setup lang="ts">
+const router = useRouter()
+</script>
+
 <style lang="scss" scoped>
 .layout {
   display: flex;
@@ -46,17 +61,21 @@
   background: white;
 
   &__container {
+    height: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     text-align: center;
   }
 
   &__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/cart.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="cart">
+    <div v-if="cartProducts">
+      {{ cartProducts }}
+    </div>
+
+    <UButton @click="createOrder">
+      Оформить заказ
+    </UButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { usePostOrdersCreate } from '~/api/mutations'
+
+const { getCart } = useCart()
+const cartProducts = getCart()
+const { mutateAsync } = usePostOrdersCreate()
+
+const createOrder = () => {
+  mutateAsync(cartProducts)
+}
+</script>
+
+<style lang="scss">
+
+</style>

pages/index.vue

@@ -1,17 +1,61 @@
 <template>
-  <div class="card">
-    <ProductImages />
-    <ProductDescription />
+  <div class="index">
+    <div
+      class="cards-list"
+    >
+      <div
+        v-for="product in productCardData"
+        :key="product.id"
+        class="card"
+        @click="router.push(`/product/${product.id}`)"
+      >
+        <img class="card__image" :src="product?.images[0]?.src" alt="card?.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?.colors?.length > 1">
+            {{ `+${product?.colors?.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">
+.cards-list {
+  padding: 15px;
+
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 4px;
+}
+
 .card {
-  width: 100%;
+  min-width: 300px;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  cursor: pointer;
+
+  &__image {
+    width: 100%;
+  }
+
+  &__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"