Merge pull request #177 from sanskar345/preorder/#176

Implemented: replaced the usage of Image component with ShopifyImg component
hotwax · Sep 12, 2023 · f25a4de · f25a4de
2 parents 89cbb19 + 3bff139
commit f25a4de
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 17 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -47,6 +47,7 @@ const app = createApp(App)
     actions: permissionActions
   })
   .use(dxpComponents, {
+    defaultImgUrl: require("@/assets/images/defaultImage.png"),
     login,
     logout,
     loader,

diff --git a/src/views/catalog-product-details.vue b/src/views/catalog-product-details.vue
@@ -12,7 +12,7 @@
       <div class="header">
         <div class="product-image">
           <ion-skeleton-text v-if="!Object.keys(currentVariant).length" animated />
-          <Image v-else :src="currentVariant.mainImageUrl" />
+          <ShopifyImg v-else :src="currentVariant.mainImageUrl" />
         </div>
 
         <div class="product-info" v-if="Object.keys(currentVariant).length">
@@ -397,7 +397,7 @@ import {
   shirtOutline
 } from "ionicons/icons";
 import { useStore } from "@/store";
-import Image from '@/components/Image.vue';
+import { ShopifyImg } from "@hotwax/dxp-components";
 import { mapGetters } from "vuex";
 import { showToast, getFeature, hasError } from "@/utils";
 import { translate } from "@/i18n";
@@ -416,7 +416,7 @@ import { Actions, hasPermission } from '@/authorization'
 export default defineComponent({
   name: "catalog-product-details",
   components: {
-    Image,
+    ShopifyImg,
     IonButtons,
     IonBackButton,
     IonCard,

diff --git a/src/views/catalog.vue b/src/views/catalog.vue
@@ -49,7 +49,7 @@
         <div class="list-item" v-for="product in products" :key="product.productId" @click="viewProduct(product)">
           <ion-item lines="none" class="tablet">
             <ion-thumbnail slot="start">
-              <Image :src="product.mainImageUrl" />
+              <ShopifyImg :src="product.mainImageUrl" size="small"/>
             </ion-thumbnail>
             <ion-label class="ion-text-wrap">
               <h5>{{ product.parentProductName }}</h5>
@@ -109,7 +109,7 @@ import {
 import { defineComponent } from 'vue';
 import { useRouter } from "vue-router";
 import { useStore } from "@/store";
-import Image from '@/components/Image.vue';
+import { ShopifyImg } from '@hotwax/dxp-components';
 import { mapGetters } from 'vuex';
 import { DateTime } from 'luxon';
 import { JobService } from '@/services/JobService';
@@ -118,7 +118,7 @@ import { hasError } from '@/utils';
 export default defineComponent({
   name: 'Catalog',
   components: {
-    Image,
+    ShopifyImg,
     IonButtons,
     IonChip,
     IonCard,

diff --git a/src/views/orders.vue b/src/views/orders.vue
@@ -117,7 +117,7 @@
               <ion-item lines="none">
                 <ion-thumbnail slot="start">
                   <!-- TODO Create a separate component that handles default image -->
-                  <Image :src="getProduct(item.productId).mainImageUrl"></Image>
+                  <ShopifyImg :src="getProduct(item.productId).mainImageUrl" size="small"></ShopifyImg>
                 </ion-thumbnail>
                 <ion-label>
                   <h2>{{ item.parentProductName ? item.parentProductName :item.productName }}</h2>
@@ -222,7 +222,7 @@ import { useStore } from "@/store";
 import { mapGetters } from "vuex";
 import { showToast } from '@/utils'
 import { Plugins } from '@capacitor/core';
-import Image from '@/components/Image.vue';
+import { ShopifyImg } from "@hotwax/dxp-components";
 import emitter from "@/event-bus";
 
 const { Clipboard } = Plugins;
@@ -255,7 +255,7 @@ export default defineComponent({
     IonToolbar,
     IonInfiniteScroll, 
     IonInfiniteScrollContent,
-    Image
+    ShopifyImg
   },
   data() {
     return {

diff --git a/src/views/product-details.vue b/src/views/product-details.vue
@@ -21,7 +21,7 @@
       <div class="header">
         <div class="product-image">
           <!-- TODO Create a separate component to handled default image -->
-          <Image :src="current.product.mainImageUrl"></Image>
+          <ShopifyImg :src="current.product.mainImageUrl"></ShopifyImg>
         </div>
 
         <div class="product-info">
@@ -124,7 +124,7 @@
           <div class="variant-info">
             <ion-item lines="none">
               <ion-thumbnail slot="start">
-                <Image :src="getProduct(item.groupValue).mainImageUrl" ></Image>
+                <ShopifyImg :src="getProduct(item.groupValue).mainImageUrl" size="small"/>
               </ion-thumbnail>
               <ion-label>
                 <h2> {{ getProduct(item.groupValue).productName }}</h2>
@@ -213,7 +213,7 @@ import BackgroundJobModal from "./background-job-modal.vue";
 import { useStore } from "@/store";
 import { mapGetters } from "vuex";
 import { ProductService } from '@/services/ProductService'
-import Image from '@/components/Image.vue';
+import { ShopifyImg } from "@hotwax/dxp-components";
 import { sizeIndex } from "@/apparel-sorter"
 import { DateTime } from 'luxon';
 import emitter from "@/event-bus";
@@ -245,7 +245,7 @@ export default defineComponent({
     IonTitle,
     IonToggle,
     IonToolbar,
-    Image
+    ShopifyImg
   },
   beforeMount () {
     // TODO Handle if product id is invalid

diff --git a/src/views/products.vue b/src/views/products.vue
@@ -29,7 +29,7 @@
       <div v-else>
         <ion-item  v-bind:key="product.groupValue" v-for="product in products" lines="none" @click="() => router.push({ name: 'Product-details', params: { id: product.groupValue }})">
           <ion-thumbnail slot="start">
-            <Image :src="getProduct(product.groupValue).mainImageUrl"></Image>
+            <ShopifyImg :src="getProduct(product.groupValue).mainImageUrl" size="small"></ShopifyImg>
           </ion-thumbnail>
           <ion-label>
             <h2>{{ getProduct(product.groupValue).productName}}</h2>
@@ -72,7 +72,7 @@ import { useRouter } from "vue-router";
 import BackgroundJobModal from "./background-job-modal.vue";
 import { useStore } from "@/store";
 import { mapGetters } from "vuex";
-import Image from '@/components/Image.vue';
+import { ShopifyImg } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "settings",
@@ -93,7 +93,7 @@ export default defineComponent({
     IonTitle,
     IonSearchbar,
     IonToolbar,
-    Image
+    ShopifyImg
   },
   data() {
     return {

diff --git a/src/views/settings.vue b/src/views/settings.vue
@@ -137,7 +137,7 @@ import {
 import { defineComponent } from "vue";
 import { mapGetters } from 'vuex'
 import TimeZoneModal from '@/views/timezone-modal.vue'
-import Image from '@/components/Image.vue'
+import Image from '@/components/Image.vue';
 import { DateTime } from 'luxon';
 
 export default defineComponent({