@mframework/layer-commerce 0.0.5 → 0.0.8

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

@@ -0,0 +1,58 @@
+<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

@@ -0,0 +1,61 @@
+<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'
+
+  const model = ref(null)
+  const {
+    $directus,
+    $readItems
+  } = useNuxtApp()
+
+  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.*',
+      ],
+      limit: 10,
+      filter: {
+        price: {
+          _lte: "20.00"
+        },
+        status: {
+          _eq: "published"
+        }
+      }
+    }))
+  })
+</script>

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

@@ -0,0 +1,58 @@
+<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 { $directus, $readItems, $commerce } = useNuxtApp()
+
+  const { data: exclusives } = await useAsyncData('exclusives', async () => {
+    const refs = await $directus.request($readItems('products', {
+      fields: ['id', 'sku'],
+      limit: 10,
+      filter: {
+        status: { _eq: 'published' },
+        departments: {
+          departments_id: { name: { _eq: 'Exclusives' } }
+        }
+      }
+    }))
+
+    const products = await Promise.all(refs.map(async (r) => {
+      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

@@ -0,0 +1,69 @@
+<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);
+  const {
+    $directus,
+    $readItems
+  } = useNuxtApp()
+
+  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.*',
+      ],
+      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

@@ -0,0 +1,63 @@
+<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

@@ -0,0 +1,58 @@
+<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);
+  const {
+    $directus,
+    $readItems
+  } = useNuxtApp()
+
+  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'
+        }
+      },
+      sort: '-products_id.date_created',
+      limit: 10,
+    }))
+  })
+</script>

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

@@ -0,0 +1,71 @@
+<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"
+            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/${product?.id}`" class="block">
+          <img src="~/assets/images/mbr-1920x1893.png" :alt="product?.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/${product?.id}`" variant="secondary" class="no-underline"> {{ product?.name }}
+        </NuxtLink>
+        <div class="flex items-center pt-1">
+          <v-rating size="xs" active-color="warning" :model-value="product?.rating" :max="5" />
+
+          <NuxtLink :to="`/product/${product?.id}`" variant="secondary" class="pl-1 no-underline">
+            <v-chip size="xs">{{ product?.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">
+          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">
+            {{ currency?.currency_id?.symbol }}
+          </div>
+          {{ product?.price }}
+        </span>
+        <!--<v-btn size="sm">
+          <template #prefix>
+            <SfIconShoppingCart size="sm" />
+          </template>
+          Add to cart
+        </v-btn>-->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+    const {
+    $directus
+  } = useNuxtApp()
+
+  const props = defineProps({
+    product: {
+      type: Object,
+      required: true,
+    },
+  });
+</script>

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

@@ -0,0 +1,60 @@
+<!-- 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>