api/endpoints/getProductAttributesDetail.ts

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

api/endpoints/getProductsList.ts

@@ -1,4 +0,0 @@
-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, { per_page: 99 })
+  await api.wc.v3ProductsVariationsList(productId)

api/endpoints/index.ts

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

api/endpoints/orders/index.ts

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

api/endpoints/orders/postOrdersCreate.ts

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

api/mutations/index.ts

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

api/mutations/usePostOrdersCreate.ts

@@ -1,19 +0,0 @@
-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,4 +1,2 @@
-export * from './useGetProductAttributesDetail'
 export * from './useGetProductsDetail'
-export * from './useGetProductsList'
 export * from './useGetProductsVariationsList'

api/queries/useGetProductAttributesDetail.ts

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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,7 +5,3 @@
     </NuxtLayout>
   </UApp>
 </template>
-
-<style lang="scss">
-@use '@/assets/scss/main' as *;
-</style>

assets/scss/main.scss

@@ -24,32 +24,7 @@ h3 {
   @include h3('h3');
 }
 
-::-webkit-scrollbar {
+// Buttons
-  width: 8px;
+button {
-}
+  cursor: pointer;
-
-::-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

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

components/ProductVariations.vue

@@ -1,38 +0,0 @@
-<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,4 +1,2 @@
-export * from './useCart'
 export * from './useCurrentProduct'
 export * from './useProduct'
-export * from './useProductsList'

composables/useCart.ts

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

composables/useProduct.ts

@@ -1,11 +1,8 @@
 import { useGetProductsDetail, useGetProductsVariationsList } from '~/api/queries'
 
 export const useProduct = () => {
-  const route = useRoute()
+  const { data: productsData } = useGetProductsDetail(79)
-  const currentId = ref<number>(route.params.id)
+  const { data: productsVariationsData } = useGetProductsVariationsList(79)
-
-  const { data: productsData } = useGetProductsDetail(currentId)
-  const { data: productsVariationsData } = useGetProductsVariationsList(currentId)
 
   function getAttribute(attributes: string[], name: string) {
     return attributes?.find(attribute => attribute?.name === name)
@@ -24,29 +21,6 @@ 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,
@@ -60,9 +34,6 @@ export const useProduct = () => {
     materials,
     sizes,
 
-    variations,
-
     getAttribute,
-    getIdentifier,
   }
 }

composables/useProductsList.ts

@@ -1,19 +0,0 @@
-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,8 +2,7 @@
   "colors": {
     "black": "черный",
     "beige": "бежевый",
-    "grey": "серый",
+    "grey": "серый"
-    "grey-black": "серо-черный"
   },
   "materials": {
     "cotton": "хлопок",

layouts/default.vue

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

package.json

@@ -19,7 +19,6 @@
     "@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

@@ -1,27 +0,0 @@
-<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,61 +1,17 @@
 <template>
-  <div class="index">
+  <div class="card">
-    <div
+    <ProductImages />
-      class="cards-list"
+    <ProductDescription />
-    >
-      <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 {
-  min-width: 300px;
+  width: 100%;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
-  cursor: pointer;
-
-  &__image {
-    width: 100%;
-  }
-
-  &__description {
-    padding-inline: 10px;
-  }
 }
 </style>

pages/product/[id].vue

@@ -1,22 +0,0 @@
-<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,6 +2,7 @@ import type {
   DehydratedState,
   VueQueryPluginOptions,
 } from '@tanstack/vue-query'
+// Nuxt 3 app aliases
 import { defineNuxtPlugin, useState } from '#imports'
 import {
   dehydrate,
@@ -10,12 +11,10 @@ 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: {
@@ -41,11 +40,6 @@ 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,11 +2354,6 @@
   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"
@@ -2369,13 +2364,6 @@
   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"