product-card

.gitea/workflows/deploy.yml

@@ -10,8 +10,16 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
+      - name: LS
+        run: cd / && cat .dockerenv
+      - name: Test SSH access
+        run: ssh -Tv git@koptilnya.xyz
       - name: Checkout code
         uses: actions/checkout@v4
+        with:
+          ssh-key: '${{ secrets.SSH_PRIVATE_KEY }}'
+          ssh-strict: false
+          persist-credentials: false
 
       - name: Install dependencies
         run: |

README.md

@@ -1,75 +1,7 @@
-# Nuxt Minimal Starter
+node.js 20.19.0
 
-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+yarn
 
-## Setup
-
-Make sure to install dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
-```
-
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm dev
-
-# yarn
 yarn dev
 
-# bun
-bun run dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+https://wp.koptilnya.xyz/wp-admin/edit.php?post_type=product

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/getProductsDetail.ts

@@ -1,4 +1,4 @@
 import api from '~/api/instance'
 
 export const getProductsDetail = async (productId: number) =>
-  await api.wc.v1ProductsDetail(productId)
+  await api.wc.v3ProductsDetail(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

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

api/endpoints/index.ts

@@ -1 +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 +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/useGetProductsDetail.ts

@@ -1,14 +1,10 @@
 import { useQuery } from '@tanstack/vue-query'
-import { unref, watch } from 'vue'
+import { unref } from 'vue'
 import { getProductsDetail } from '~/api/endpoints'
 
 export const useGetProductsDetail = (productId: MaybeRef<number>) => {
-  const q = useQuery({
-    queryKey: ['get-products-detail', unref(productId)],
+  return useQuery({
+    queryKey: ['get-products-detail', productId],
     queryFn: () => getProductsDetail(unref(productId)),
   })
-
-  watch(() => productId, () => q.refetch())
-
-  return q
 }

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

api/queries/useGetProductsVariationsList.ts

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

app.vue

@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <UApp>
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
-  </div>
+  </UApp>
 </template>
 
 <style lang="scss">

assets/css/main.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";

assets/scss/_breakpoints.scss

@@ -1,6 +0,0 @@
-// Breakpoints
-$breakpoint-sm: 576px;
-$breakpoint-md: 768px;
-$breakpoint-lg: 992px;
-$breakpoint-xl: 1200px;
-$breakpoint-xxl: 1400px;

assets/scss/_reset.scss

@@ -1,70 +0,0 @@
-/* Modern CSS Reset */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-/* Remove default margin and padding */
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-figure,
-blockquote,
-dl,
-dd {
-  margin: 0;
-}
-
-/* Set core body defaults */
-body {
-  min-height: 100vh;
-  scroll-behavior: smooth;
-  text-rendering: optimizeSpeed;
-  line-height: 1.5;
-}
-
-/* Remove list styles on ul, ol elements */
-ul,
-ol {
-  list-style: none;
-}
-
-/* A elements that don't have a class get default styles */
-a:not([class]) {
-  text-decoration-skip-ink: auto;
-}
-
-/* Make images easier to work with */
-img,
-picture {
-  max-width: 100%;
-  display: block;
-}
-
-/* Inherit fonts for inputs and buttons */
-input,
-button,
-textarea,
-select {
-  font: inherit;
-}
-
-/* Remove all animations and transitions for people that prefer not to see them */
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
-}

assets/scss/colors.scss

@@ -1,88 +0,0 @@
-// Brand Colors
-$brand-primary: #4f46e5; // Основной цвет бренда
-$brand-secondary: #10b981; // Вторичный цвет бренда
-
-// Neutral Colors
-$neutral-50: #f9fafb; // Самый светлый оттенок
-$neutral-100: #f3f4f6; // Светлый фон
-$neutral-200: #e5e7eb; // Светлая граница
-$neutral-300: #d1d5db; // Светлый текст
-$neutral-400: #9ca3af; // Неактивный текст
-$neutral-500: #6b7280; // Средний текст
-$neutral-600: #4b5563; // Основной текст
-$neutral-700: #374151; // Темный текст
-$neutral-800: #1f2937; // Очень темный текст
-$neutral-900: #111827; // Самый темный оттенок
-
-// Semantic Colors
-$text-primary: $neutral-900; // Основной текст
-$text-secondary: $neutral-600; // Вторичный текст
-$text-muted: $neutral-400; // Неактивный текст
-$background-primary: $neutral-50; // Основной фон
-$background-secondary: $neutral-100; // Вторичный фон
-$border-color: $neutral-200; // Цвет границ
-
-// Status Colors
-$success: #10b981; // Успех
-$warning: #f59e0b; // Предупреждение
-$error: #ef4444; // Ошибка
-$info: #3b82f6; // Информация
-
-// Basic Colors
-$black: #000000;
-$dark-background: #13141c;
-$dark-grey: #171821;
-$grey-selector: #1b1b24;
-$grey-blocks: #1e1f2b;
-$grey-text-highlight: #23242c;
-$grey-blocks-hover: #262736;
-$grey-menu: #292a32;
-$grey-stroke: #323442;
-$grey-paginator: #323442;
-$grey-icons: #5b5e6d;
-$grey-text: #7f808b;
-$grey-text2: #9A9BAB;
-$white: #ffffff;
-$greeen: #9fff00;
-$greeen-dark: #43611b;
-$red: #ff4141;
-$red-dark: #3e232c;
-$green: #20b26c;
-$green-dark: #133324;
-$gold: #ffc35c;
-
-// Form Elements
-$grey-form: #1c1d26;
-$grey-form-stroke: #323442;
-$grey-button: #21222d;
-$grey-button-2: #32323c;
-$grey-button-stroke: #5b5e6d;
-
-// Export colors for JavaScript
-:export {
-  black: $black;
-  darkBackground: $dark-background;
-  darkGrey: $dark-grey;
-  greySelector: $grey-selector;
-  greyBlocks: $grey-blocks;
-  greyTextHighlight: $grey-text-highlight;
-  greyBlocksHover: $grey-blocks-hover;
-  greyMenu: $grey-menu;
-  greyStroke: $grey-stroke;
-  greyPaginator: $grey-paginator;
-  greyIcons: $grey-icons;
-  greyText: $grey-text;
-  white: $white;
-  greeen: $greeen;
-  greeenDark: $greeen-dark;
-  red: $red;
-  redDark: $red-dark;
-  green: $green;
-  greenDark: $green-dark;
-  greyForm: $grey-form;
-  greyFormStroke: $grey-form-stroke;
-  greyButton: $grey-button;
-  greyButton2: $grey-button-2;
-  greyButtonStroke: $grey-button-stroke;
-  gold: $gold;
-}

assets/scss/global.scss

@@ -1,12 +0,0 @@
-@use 'main' as *;
-
-body {
-  font-family: 'Inter', sans-serif;
-  color: $text-color;
-  margin: 0;
-  padding: 0;
-}
-
-.container {
-  @include container;
-}

assets/scss/main.scss

@@ -1,23 +1,6 @@
-@use 'reset';
-@use 'colors' as *;
 @use 'typography' as *;
 @use 'utils' as *;
 
-// Base styles
-html {
-  font-size: 16px;
-  line-height: 1.5;
-  scroll-behavior: smooth;
-}
-
-body {
-  font-family: $font-family-base;
-  color: white;
-  background-color: black;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 // Typography
 h1,
 h2,
@@ -25,7 +8,6 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: $font-weight-semibold;
   line-height: 100%;
   color: #ffffff;
 }
@@ -42,37 +24,32 @@ h3 {
   @include h3('h3');
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
-  transition: all 0.2s ease;
+::-webkit-scrollbar {
+  width: 8px;
 }
 
-// Buttons
-button {
-  cursor: pointer;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  border: none;
-  background: none;
-  padding: 0;
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
 }
 
-// Forms
-input,
-textarea,
-select {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  color: inherit;
-  border-radius: 0.25rem;
-  padding: 0.5rem 1rem;
-  transition: all 0.2s ease;
-
-  &:focus {
-    outline: none;
-    border-color: $brand-primary;
-  }
+::-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

@@ -1,16 +1,7 @@
 @use 'sass:color';
-@use 'sass:math';
-@use 'breakpoints' as *;
-
-// Mixins
-@mixin responsive($breakpoint) {
-  @media (min-width: $breakpoint) {
-    @content;
-  }
-}
 
 @mixin mobile {
-  @media (max-width: $breakpoint-md) {
+  @media (max-width: 768px) {
     @content;
   }
 }
@@ -151,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

@@ -0,0 +1,131 @@
+<template>
+  <div class="product-description">
+    <h1>{{ productsData?.name }}</h1>
+
+    <h2>{{ currentVariant?.options[0]?.price }}  <Icon name="ph:currency-rub" /></h2>
+
+    <ProductVariations v-if="colors?.length > 1" />
+
+    <div>
+      {{ `Цвет: ${t(`colors.${currentColor}`)}` }}
+    </div>
+
+    <div>
+      {{ `Материал: ${t(`materials.${currentMaterial}`)}` }}
+    </div>
+
+    <div>
+      Размер
+    </div>
+
+    <div class="product-description__sizes">
+      <div
+        v-for="option in currentVariant?.options"
+        :key="option"
+        class="product-description__size"
+        @click="() => currentSize = option"
+      >
+        <UButton
+          block
+          :label="getAttribute(option?.attributes, 'size')?.option"
+          :disabled="option?.stock_status === 'outofstock'"
+          :variant="currentSize === option ? undefined : 'outline'"
+        />
+      </div>
+    </div>
+
+    <UButton
+      :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 { useCurrentProduct, useProduct } from '~/composables'
+
+const { t } = useI18n()
+const { addToCart } = useCart()
+
+const { productsData, colors, getAttribute } = useProduct()
+const { currentVariant, currentColor, currentMaterial } = useCurrentProduct()
+
+const currentSize = ref(undefined)
+
+const items = computed(() => [
+  {
+    label: 'Описание товара',
+    icon: 'i-heroicons-document-text',
+    content: productsData?.value?.description?.replace(/<\/?p>/g, ''),
+  },
+  {
+    label: 'Состав и параметры',
+    icon: 'i-heroicons-beaker',
+    content: 'хлопок 100%',
+  },
+  {
+    label: 'Рекомендации по уходу',
+    icon: 'i-heroicons-sparkles',
+    content: 'Бережная стирка при максимальной температуре 30ºС\nНе отбеливать\nМашинная сушка запрещена\nГлажение при 110ºС\nПрофессиональная сухая чистка',
+  },
+  {
+    label: 'Доставка и оплата',
+    icon: 'i-heroicons-truck',
+    content: 'Доставка в пункт выдачи',
+  },
+  {
+    label: 'Возврат и обмен',
+    icon: 'i-heroicons-arrow-path',
+    content: 'Возврат в течение 14 дней\nОбмен размера в течение 7 дней',
+  },
+])
+
+function addToCartBtn() {
+  addToCart(currentSize?.value?.id)
+}
+</script>
+
+<style lang="scss">
+.product-description {
+  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;
+
+  &__sizes {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 4px;
+  }
+
+  &__size {
+    width: 65px;
+  }
+
+  h2 {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    align-items: center;
+    text-align: center;
+  }
+}
+</style>

components/ProductImages.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="product-images">
+    <div
+      v-for="image in currentVariantImages?.slice(0, 5)"
+      :key="image?.id"
+    >
+      <img width="100%" :src="image?.src" :alt="image?.src">
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCurrentProduct } from '~/composables'
+
+const { currentVariantImages } = useCurrentProduct()
+</script>
+
+<style lang="scss">
+.product-images {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>

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

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

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

composables/useProduct.ts

@@ -0,0 +1,68 @@
+import { useGetProductsDetail, useGetProductsVariationsList } from '~/api/queries'
+
+export const useProduct = () => {
+  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)
+  }
+
+  const defaultColor = computed(() => getAttribute(productsData?.value?.default_attributes, 'color')?.option)
+  const defaultMaterial = computed(() => getAttribute(productsData?.value?.default_attributes, 'material')?.option)
+  const defaultSize = computed(() => getAttribute(productsData?.value?.default_attributes, 'size')?.option)
+
+  const defaultVariant = computed(() => {
+    return productsVariationsData?.value?.find(variation => getAttribute(variation?.attributes, 'color')?.option === defaultColor?.value)
+      && productsVariationsData?.value?.find(variation => getAttribute(variation?.attributes, 'material')?.option === defaultMaterial?.value)
+  })
+
+  const colors = computed(() => getAttribute(productsData?.value?.attributes, 'color')?.options)
+  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,
+
+    defaultColor,
+    defaultMaterial,
+    defaultSize,
+    defaultVariant,
+
+    colors,
+    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/en.json

@@ -0,0 +1,5 @@
+{
+  "colors": {
+    "black": "black"
+  }
+}

i18n/locales/ru.json

@@ -0,0 +1,12 @@
+{
+  "colors": {
+    "black": "черный",
+    "beige": "бежевый",
+    "grey": "серый",
+    "grey-black": "серо-черный"
+  },
+  "materials": {
+    "cotton": "хлопок",
+    "cotton-polyester": "хлопок-полиэстер"
+  }
+}

layouts/default.vue

@@ -1,13 +1,28 @@
 <template>
   <div class="layout">
     <header class="header">
-      Header
+      <div class="header__container">
+        <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>
 
     <main class="main">
-      <div class="container">
+      <UContainer class="container">
         <slot />
-      </div>
+      </UContainer>
     </main>
 
     <footer class="footer">
@@ -16,26 +31,23 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-@use '@/assets/scss/colors.scss' as colors;
-@use '@/assets/scss/main.scss' as main;
-@use '@/assets/scss/utils.scss' as utils;
+<script setup lang="ts">
+const router = useRouter()
+</script>
 
+<style lang="scss" scoped>
 .layout {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background: colors.$dark-grey;
 }
 
 .container {
-  max-width: 1000px;
-  margin: 48px auto 100px;
+  --ui-container: 100%;
+  max-width: 100%;
 
-  @media (max-width: 1280px) {
-    margin: 24px auto 52px;
-    padding: 0 24px;
-  }
+  margin: 0;
+  padding: 0;
 }
 
 .header {
@@ -45,11 +57,31 @@
   right: 0;
   z-index: 100;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  height: 54px;
+  background: white;
+
+  &__container {
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    text-align: center;
+  }
+
+  &__headline {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    font-size: 32px;
+    color: black;
+    cursor: pointer;
+  }
 }
 
 .main {
   flex: 1;
-  margin-top: 64px;
+  margin-top: 54px;
 }
 
 .footer {

nuxt.config.ts

@@ -2,5 +2,15 @@
 export default defineNuxtConfig({
   compatibilityDate: '2025-05-15',
   devtools: { enabled: true },
-  modules: ['@nuxt/ui', '@nuxt/image', '@nuxt/icon', '@nuxt/fonts'],
+  modules: ['@nuxt/ui', '@nuxt/image', '@nuxt/icon', '@nuxt/fonts', '@nuxtjs/i18n'],
+  css: ['~/assets/css/main.css', '~/assets/scss/main.scss'],
+  i18n: {
+    locales: [
+      { code: 'en', name: 'English', file: 'en.json' },
+      { code: 'ru', name: 'Русский', file: 'ru.json' },
+    ],
+    defaultLocale: 'ru',
+    strategy: 'prefix_except_default',
+    detectBrowserLanguage: false,
+  },
 })

package.json

@@ -17,7 +17,9 @@
     "@nuxt/icon": "1.15.0",
     "@nuxt/image": "1.10.0",
     "@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,20 +1,61 @@
 <template>
-  <div>
-    <pre>
-    {{ productsData?.images?.filter(img => img?.src?.includes(colorVariants.blackCottonPolyester)) }}
-    </pre>
+  <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 { useGetProductsDetail } from '~/api/queries'
+import { useProductsList } from '~/composables'
 
-const { data: productsData } = useGetProductsDetail(79)
-
-const colorVariants = {
-  beigeCottonPolyester: 'beige_cotton-polyester_',
-  blackCotton: 'black_cotton_',
-  greyCottonPolyester: 'grey_cotton-polyester_',
-  blackCottonPolyester: 'black_cotton-polyester_',
-}
+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;
+  display: flex;
+  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>

pages/test.vue

@@ -1,11 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-boroda
-</template>
-
-<style scoped>
-
-</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, // открыть/закрыть по умолчанию
+      })
     })
   }
 })

tailwind.config.ts

@@ -0,0 +1,16 @@
+// tailwind.config.ts
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [], // Nuxt сам заполняет content автоматически
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'], // если используешь @nuxt/fonts или свою кастомную типографику
+      },
+    },
+  },
+  plugins: [],
+}
+
+export default config