@mframework/layer-commerce 0.0.3

package/app/pages/product/[...id].vue

@@ -0,0 +1,309 @@
+<template>
+  <div class="contentPage">
+    <div v-if="loading">Loading...</div>
+    <div v-else-if="error">Error: {{ error.message }}</div>
+    <div v-else-if="product">
+      <v-row>
+        <v-col cols="12">
+          <v-row>
+            <v-col cols="12">
+              <div>
+                <productDetails :productDetails="product" />
+              </div>
+            </v-col>
+          </v-row>
+        </v-col>
+
+        <v-col cols="12">
+          <v-card elevation="0">
+            <v-tabs v-model="tab" :bg-color="productbar?.color">
+              <div v-for="(menu, index) in productbar?.menus" :key="index">
+                <v-tab v-if="menu?.active === 'Active'" :value="menu?.value">{{ menu?.name }}</v-tab>
+              </div>
+              <!-- <v-tab value="four">FAQS</v-tab>
+            <v-tab value="five">Compare</v-tab>-->
+              <v-tab value="six" v-if="product?.type === 'Grouped Product'">Products</v-tab>
+              <v-tab value="seven" v-if="product?.type === 'Bundled Product'">Products</v-tab>
+              <v-tab value="eight" v-if="product?.type === 'Configurable Product'">Products</v-tab>
+              <v-tab value="nine" v-if="product?.product_types?.product_types_id?.name === 'Gift Card'">Redeem</v-tab>
+            </v-tabs>
+
+            <v-card-text>
+              <v-window v-model="tab">
+                <!--Product Description-->
+                <v-window-item :value="productbar?.menus[0]?.value">
+                  <v-card variant="text">
+                    <v-card-text style="font-size: 20px;" v-dompurify-html="product?.content"></v-card-text>
+                  </v-card>
+                </v-window-item>
+
+                <!--Product Reviews-->
+                <v-window-item :value="productbar?.menus[1]?.value">
+                  <!---<div v-if="product?.reviews?.items?.length > 0">
+                  <div v-for="(review, index) in product?.reviews?.items" :key="index">
+                    <productReviews :review="review" />
+                  </div>
+                </div>-->
+                  <comments :productName="product?.name"
+                    :productImage="`${$directus.url}/assets/${product?.image?.filename_disk}`"
+                    :productSku="product?.id" />
+                </v-window-item>
+
+                <!--Product Specifications-->
+                <v-window-item :value="productbar?.menus[2]?.value">
+                  <productSpecs :product="product" />
+                </v-window-item>
+
+                <!--Product FAQs-->
+                <v-window-item :value="productbar?.menus[3]?.value">
+                  <v-expansion-panels v-for="(faqs, index) in product?.faqs?.faqs_id" :key="index">
+                    <v-expansion-panel :title="faqs.question" :text="faqs.answer">
+                    </v-expansion-panel>
+                  </v-expansion-panels>
+                </v-window-item>
+
+                <!--Product Compare List
+                <v-window-item :value="productbar?.menus[4]?.value">
+                  <productCompare />
+                </v-window-item>-->
+
+                <!-- Group Products List -->
+                <v-window-item value="six">
+                  <v-row v-if="product?.type === 'Grouped Product'">
+                    <v-col cols="4" v-for="item in groupedProducts?.products" :key="item">
+                      <productCard :product="item?.products_id" />
+                    </v-col>
+                  </v-row>
+
+                  <v-row v-else>
+                    <v-col cols="12">
+                      <p>No products in this group.</p>
+                    </v-col>
+                  </v-row>
+                </v-window-item>
+
+                <!--Bundle Products List-->
+                <v-window-item value="seven">
+                  <v-row v-if="product?.type === 'Bundled Product'">
+                    <v-col cols="4" v-for="(product, index) in bundledProducts?.products" :key="index">
+                      <productCard :product="product?.products_id" />
+                    </v-col>
+                  </v-row>
+
+                  <v-row v-else>
+                    <v-col cols="12">
+                      <p>No products in this bundle.</p>
+                    </v-col>
+                  </v-row>
+                </v-window-item>
+
+                <!--Configurable Products List-->
+                <v-window-item value="eight">
+                  <v-row v-if="product?.type === 'Configurable Product'">
+                    <v-col cols="4" v-for="(product, index) in configurableProducts?.products" :key="index">
+                      <productCard :product="product?.products_id" />
+                    </v-col>
+                  </v-row>
+
+                  <v-row v-else>
+                    <v-col cols="12">
+                      <p>No products in this configuration.</p>
+                    </v-col>
+                  </v-row>
+                </v-window-item>
+
+                <!--Gift Cards Redeem Information-->
+                <v-window-item value="nine">
+                  <v-row v-if="product?.product_types?.product_types_id?.name === 'Gift Card'">
+                    <v-col cols="12">
+                      <giftCard :gift="product" />
+                    </v-col>
+                  </v-row>
+
+                  <v-row v-else>
+                    <v-col cols="12">
+                      <p>Not a valid Gift Card.</p>
+                    </v-col>
+                  </v-row>
+                </v-window-item>
+              </v-window>
+            </v-card-text>
+          </v-card>
+        </v-col>
+
+        <v-col cols="12">
+          <!--Crossell Products-->
+          <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
+            <h4>This product goes great together with...</h4>
+            <!--Crossell Products-->
+            <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+              <v-slide-group-item v-for="(crossSell, index) in product?.cross_sell_products" :key="index"
+                v-slot="{ isSelected, toggle, selectedClass }">
+                <productCard :product="crossSell?.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>
+
+          <!--Related Products-->
+          <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
+            <h4>Related Products</h4>
+            <div v-if="product?.related_products?.length > 0">
+              <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+                <v-slide-group-item v-for="(relatedProduct, index) in product?.related_products" :key="index"
+                  v-slot="{ isSelected, toggle, selectedClass }">
+                  <productCard :product="relatedProduct?.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>
+            </div>
+            <div v-else>
+              <p>No related products available.</p>
+            </div>
+          </v-sheet>
+
+          <!--Product featured in Shops-->
+          <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
+            <h4>Product featured in these Shops</h4>
+            <div v-if="product?.shops?.length > 0">
+              <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+                <v-slide-group-item v-for="(shops, index) in product?.shops" :key="index"
+                  v-slot="{ isSelected, toggle, selectedClass }">
+                  <shop :shop="shops?.shops_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>
+            </div>
+            <div v-else>
+              <p>Not featured in any shops.</p>
+            </div>
+          </v-sheet>
+
+          <!--Product featured in Vibez-->
+          <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
+            <h4>Product featured in these Vibez</h4>
+            <div v-if="product?.shorts?.length > 0">
+              <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+                <v-slide-group-item v-for="(shorts, index) in product?.shorts" :key="index"
+                  v-slot="{ isSelected, toggle, selectedClass }">
+                  <short :short="shorts?.shorts_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>
+            </div>
+            <div v-else>
+              <p>Not featured in any shorts.</p>
+            </div>
+          </v-sheet>
+
+          <!--Product featured in Spaces-->
+          <v-sheet class="mx-auto sliderProducts row align-items-stretch items-row justify-content-center">
+            <h4>Product featured in these Spaces</h4>
+            <div v-if="product?.spaces?.length > 0">
+              <v-slide-group v-model="model" class="pa-4" selected-class="bg-success" show-arrows>
+                <v-slide-group-item v-for="(spaces, index) in product?.spaces" :key="index"
+                  v-slot="{ isSelected, toggle, selectedClass }">
+                  <spaces :space="spaces?.spaces_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>
+            </div>
+            <div v-else>
+              <p>Not featured in any spaces.</p>
+            </div>
+          </v-sheet>
+        </v-col>
+      </v-row>
+    </div>
+    <div v-else>No product found</div>
+  </div>
+</template>
+
+<script setup>
+  import {
+    ref,
+    computed,
+    watch
+  } from 'vue';
+  import comments from '@/components/placeholders/Comments.vue'
+
+  import productDetails from '../../components/catalog/product/productDetails.vue'
+  import productSpecs from '../../components/catalog/product/productSpecs.vue'
+  import productCard from '../../components/catalog/product/productCard.vue'
+  import giftCard from '../../components/catalog/product/giftCard.vue'
+  import short from '@/components/placeholders/Short.vue'
+  import spaces from '@/components/placeholders/Space.vue'
+  import shop from '../../components/catalog/shops/stores.vue'
+
+  const tab = ref(null);
+  const model = ref(null);
+  const error = ref(null);
+  const loading = ref(false)
+
+  // Product query
+  const route = useRoute()
+
+  const { $commerce } = useNuxtApp()
+
+  const { data: product } = await useAsyncData('product', async () => {
+    return await $commerce.getProduct(route.params.id)
+  })
+
+  // Grouped/bundled products: Magento provider currently doesn't expose
+  // these specific relations via the generic interface. Fetch a small page
+  // of products as a fallback so the UI can render product cards.
+  const { data: groupedProducts } = await useAsyncData('groupedProducts', async () => {
+    return await $commerce.getProducts({ pageSize: 6 })
+  })
+
+  const { data: bundledProducts } = await useAsyncData('bundledProducts', async () => {
+    return await $commerce.getProducts({ pageSize: 6 })
+  })
+
+  const {
+    data: productBlocks
+  } = await useAsyncData('productBlocks', () => {
+    return $directus.request($readItem('page_blocks', '8', {
+      fields: ['*', 'media.directus_files_id.filename_disk', 'content.*'],
+    }))
+  })
+
+  const {
+    data: productbar
+  } = await useAsyncData('productbar', () => {
+    return $directus.request($readItem('navigation', '52'))
+  })
+
+  useHead({
+    title: computed(() => product?.value?.name || 'Product Page')
+  })
+
+  import { addViewed } from '../../composables/products/useRecentlyViewed'
+
+  watch(product, (newVal) => {
+    if (process.client && newVal?.id) {
+      addViewed(newVal.id)
+    }
+  }, { immediate: true })
+</script>

