index.vue

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