@meeovi/layer-commerce 1.0.6 → 1.0.7

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

@@ -1,58 +0,0 @@
-<template>
-    <v-row>
-        <v-col cols="12">
-            <h6>Color</h6>
-        </v-col>
-
-        <v-col cols="12">
-            <v-container>
-                <v-row>
-                    <v-col cols="auto" v-for="color in colors" :key="color.id">
-                        <v-btn density="compact" :style="`background-color: ${color.value || color.hex || color.name}`" :title="color.name"
-                            @click="selectColor(color)">
-                        </v-btn>
-                    </v-col>
-                </v-row>
-            </v-container>
-        </v-col>
-    </v-row>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-const emit = defineEmits(['color-selected'])
-const colors = ref([])
-const selectedColor = ref(null)
-
-const nuxtApp = useNuxtApp()
-const { $directus, $readItems } = nuxtApp
-
-const loadColors = async () => {
-    try {
-        const res = await $directus.request($readItems('attributes', {
-            filter: {
-                attribute_code: { _eq: 'color' }
-            },
-            sort: ['id']
-        }))
-
-        const attr = (res && res[0]) || null
-        const opts = attr?.options || []
-        // options may only have `name`; normalize to objects with id and value
-        colors.value = opts.map((o, i) => ({ id: `${attr?.id || 'color'}-${i}`, name: o.name, value: o.name }))
-    } catch (e) {
-        // eslint-disable-next-line no-console
-        console.warn('Failed to load color attributes', e)
-        colors.value = []
-    }
-}
-
-const selectColor = (color) => {
-    selectedColor.value = color.value ?? color.id
-    emit('color-selected', color)
-}
-
-onMounted(() => {
-    loadColors()
-})
-</script>

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

@@ -1,46 +0,0 @@
-<template>
-  <div>
-    <section data-bs-version="5.1" class="mbr-section features20 cid-txNnCwzel4" id="features20-4t"
-      data-sortbtn="btn-primary">
-      <div class="container-fluid">
-        <h2 class="mbr-section-title align-left mbr-fonts-style display-5">
-          Deals</h2>
-        <div class="underline align-left pb-3">
-          <div class="line"></div>
-        </div>
-        <v-sheet class="mx-auto">
-          <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
-            <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }"
-              v-for="(products, index) in deals" :key="index">
-              <productCard :product="products" :class="['ma-4', selectedClass]" @click="toggle" />
-
-              <div class="d-flex fill-height align-center justify-center">
-                <v-scale-transition>
-                  <v-icon v-if="isSelected" color="white" icon="mdi-close-circle-outline" size="48"></v-icon>
-                </v-scale-transition>
-              </div>
-            </v-slide-group-item>
-          </v-slide-group>
-        </v-sheet>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script setup>
-import productCard from './productCard.vue'
-import { useCatalogFallback } from '../../../composables/useCatalog'
-
-  const model = ref(null)
-  const catalog = useCatalogFallback()
-
-  const {
-    data: deals
-  } = 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' } }
-    })
-  })
-</script>

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

@@ -1,56 +0,0 @@
-<template>
-  <div>
-    <section data-bs-version="5.1" class="mbr-section features20 cid-txNnCwzel4" id="features20-4t"
-      data-sortbtn="btn-primary">
-      <div class="container-fluid">
-        <h2 class="mbr-section-title align-left mbr-fonts-style display-5">
-          Exclusives</h2>
-        <div class="underline align-left pb-3">
-          <div class="line"></div>
-        </div>
-        <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
-          <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
-            <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }" v-for="(products, index) in exclusives"
-              :key="index">
-              <productCard :product="products?.products_id" :class="['ma-4', selectedClass]" @click="toggle" />
-
-              <div class="d-flex fill-height align-center justify-center">
-                <v-scale-transition>
-                  <v-icon v-if="isSelected" color="white" icon="mdi-close-circle-outline" size="48"></v-icon>
-                </v-scale-transition>
-              </div>
-            </v-slide-group-item>
-          </v-slide-group>
-        </v-sheet>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script setup>
-  import productCard from './productCard.vue'
-
-  const model = ref(null);
-  const { $commerce } = useNuxtApp()
-  import { useCatalogFallback } from '../../../composables/useCatalog'
-  const catalog = useCatalogFallback()
-
-  const { data: exclusives } = await useAsyncData('exclusives', async () => {
-    // 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' } } } }
-    })
-
-    const products = await Promise.all(refs.map(async (r: any) => {
-      try {
-        return await $commerce.getProduct(String(r.sku || r.id))
-      } catch (e) {
-        return null
-      }
-    }))
-
-    return products.filter(Boolean)
-  })
-</script>

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