package/app/pages/product/showcases/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="contentPage">
+    <v-card elevation="0">
+      <v-toolbar :title="showcasebar?.name" :color="showcasebar?.color"></v-toolbar>
+
+      <v-tabs v-model="tab" bg-color="purple">
+        <div v-for="(menu, index) in showcasebar?.menus" :key="index">
+          <v-tab v-if="menu?.active === 'Active'" :value="menu?.value">{{ menu?.name }}</v-tab>
+        </div>
+      </v-tabs>
+
+      <v-card-text>
+        <v-tabs-window v-model="tab">
+          <!--Bundle Products List-->
+          <v-window-item :value="showcasebar?.menus[0]?.value">
+            <v-row>
+              <v-col cols="4" v-for="(product, index) in bundledProducts" :key="index">
+                <productCard :product="product" />
+              </v-col>
+            </v-row>
+          </v-window-item>
+
+          <!-- Group Products List -->
+          <v-window-item :value="showcasebar?.menus[1]?.value">
+            <v-row>
+              <v-col cols="4" v-for="item in groupedProducts" :key="item">
+                <productCard :product="item" />
+              </v-col>
+            </v-row>
+          </v-window-item>
+
+          <!--Bundle Products List-->
+          <v-window-item :value="showcasebar?.menus[2]?.value">
+            <v-row>
+              <v-col cols="4" v-for="(product, index) in subscriptions" :key="index">
+                <productCard :product="product" />
+              </v-col>
+            </v-row>
+          </v-window-item>
+        </v-tabs-window>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+  import {
+    ref,
+    computed
+  } from 'vue'
+  import productCard from '~/components/catalog/product/productCard.vue'
+
+  const tab = ref(null);
+
+  const { $commerce } = useNuxtApp()
+
+  const { data: groupedProducts } = await useAsyncData('groupedProducts', async () => {
+    return await $commerce.getProducts({ pageSize: 12 })
+  })
+
+  const { data: bundledProducts } = await useAsyncData('bundledProducts', async () => {
+    return await $commerce.getProducts({ pageSize: 12 })
+  })
+
+  const { data: subscriptions } = await useAsyncData('subscriptions', async () => {
+    return await $commerce.getProducts({ pageSize: 12 })
+  })
+
+  const {
+    data: productBlocks
+  } = await useAsyncData('productBlocks', () => {
+    return $directus.request($readItem('page_blocks', '8', {
+      fields: ['*', 'media.directus_files_id.filename_disk', 'content.*'],
+    }))
+  })
+
+  const {
+    data: showcasebar
+  } = await useAsyncData('showcasebar', () => {
+    return $directus.request($readItem('navigation', '54'))
+  })
+
+  useHead({
+    title: 'Showcases',
+  });
+</script>

