Страница по uid

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
 }

layouts/default.vue

@@ -29,7 +29,7 @@
 }
 
 .container {
-  max-width: 1000px;
+  max-width: 100%;
   margin: 48px auto 100px;
 
   @media (max-width: 1280px) {

pages/index.vue

@@ -1,9 +1,39 @@
 <template>
-  <div>
+  <div class="card">
+    <div class="card__images">
+      <div
+        v-for="image in currentVariantImages"
+        :key="image?.id"
+      >
+        <img width="100%" :src="image?.src" :alt="image?.src">
+      </div>
+    </div>
+
+    <div class="card__description">
+      <h1>{{ productsData?.name }}</h1>
+
+      Цена
+      {{ currentVariant?.price }}
+
+      Коротокое описание
+      {{ productsData?.short_description }}
+
+      <div class="card__variation">
+        <div
+          v-for="variation in productsData?.variations"
+          :key="variation?.id"
+          @click="() => currentVariantId = variation?.id"
+        >
+          {{ variation?.id }}
+          <img width="200px" :src="variation?.image[0]?.src" :alt="variation?.image[0]?.src">
+        </div>
+      </div>
+
       <pre>
-    {{ productsData?.images?.filter(img => img?.src?.includes(colorVariants.blackCottonPolyester)) }}
+        {{ currentVariant }}
       </pre>
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -11,10 +41,53 @@ 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_',
+function getAttribute(attributes, name: string) {
+  return attributes?.find(attribute => attribute?.name === name)?.option
 }
+
+const defaultColor = computed(() => getAttribute(productsData?.value?.default_attributes, 'color'))
+const defaultMaterial = computed(() => getAttribute(productsData?.value?.default_attributes, 'material'))
+
+const defaultVariant = computed(() => {
+  return productsData?.value?.variations?.find(variation => getAttribute(variation?.attributes, 'color') === defaultColor?.value)
+    && productsData?.value?.variations?.find(variation => getAttribute(variation?.attributes, 'material') === defaultMaterial?.value)
+})
+
+const currentVariantId = ref(defaultVariant?.value?.id)
+
+const currentVariant = computed(() => productsData?.value?.variations?.find(variation => variation?.id === currentVariantId?.value))
+
+const currentColor = computed(() => getAttribute(currentVariant?.value?.attributes, 'color'))
+const currentMaterial = computed(() => getAttribute(currentVariant?.value?.attributes, 'material'))
+
+const currentVariantImages
+    = computed(() => productsData?.value?.images
+      ?.filter(img => img?.src?.includes(`${currentColor.value}_${currentMaterial.value}_`)))
+
+watch(() => defaultVariant.value, newValue => currentVariantId.value = newValue?.id)
 </script>
+
+<style lang="scss">
+.card {
+  display: flex;
+  flex-direction: row;
+
+  &__images {
+    margin-left: 10%;
+    margin-right: 10%;
+    width: 40%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__description {
+    width: 40%;
+  }
+
+  &__variation {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+  }
+}
+</style>