@@ -1,57 +0,0 @@
-<template>
-  <div>
-    <section data-bs-version="5.1" class="mbr-section features20 cid-txNnCwzel4" id="features20-4t"
-      data-sortbtn="btn-primary">
-      <div class="container-fluid">
-        <h2 class="mbr-section-title align-left mbr-fonts-style display-5">
-          Featured Products</h2>
-        <div class="underline align-left pb-3">
-          <div class="line"></div>
-        </div>
-        <v-sheet class="mx-auto">
-          <v-slide-group v-model="model" class="pa-4" show-arrows>
-            <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }"
-              v-for="(products, index) in featured" :key="index">
-              <productCard :product="products" :class="['ma-4', selectedClass]" @click="toggle" />
-
-              <div class="d-flex fill-height align-center justify-center">
-                <v-scale-transition>
-                  <v-icon v-if="isSelected" color="white" icon="mdi-close-circle-outline" size="48"></v-icon>
-                </v-scale-transition>
-              </div>
-            </v-slide-group-item>
-          </v-slide-group>
-        </v-sheet>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script setup>
-  import productCard from './productCard.vue'
-
-  const model = ref(null);
-  import { useCatalogFallback } from '../../../composables/useCatalog'
-  const catalog = useCatalogFallback()
-
-  const {
-    data: featured
-  } = 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' }
-              }
-            }
-          }
-        },
-        status: { _eq: 'published' }
-      }
-    })
-  })
-</script>

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

@@ -1,63 +0,0 @@
-<template>
-  <div>
-    <!---->
-    <v-row class="giftCardSection">
-      <v-col cols="12">
-        <h2>{{ callouts?.menus?.[3]?.name }}</h2>
-      </v-col>
-
-      <v-col cols="12">
-        <v-row>
-          <v-col cols="6"><v-text-field class="giftcardfield"
-              :label="callouts?.menus?.[4]?.name"></v-text-field></v-col>
-          <v-col cols="6"><v-btn class="giftcardbtn" color="orange" size="x-large" type="submit"
-              variant="elevated">{{ callouts?.menus?.[5]?.name }}</v-btn></v-col>
-        </v-row>
-
-        <v-expansion-panels>
-          <v-expansion-panel :title="callouts?.menus?.[6]?.name" :text="callouts?.menus?.[6]?.description">
-          </v-expansion-panel>
-        </v-expansion-panels>
-      </v-col>
-
-      <v-col cols="12">
-        <h2>{{ callouts?.menus?.[7]?.name }} {{ gift?.amount }}</h2>
-        <NuxtLink :to="`/commerce/giftcard/${gift?.id}`">{{ callouts?.menus?.[8]?.name }}</NuxtLink>
-      </v-col>
-      <v-divider></v-divider>
-
-      <v-col cols="12">
-        <p></p>
-      </v-col>
-      <v-divider></v-divider>
-    </v-row>
-  </div>
-</template>
-
-<script setup>
-  const props = defineProps({
-    gift: {
-      type: String,
-      required: true,
-    },
-  });
-
-  const {
-    $directus,
-    $readItem
-  } = useNuxtApp()
-
-  const {
-    data: callouts
-  } = await useAsyncData('callouts', () => {
-    return $directus.request($readItem('callouts', '4'))
-  })
-
-  useHead({
-    title: 'Redeem an Meeovi Gift Card'
-  })
-
-  definePageMeta({
-    middleware: ['authenticated'],
-  })
-</script>

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

