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

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

api/endpoints/index.ts

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

api/queries/index.ts

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

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/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,37 @@ h3 {
   @include h3('h3');
 }
 
-a {
-  color: inherit;
-  text-decoration: none;
-  transition: all 0.2s ease;
-}
-
 // Buttons
 button {
   cursor: pointer;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  border: none;
-  background: none;
-  padding: 0;
 }
 
-// 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;
+::-webkit-scrollbar {
+  width: 8px;
+}
 
-  &:focus {
-    outline: none;
-    border-color: $brand-primary;
+::-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

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

components/ProductDescription.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="product-description">
+    <h1>{{ productsData?.name }}</h1>
+
+    <h2>{{ currentVariant?.price }}  <Icon name="ph:currency-rub" /></h2>
+
+    <ProductVariations />
+
+    <div>
+      {{ `Цвет: ${t(`colors.${currentColor}`)}` }}
+    </div>
+
+    <div>
+      {{ `Материал: ${t(`materials.${currentMaterial}`)}` }}
+    </div>
+
+    <div>
+      Размер
+    </div>
+
+    <div class="product-description__sizes">
+      <div
+        v-for="size in sizes"
+        :key="size"
+        class="product-description__size"
+        @click="() => currentSize = size"
+      >
+        <UButton block :label="size" :variant="currentSize === size ? undefined : 'outline'" />
+      </div>
+    </div>
+
+    <UButton class="justify-content-center" label="Добавить в корзину" size="xl" />
+
+    <UAccordion :items="items" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProductVariations from '~/components/ProductVariations.vue'
+import { useCurrentProduct, useProduct } from '~/composables'
+
+const { t } = useI18n()
+
+const { productsData, sizes } = useProduct()
+const { currentVariant, currentColor, currentMaterial } = useCurrentProduct()
+
+const currentSize = ref(0)
+
+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 дней',
+  },
+])
+</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,37 @@
+<template>
+  <div class="product-variations">
+    <div
+      v-for="variation in productsVariationsData"
+      :key="variation?.id"
+      @click="() => currentVariantId = variation?.id"
+    >
+      <div class="product-variations__variation">
+        <img width="80" :src="variation?.image?.src" :alt="variation?.image?.src">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCurrentProduct, useProduct } from '~/composables'
+
+const { productsVariationsData } = useProduct()
+const { currentVariantId } = 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;
+    }
+  }
+}
+</style>

composables/index.ts

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

composables/useCurrentProduct.ts

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

composables/useProduct.ts

@@ -0,0 +1,39 @@
+import { useGetProductsDetail, useGetProductsVariationsList } from '~/api/queries'
+
+export const useProduct = () => {
+  const { data: productsData } = useGetProductsDetail(79)
+  const { data: productsVariationsData } = useGetProductsVariationsList(79)
+
+  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)
+
+  return {
+    productsData,
+    productsVariationsData,
+
+    defaultColor,
+    defaultMaterial,
+    defaultSize,
+    defaultVariant,
+
+    colors,
+    materials,
+    sizes,
+
+    getAttribute,
+  }
+}

i18n/locales/en.json

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

i18n/locales/ru.json

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

layouts/default.vue

@@ -1,13 +1,17 @@
 <template>
   <div class="layout">
     <header class="header">
-      Header
+      <div class="header__container">
+        <h1 class="header__headline">
+          PAXTON
+        </h1>
+      </div>
     </header>
 
     <main class="main">
-      <div class="container">
+      <UContainer class="container">
         <slot />
-      </div>
+      </UContainer>
     </main>
 
     <footer class="footer">
@@ -17,25 +21,18 @@
 </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;
-
 .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 +42,27 @@
   right: 0;
   z-index: 100;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  height: 54px;
+  background: white;
+
+  &__container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+  &__headline {
+    height: 100%;
+    font-size: 32px;
+    color: black;
+  }
 }
 
 .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,6 +17,7 @@
     "@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",
     "@vueuse/core": "^13.1.0",
     "dayjs": "^1.11.13",

pages/index.vue

@@ -1,20 +1,22 @@
 <template>
-  <div>
-    <pre>
-    {{ productsData?.images?.filter(img => img?.src?.includes(colorVariants.blackCottonPolyester)) }}
-    </pre>
+  <div class="card">
+    <ProductImages />
+    <ProductDescription />
   </div>
 </template>
 
 <script setup lang="ts">
-import { useGetProductsDetail } from '~/api/queries'
-
-const { data: productsData } = useGetProductsDetail(79)
-
-const colorVariants = {
-  beigeCottonPolyester: 'beige_cotton-polyester_',
-  blackCotton: 'black_cotton_',
-  greyCottonPolyester: 'grey_cotton-polyester_',
-  blackCottonPolyester: 'black_cotton-polyester_',
-}
 </script>
+
+<style lang="scss">
+.card {
+  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>

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