@meeovi/layer-commerce 1.0.2 → 1.0.4

package/app/components/catalog/product/ProductAccordion/types.ts

@@ -1,5 +1,5 @@
-import type { SfProduct } from '@vue-storefront/unified-data-model';
+import type { Product } from '../../../composables/_types'
 
 export type ProductAccordionPropsType = {
-  product: SfProduct;
-};
+  product: Product
+}

package/app/components/catalog/product/ProductProperties/types.ts

@@ -1,5 +1,5 @@
-import type { SfProduct } from '@vue-storefront/unified-data-model';
+import type { Product } from '../../../composables/_types'
 
 export type ProductPropertiesProps = {
-  product: SfProduct;
-};
+  product: Product
+}

package/app/components/catalog/product/ProductSlider/types.ts

@@ -1,7 +1,7 @@
-import type { HTMLAttributes } from 'vue';
-import type { SfProduct } from '@vue-storefront/unified-data-model';
+import type { HTMLAttributes } from 'vue'
+import type { Product } from '../../../composables/_types'
 
 export type ProductSliderProps = {
-  items?: SfProduct[];
-  wrapperClass?: HTMLAttributes['class'];
-};
+  items?: Product[]
+  wrapperClass?: HTMLAttributes['class']
+}

package/app/components/catalog/product/RecommendedProducts/types.ts

@@ -1,5 +1,5 @@
-import { SfProduct } from '@vue-storefront/unified-data-model';
+import type { Product } from '../../../composables/_types'
 
 export type RecommendedProductsProps = {
-  products: SfProduct[];
-};
+  products: Product[]
+}

package/app/components/catalog/product/bestsellers.vue

@@ -31,39 +31,27 @@
   import productCard from './productCard.vue'
 
   const model = ref(null);
