product-card

composables/index.ts

@@ -1,2 +1,3 @@
 export * from './useCurrentProduct'
 export * from './useProduct'
+export * from './useProductsList'

composables/useProduct.ts

@@ -1,8 +1,11 @@
 import { useGetProductsDetail, useGetProductsVariationsList } from '~/api/queries'
 
 export const useProduct = () => {
-  const { data: productsData } = useGetProductsDetail(79)
-  const { data: productsVariationsData } = useGetProductsVariationsList(79)
+  const route = useRoute()
+  const currentId = ref<number>(route.params.id)
+
+  const { data: productsData } = useGetProductsDetail(currentId)
+  const { data: productsVariationsData } = useGetProductsVariationsList(currentId)
 
   function getAttribute(attributes: string[], name: string) {
     return attributes?.find(attribute => attribute?.name === name)

composables/useProductsList.ts

@@ -0,0 +1,17 @@
+import { useGetProductsList } from '~/api/queries'
+
+export const useProductsList = () => {
+  const { data: productData } = useGetProductsList()
+
+  const productCardData = computed(() => productData?.value?.map(product => ({
+    id: product?.id,
+    name: product?.name,
+    price: product?.price,
+    variations: product?.variations,
+    images: product?.images?.splice(0, 5),
+  })) ?? [])
+
+  return {
+    productCardData,
+  }
+}