product-card

composables/useCurrentProduct.ts

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

composables/useProduct.ts

@@ -24,6 +24,29 @@ 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,
@@ -37,6 +60,9 @@ export const useProduct = () => {
     materials,
     sizes,
 
+    variations,
+
     getAttribute,
+    getIdentifier,
   }
 }

composables/useProductsList.ts

@@ -1,6 +1,7 @@
 import { useGetProductsList } from '~/api/queries'
 
 export const useProductsList = () => {
+  const { getAttribute } = useProduct()
   const { data: productData } = useGetProductsList()
 
   const productCardData = computed(() => productData?.value?.map(product => ({
@@ -9,6 +10,7 @@ export const useProductsList = () => {
     price: product?.price,
     variations: product?.variations,
     images: product?.images?.slice(0, 5),
+    colors: getAttribute(product?.attributes, 'color')?.options,
   })) ?? [])
 
   return {