@@ -1,46 +0,0 @@
-<template>
-  <div>
-    <section data-bs-version="5.1" class="mbr-section features20 cid-txNnCwzel4" id="features20-4t"
-      data-sortbtn="btn-primary">
-      <div class="container-fluid">
-        <h2 class="mbr-section-title align-left mbr-fonts-style display-5">
-          Latest Products</h2>
-        <div class="underline align-left pb-3">
-          <div class="line"></div>
-        </div>
-        <v-sheet class="mx-auto">
-          <v-slide-group v-model="model" class="pa-4" show-arrows>
-            <v-slide-group-item v-slot="{ isSelected, toggle, selectedClass }" v-for="(products, index) in latest" :key="index">
-              <productCard  :product="products" :class="['ma-4', selectedClass]" @click="toggle" />
-
-              <div class="d-flex fill-height align-center justify-center">
-                <v-scale-transition>
-                  <v-icon v-if="isSelected" color="white" icon="mdi-close-circle-outline" size="48"></v-icon>
-                </v-scale-transition>
-              </div>
-            </v-slide-group-item>
-          </v-slide-group>
-        </v-sheet>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script setup>
-  import productCard from './productCard.vue'
-
-  const model = ref(null);
-  import { useCatalogFallback } from '../../../composables/useCatalog'
-  const catalog = useCatalogFallback()
-
-  const {
-    data: latest
-  } = 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
-    })
-  })
-</script>

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

@@ -1,105 +0,0 @@
-<template>
-  <div>
-    <div class="border border-neutral-200 rounded-md hover:shadow-lg max-w-[300px]">
-      <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
-          class="absolute bottom-0 right-0 mr-2 mb-2 bg-white ring-1 ring-inset ring-neutral-200 rounded-full!"
-          aria-label="Add to wishlist">
-          <v-icon icon="fas fa-heart" size="sm"></v-icon>
-        </v-btn>
-      </div>
-
-      <div class="relative" v-else>
-        <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
-          class="absolute bottom-0 right-0 mr-2 mb-2 bg-white ring-1 ring-inset ring-neutral-200 rounded-full!"
-          aria-label="Add to wishlist">
-          <v-icon icon="fas fa-heart" size="sm"></v-icon>
-        </v-btn>
-      </div>
-      <div class="p-4 border-t border-neutral-200" style="background-color: white !important;">
-        <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="displayProduct?.rating" :max="5" />
-
-          <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="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 displayProduct?.currency || []" :key="currency">
-            {{ currency?.currency_id?.symbol }}
-          </div>
-          {{ displayProduct?.price }}
-        </span>
-        <!--<v-btn size="sm">
-          <template #prefix>
-            <SfIconShoppingCart size="sm" />
-          </template>
-          Add to cart
-        </v-btn>-->
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-    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)
-      }
-    }
-
-    onMounted(load)
-    watch(() => props.product, load)
-</script>

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

@@ -1,60 +0,0 @@
-<!-- pages/compare.vue -->
-<template>
-  <div class="product-compare-page">
-    <productCard 
-      :is-loading="isLoading"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useCompareStore } from '~/stores/compare'
-import { useMetaStore } from '~/stores/meta'
-import { useNavigationStore } from '~/stores/navigation'
-import { useBreadcrumbsStore } from '~/stores/breadcrumbs'
-
-const router = useRouter()
-const compareStore = useCompareStore()
-const metaStore = useMetaStore()
-const navigationStore = useNavigationStore()
-const breadcrumbsStore = useBreadcrumbsStore()
-
-const isLoading = computed(() => compareStore.getIsLoading)
-
-// Methods converted from the container class
-const updateMeta = () => {
-  metaStore.setMeta({
-    title: 'Product Compare',
-    description: 'Compare products and find the best one for you.',
-    keywords: 'product comparison, compare products, find the best deal'
-  })
-}
-
-breadcrumbsStore.updateBreadcrumbs = () => {
-  const breadcrumbs = [{
-    url: '/compare',
-    name: 'Product Compare'
-  }]
-  breadcrumbsStore.updateBreadcrumbs(breadcrumbs)
-}
-
-const updateHeaderState = () => {
-  navigationStore.addNavigationItem({
-    name: 'PRODUCT_COMPARE',
-    title: 'Compare',
-    onBack: () => router.back()
-  })
-}
-
-// Lifecycle hook (equivalent to componentDidMount)
-onMounted(() => {
-  // Scroll to top
-  window.scrollTo({ top: 0 })
-  
-  updateMeta()
-  updateBreadcrumbs()
-  updateHeaderState()
-})
-</script>