package/app/pages/shipment/[...id].vue

@@ -0,0 +1,176 @@
+<template>
+    <div>
+        <!--<profilebar />-->
+        <section data-bs-version="5.1" class="features07 scalem5 cid-uhB4hw1yxB mbr-fullscreen" id="features07-9l">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12 col-lg-10 card">
+                        <div class="title-wrapper">
+                            <h2 class="mbr-section-title mbr-fonts-style display-5">
+                                View Shipment</h2>
+                        </div>
+                    </div>
+                    <div class="col-12 col-lg-8">
+                        <div class="items-wrapper">
+                            <div class="item features-without-image item-mb">
+                                <div class="item-wrapper">
+                                    <div class="card-box">
+                                        <div class="icon-wrapper">
+                                            <span class="mbr-iconfont mobi-mbri-growing-chart mobi-mbri"></span>
+                                        </div>
+                                        <h4 class="card-title mbr-fonts-style display-7">
+                                            Order Information
+                                        </h4>
+                                        <a class="card-text mbr-fonts-style display-7" :href="`/order/${shipment?.order_id}`">Order #:
+                                            {{ shipment?.order_id }}</a>
+                                        <p class="card-text mbr-fonts-style display-7">Order Date:
+                                            {{ new Date(shipment?.created_at).toLocaleDateString() }}</p>
+                                        <p class="card-text mbr-fonts-style display-7">Order Status:
+                                            {{ shipment?.shipment_status }}</p>
+                                        <p class="card-text mbr-fonts-style display-7">Purchased From: {{ shipment?.store_id }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="item features-without-image item-mb">
+                                <div class="item-wrapper">
+                                    <div class="card-box">
+                                        <div class="icon-wrapper">
+                                            <span class="mbr-iconfont mobi-mbri-globe-2 mobi-mbri"></span>
+                                        </div>
+                                        <h4 class="card-title mbr-fonts-style display-7">
+                                            Account Information
+                                        </h4>
+                                        <p class="card-text mbr-fonts-style display-7">Customer Name: {{ shipment?.customer_id }}</p>
+                                        <p class="card-text mbr-fonts-style display-7">Email: {{ shipment?.email_sent }}</p>
+                                        <p class="card-text mbr-fonts-style display-7">Customer Group: </p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="item features-without-image item-mb">
+                                <div class="item-wrapper">
+                                    <div class="card-box">
+                                        <div class="icon-wrapper">
+                                            <span class="mbr-iconfont mobi-mbri-delivery mobi-mbri"></span>
+                                        </div>
+                                        <h4 class="card-title mbr-fonts-style display-7">
+                                            Billing Address
+                                        </h4>
+                                        <p class="card-text mbr-fonts-style display-7">{{ shipment?.billing_address_id }}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="item features-without-image item-mb">
+                                <div class="item-wrapper">
+                                    <div class="card-box">
+                                        <div class="icon-wrapper">
+                                            <span class="mbr-iconfont mobi-mbri-refresh mobi-mbri"></span>
+                                        </div>
+                                        <h4 class="card-title mbr-fonts-style display-7">
+                                            Shipping Address
+                                        </h4>
+                                        <p class="card-text mbr-fonts-style display-7">{{ shipment?.shipping_address_id }}
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="item features-without-image item-mb">
+                                <div class="item-wrapper">
+                                    <div class="card-box">
+                                        <div class="icon-wrapper">
+                                            <span class="mbr-iconfont mobi-mbri-responsive-2 mobi-mbri"></span>
+                                        </div>
+                                        <h4 class="card-title mbr-fonts-style display-7">
+                                            Payment Information
+                                        </h4>
+                                        <p class="card-text mbr-fonts-style display-7">The order was placed using
+                                            {{ shipment?.order_currency_code }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="item features-without-image item-mb">
+                                <div class="item-wrapper">
+                                    <div class="card-box">
+                                        <div class="icon-wrapper">
+                                            <span class="mbr-iconfont mobi-mbri-cash mobi-mbri"></span>
+                                        </div>
+                                        <h4 class="card-title mbr-fonts-style display-7">
+                                            Shipping and Tracking Information
+                                        </h4>
+                                        <p class="card-text mbr-fonts-style display-7">Carrier: {{ shipment?.tracks?.carrier_code }}</p>
+                                        <p class="card-text mbr-fonts-style display-7">Title: {{ shipment?.tracks?.title }}</p>
+                                        <p class="card-text mbr-fonts-style display-7">Weight: {{ shipment?.tracks?.weight }}</p>
+                                        <p class="card-text mbr-fonts-style display-7">Description: {{ shipment?.tracks?.description }}</p>
+                                        <p class="card-text mbr-fonts-style display-7">Tracking #: {{ shipment?.tracks?.track_number }}</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+            <img src="../../assets/images/background2.jpg" alt="Shipments">
+        </section>
+
+        <v-card title="Shipment Items" flat>
+            <div class="container">
+                <v-data-table :headers="headers" :items="shipment?.items" :items-per-page="5" class="elevation-1">
+                    <template v-slot:[`item.name`]="{ item }">
+                        <strong>{{ item.name }}</strong>
+                    </template>
+                    <template v-slot:[`item.qty`]="{ item }">
+                        {{ item.qty }}
+                    </template>
+                </v-data-table>
+            </div>
+        </v-card>
+    </div>
+</template>
+
+<script>
+    export default {
+        data: () => ({
+            headers: [{
+                    text: 'Product',
+                    value: 'name'
+                },
+                {
+                    text: 'Quantity',
+                    value: 'qty'
+                }
+            ],
+        }),
+    }
+</script>
+
+<script setup>
+    const route = useRoute();
+    
+    const {
+        $directus,
+        $readItem
+    } = useNuxtApp()
+    const user = useSupabaseUser()
+
+    const {
+        data: shipment
+    } = await useAsyncData('shipment', () => {
+        return $directus.request($readItem('shipments', route.params.id, {
+            filter: {
+                user: {
+                    _eq: `${user?.id}`
+                }
+            },
+            limit: 1
+        })).then(response => response?.[0])
+    })
+
+    useHead({
+        title: 'Shipment' + shipment?.value?.id || 'Shipment Page',
+    })
+
+    definePageMeta({
+        //middleware: ['auth-logged-in'],
+    })
+</script>