product-card

components/ProductDescription.vue

@@ -2,9 +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>
 
-    <ProductVariations />
+    <ProductVariations v-if="colors?.length > 1" />
 
     <div>
       {{ `Цвет: ${t(`colors.${currentColor}`)}` }}
@@ -20,12 +20,17 @@
 
     <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>
 
@@ -41,7 +46,7 @@ import { useCurrentProduct, useProduct } from '~/composables'
 
 const { t } = useI18n()
 
-const { productsData, sizes } = useProduct()
+const { productsData, colors, getAttribute } = useProduct()
 const { currentVariant, currentColor, currentMaterial } = useCurrentProduct()
 
 const currentSize = ref(0)

components/ProductVariations.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="product-variations">
     <div
-      v-for="variation in productsVariationsData"
-      :key="variation?.id"
-      @click="() => currentVariantId = variation?.id"
+      v-for="variation in variations"
+      :key="variation?.option?.id"
+      @click="() => currentVariant = variation"
     >
       <div class="product-variations__variation">
-        <img width="80" :src="variation?.image?.src" :alt="variation?.image?.src">
+        <img width="80" :src="variation?.image[0]?.src" :alt="variation?.image[0]?.src">
       </div>
     </div>
   </div>
@@ -15,8 +15,8 @@
 <script setup lang="ts">
 import { useCurrentProduct, useProduct } from '~/composables'
 
-const { productsVariationsData } = useProduct()
-const { currentVariantId } = useCurrentProduct()
+const { variations } = useProduct()
+const { currentVariant } = useCurrentProduct()
 </script>
 
 <style lang="scss">