32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
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,
|
|
}
|
|
})
|