-  const {
-    $directus,
-    $readItems
-  } = useNuxtApp()
+  import { useCatalogFallback } from '../../../composables/useCatalog'
+  const catalog = useCatalogFallback()
 
   const {
     data: bestsellers
-  } = await useAsyncData('bestsellers', () => {
-    return $directus.request($readItems('products', {
-      fields: ['*',
-        'products.products_id.*',
-        'products.products_id.image.*',
-        'currency.currency_id.*',
-        'brands.brands_id.*',
-        'image.*',
-      ],
+  } = await useAsyncData('bestsellers', async () => {
+    return await catalog.listProducts({
+      fields: ['*', 'products.products_id.*', 'products.products_id.image.*', 'currency.currency_id.*', 'brands.brands_id.*', 'image.*'],
       limit: 10,
       filter: {
         lists: {
           lists_id: {
             lists_types: {
               lists_types_id: {
-                name: {
-                  _eq: "Best Sellers"
-                }
+                name: { _eq: 'Best Sellers' }
               }
             }
           }
         },
-        status: {
-          _eq: "published"
-        }
+        status: { _eq: 'published' }
       }
-    }))
+    })
   })
 </script>

package/app/components/catalog/product/deals.vue

@@ -29,33 +29,18 @@
 
 <script setup>
 import productCard from './productCard.vue'
+import { useCatalogFallback } from '../../../composables/useCatalog'
 
   const model = ref(null)
-  const {
-    $directus,
-    $readItems
-  } = useNuxtApp()
+  const catalog = useCatalogFallback()
 
   const {
     data: deals
-  } = await useAsyncData('deals', () => {
-    return $directus.request($readItems('products', {
-      fields: ['*',
-        'products.products_id.*',
-        'products.products_id.image.*',
-        'currency.currency_id.*',
-        'brands.brands_id.*',
-        'image.*',
-      ],
+  } = await useAsyncData('deals', async () => {
+    return await catalog.listProducts({
+      fields: ['*', 'products.products_id.*', 'products.products_id.image.*', 'currency.currency_id.*', 'brands.brands_id.*', 'image.*'],
       limit: 10,
-      filter: {
-        price: {
-          _lte: "20.00"
-        },
-        status: {
-          _eq: "published"
-        }
-      }
-    }))
+      filter: { price: { _lte: '20.00' }, status: { _eq: 'published' } }
+    })
   })
 </script>

package/app/components/catalog/product/exclusives.vue

@@ -31,21 +31,19 @@
   import productCard from './productCard.vue'
 
   const model = ref(null);
-  const { $directus, $readItems, $commerce } = useNuxtApp()
+  const { $commerce } = useNuxtApp()
+  import { useCatalogFallback } from '../../../composables/useCatalog'
+  const catalog = useCatalogFallback()
 
   const { data: exclusives } = await useAsyncData('exclusives', async () => {
-    const refs = await $directus.request($readItems('products', {
+    // ask the adapter for products first; composable will fallback to Directus
+    const refs = await catalog.listProducts({
       fields: ['id', 'sku'],
       limit: 10,
-      filter: {
-        status: { _eq: 'published' },
-        departments: {
-          departments_id: { name: { _eq: 'Exclusives' } }
-        }
-      }
-    }))
+      filter: { status: { _eq: 'published' }, departments: { departments_id: { name: { _eq: 'Exclusives' } } } }
+    })
 
-    const products = await Promise.all(refs.map(async (r) => {
+    const products = await Promise.all(refs.map(async (r: any) => {
       try {
         return await $commerce.getProduct(String(r.sku || r.id))
       } catch (e) {

package/app/components/catalog/product/featuredproducts.vue

@@ -31,39 +31,27 @@
   import productCard from './productCard.vue'
 
   const model = ref(null);
-  const {
-    $directus,
-    $readItems
-  } = useNuxtApp()
+  import { useCatalogFallback } from '../../../composables/useCatalog'
+  const catalog = useCatalogFallback()
 
   const {
     data: featured
-  } = await useAsyncData('featured', () => {
-    return $directus.request($readItems('products', {
-      fields: ['*',
-        'products.products_id.*',
-        'products.products_id.image.*',
-        'currency.currency_id.*',
-        'brands.brands_id.*',
-        'image.*',
-      ],
+  } = await useAsyncData('featured', async () => {
+    return await catalog.listProducts({
+      fields: ['*', 'products.products_id.*', 'products.products_id.image.*', 'currency.currency_id.*', 'brands.brands_id.*', 'image.*'],
       limit: 10,
       filter: {
         lists: {
           lists_id: {
             lists_types: {
               lists_types_id: {
-                name: {
-                  _eq: "Featured"
-                }
+                name: { _eq: 'Featured' }
               }
             }
           }
         },
-        status: {
-          _eq: "published"
-        }
+        status: { _eq: 'published' }
       }
-    }))
+    })
   })
 </script>

package/app/components/catalog/product/latestproducts.vue

@@ -30,29 +30,17 @@
   import productCard from './productCard.vue'
 
   const model = ref(null);
-  const {
-    $directus,
-    $readItems
-  } = useNuxtApp()
+  import { useCatalogFallback } from '../../../composables/useCatalog'
+  const catalog = useCatalogFallback()
 
   const {
     data: latest
-  } = await useAsyncData('latest', () => {
-    return $directus.request($readItems('products', {
-      fields: ['*',
-        'products.products_id.*',
-        'products.products_id.image.*',
-        'currency.currency_id.*',
-        'brands.brands_id.*',
-        'image.*',
-      ],
-      filter: {
-        status: {
-          _eq: 'published'
-        }
-      },
+  } = await useAsyncData('latest', async () => {
+    return await catalog.listProducts({
+      fields: ['*', 'products.products_id.*', 'products.products_id.image.*', 'currency.currency_id.*', 'brands.brands_id.*', 'image.*'],
+      filter: { status: { _eq: 'published' } },
       sort: '-products_id.date_created',
-      limit: 10,
-    }))
+      limit: 10
+    })
   })
 </script>

package/app/components/catalog/product/productCard.vue

@@ -1,9 +1,12 @@
 <template>
   <div>
     <div class="border border-neutral-200 rounded-md hover:shadow-lg max-w-[300px]">
-      <div class="relative" v-if="product?.image?.length > 0">
-        <NuxtLink :to="`/product/${product?.id}`" class="block">
-          <img :src="`${$directus.url}assets/${product?.image?.filename_disk}`" :alt="product?.name"
+      <div class="relative" v-if="displayProduct?.image?.length > 0">
+        <NuxtLink :to="`/product/${displayProduct?.id}`" class="block">
+          <img v-if="$directus && displayProduct?.image?.filename_disk"
+            :src="`${$directus.url}assets/${displayProduct?.image?.filename_disk}`" :alt="displayProduct?.name"
+            class="block object-cover h-auto rounded-md aspect-square" width="300" height="300" />
+          <img v-else-if="displayProduct?.imageUrl" :src="displayProduct?.imageUrl" :alt="displayProduct?.name"
             class="block object-cover h-auto rounded-md aspect-square" width="300" height="300" />
         </NuxtLink>
         <v-btn variant="flat" size="sm" square
@@ -14,8 +17,8 @@
       </div>
 
       <div class="relative" v-else>
-        <NuxtLink :to="`/product/${product?.id}`" class="block">
-          <img src="~/assets/images/mbr-1920x1893.png" :alt="product?.name"
+        <NuxtLink :to="`/product/${displayProduct?.id}`" class="block">
+          <img src="~/assets/images/mbr-1920x1893.png" :alt="displayProduct?.name"
             class="block object-cover h-auto rounded-md aspect-square" width="300" height="300" />
         </NuxtLink>
         <v-btn variant="flat" size="sm" square
@@ -25,26 +28,26 @@
         </v-btn>
       </div>
       <div class="p-4 border-t border-neutral-200" style="background-color: white !important;">
-        <NuxtLink :to="`/product/${product?.id}`" variant="secondary" class="no-underline"> {{ product?.name }}
+        <NuxtLink :to="`/product/${displayProduct?.id}`" variant="secondary" class="no-underline"> {{ displayProduct?.name }}
         </NuxtLink>
         <div class="flex items-center pt-1">
-          <v-rating size="xs" active-color="warning" :model-value="product?.rating" :max="5" />
+          <v-rating size="xs" active-color="warning" :model-value="displayProduct?.rating" :max="5" />
 
-          <NuxtLink :to="`/product/${product?.id}`" variant="secondary" class="pl-1 no-underline">
-            <v-chip size="xs">{{ product?.rating }}</v-chip>
+          <NuxtLink :to="`/product/${displayProduct?.id}`" variant="secondary" class="pl-1 no-underline">
+            <v-chip size="xs">{{ displayProduct?.rating }}</v-chip>
           </NuxtLink>
         </div>
         <p class="block py-2 font-normal leading-5 typography-text-sm text-neutral-700"
-          v-if="product?.brands.length > 0">
+          v-if="displayProduct?.brands && displayProduct?.brands.length > 0">
           By:
         <div style="display: inline-block;" v-for="brands in product?.brands" :key="brands">
           <NuxtLink :to="`/brand/${brands?.brands_id?.slug}`">{{ brands?.brands_id?.name }}</NuxtLink></div>
         </p>
         <span class="block pb-2 font-bold typography-text-lg">
-          <div style="display: inline-block;" v-for="currency in product?.currency" :key="currency">
+          <div style="display: inline-block;" v-for="currency in displayProduct?.currency || []" :key="currency">
             {{ currency?.currency_id?.symbol }}
           </div>
-          {{ product?.price }}
+          {{ displayProduct?.price }}
         </span>
         <!--<v-btn size="sm">
           <template #prefix>
@@ -58,14 +61,45 @@
 </template>
 
 <script setup>
-    const {
-    $directus
-  } = useNuxtApp()
+    import { ref, onMounted, watch, computed } from 'vue'
+    import { useCatalogFallback } from '../../../composables/useCatalog'
+
+    const props = defineProps({
+      product: {
+        type: [Object, String],
+        required: true,
+      },
+    });
+
+    const productData = ref<any>(null)
+    const catalog = useCatalogFallback()
+
+    const displayProduct = computed(() => productData.value || props.product)
+
+    const resolveId = (p: any) => {
+      if (!p) return null
+      if (typeof p === 'string') return p
+      // directus nested shape product?.products_id or products_id?.id
+      return p.id || p.products_id?.id || p.products_id || null
+    }
+
+    async function load() {
+      const id = resolveId(props.product)
+      if (!id) return
+      // prefer adapter if available
+      if (catalog.adapter) {
+        // adapter may expose getProductById or getProductBySlug
+        try {
+          const p = await catalog.getProductById(id)
+          productData.value = p || (await catalog.getProductBySlug(id))
+        } catch (e) {
+          productData.value = await catalog.getProductBySlug(id)
+        }
+      } else {
+        productData.value = await catalog.getProductById(id)
+      }
+    }
 
-  const props = defineProps({
-    product: {
-      type: Object,
-      required: true,
-    },
-  });
+    onMounted(load)
+    watch(() => props.product, load)
 </script>

package/app/components/catalog/product/productDetails.vue

@@ -3,24 +3,27 @@
         <div class="container-fluid">
             <div class="row">
                 <div class="col-12 col-md-6">
-                    <div v-if="product?.image?.filename_disk">
-                        <img :src="`${$directus.url}assets/${product.image.filename_disk}`" :alt="product.name"
+                    <div v-if="displayProduct?.image?.filename_disk || displayProduct?.imageUrl">
+                        <img v-if="$directus && displayProduct?.image?.filename_disk"
+                            :src="`${$directus.url}assets/${displayProduct.image.filename_disk}`" :alt="displayProduct.name"
+                            class="w-full rounded-md" />
+                        <img v-else-if="displayProduct?.imageUrl" :src="displayProduct?.imageUrl" :alt="displayProduct?.name"
                             class="w-full rounded-md" />
                     </div>
                 </div>
                 <div class="col-12 col-md-6">
                     <div class="right">
-                        <h1 class="mb-1 font-bold typography-headline-4"><strong>{{ product?.name }}</strong></h1>
+                        <h1 class="mb-1 font-bold typography-headline-4"><strong>{{ displayProduct?.name }}</strong></h1>
                         <div class="price-line">
-                            <span class="block pb-2 font-bold typography-text-lg">
-                                {{ product?.price }}
+                                <span class="block pb-2 font-bold typography-text-lg">
+                                {{ displayProduct?.price }}
                             </span>
                         </div>
                         <p class="productRatings">
-                            <v-rating size="lg" :half-increment="true" :value="product?.ratings?.length || 0"
+                                <v-rating size="lg" :half-increment="true" :value="displayProduct?.ratings?.length || 0"
                                 :max="5" />
                             <NuxtLink to="#" variant="secondary" class="ratingReviews ml-2 text-xs text-neutral-500">
-                                {{ product?.comments?.comments_id?.length || 0 }} reviews
+                                {{ displayProduct?.comments?.comments_id?.length || 0 }} reviews
                             </NuxtLink>
                         </p>
                         <div class="py-4 mb-4 border-gray-200 border-y">
@@ -39,8 +42,8 @@
                                             <SfIconAdd />
                                         </v-btn>
                                     </div>
-                                    <p class="self-center mt-1 mb-4 text-xs text-neutral-500 xs:mb-0">
-                                        <strong class="text-neutral-900">{{ product?.stock }}</strong> in stock
+                                        <p class="self-center mt-1 mb-4 text-xs text-neutral-500 xs:mb-0">
+                                        <strong class="text-neutral-900">{{ displayProduct?.stock }}</strong> in stock
                                     </p>
                                 </div>
                                 <div class="col col-6">
@@ -50,10 +53,10 @@
                         </div>
                         <div class="mbr-section-btn row align-items-stretch justify-content-center">
                             <div class="col col-6">
-                                <createListBtn :lists="product?.id" />
+                                    <createListBtn :lists="displayProduct?.id" />
                             </div>
                         </div>
-                        <div class="price-line1" v-for="tag in product?.tags" :key="tag.id">
+                        <div class="price-line1" v-for="tag in displayProduct?.tags || []" :key="tag.id">
                             <p class="desc mbr-fonts-style display-7"><strong>Tags:</strong> <tagCard :tag="tag?.tag_id" />&nbsp;</p>
                         </div>
                     </div>
@@ -65,7 +68,8 @@
 
 <script setup lang="ts">
     import {
-        ref
+        ref,
+        computed
     } from 'vue';
     import {
         SfIconAdd,
@@ -77,9 +81,9 @@
     import {
         useCounter
     } from '@vueuse/core';
-    import tagCard from '#social/app/components/related/tag.vue';
+    import tagCard from '@/components/placeholders/Tag.vue';
     import addToCartBtn from '../../partials/addToCartBtn.vue';
-    import createListBtn from '#lists/app/components/partials/createListBtn.vue';
+    import createListBtn from '@/components/placeholders/CreateListBtn.vue';
 
     const {
         $directus,
@@ -110,6 +114,8 @@
         },
     });
 
+    const displayProduct = computed(() => props.product)
+
     const formatPrice = (amount: number) => {
         if (!amount) return '$0.00';
         return new Intl.NumberFormat('en-US', {

package/app/components/catalog/product/relatedproducts.vue

@@ -29,30 +29,15 @@
 
 <script setup>
 import productCard from './productCard.vue'
+import { useCatalogFallback } from '../../../composables/useCatalog'
 
   const model = ref(null)
-  const {
-    $directus,
-    $readItems
-  } = useNuxtApp()
+  const catalog = useCatalogFallback()
 
   const {
     data: related
-  } = await useAsyncData('related', () => {
-    return $directus.request($readItems('products', {
-      fields: ['*',
-        'products.products_id.*',
-        'products.products_id.image.*',
-        'currency.currency_id.*',
-        'brands.brands_id.*',
-        'image.*',
-      ],
-      limit: 10,
-      filter: {
-        status: {
-          _eq: "published"
-        }
-      }
-    }))
+  } = await useAsyncData('related', async () => {
+    // delegate to adapter when available, otherwise fallback to Directus via composable
+    return await catalog.listProducts({ limit: 10, filter: { status: { _eq: 'published' } } })
   })
 </script>

package/app/components/catalog/product/sizeOptions.vue

@@ -17,17 +17,12 @@ const sizes = ref([])
 const selectedSize = ref(null)
 
 
-const nuxtApp = useNuxtApp()
-const { $directus, $readItems } = nuxtApp
+const catalog = useCatalogFallback()
 
 const loadSizes = async () => {
     try {
-        const res = await $directus.request($readItems('attributes', {
-            filter: {
-                attribute_code: { _eq: 'size' }
-            },
-            sort: ['id']
-        }))
+        // adapter may expose attributes; composable falls back to Directus
+        const res = await catalog.listAttributes({ filter: { attribute_code: { _eq: 'size' } }, sort: ['id'] })
 
         const attr = (res && res[0]) || null
         const opts = attr?.options || []

package/app/components/catalog/shops/relatedstores.vue

@@ -24,29 +24,14 @@
 </template>
 
 <script setup>
-    import {
-        ref,
-        onMounted
-    } from 'vue'
-    import store from '~/components/catalog/product/stores.vue'
+    import { ref } from 'vue'
+    import store from './stores.vue'
+    import { useContentFallback } from '../../../composables/useContent'
 
     const model = ref(null)
-    const {
-        $directus,
-        $readItems,
-    } = useNuxtApp()
+    const content = useContentFallback()
 
-    const {
-        user
-    } = useSupabaseAuth()
-
-    const {
-        data: shops
-    } = await useAsyncData('shops', () => {
-        return $directus.request($readItems('shops', {
-            fields: ['*', {
-                '*': ['*']
-            }]
-        }))
+    const { data: shops } = await useAsyncData('shops', () => {
+        return content.listShops({ fields: ['*', { '*': ['*'] }] })
     })
 </script>