Merge pull request #218 from sanskar345/import/#217

Implemented: Replaced the usage of Image component with ShopifyImage component wherever the image is fetched from shopify
hotwax · Aug 25, 2023 · c1f9faa · c1f9faa
2 parents f343fdf + a0a80dc
commit c1f9faa
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 10 deletions.
diff --git a/src/components/MissingSkuModal.vue b/src/components/MissingSkuModal.vue
@@ -43,7 +43,7 @@
         <ion-list v-if="segmentSelected === 'completed'">
           <ion-item v-for="item in getCompletedItems()" :key="item.shopifyProductSKU">
             <ion-thumbnail slot="start">
-              <Image :src="item.imageUrl" />
+              <ShopifyImg :src="item.imageUrl" size="small" />
             </ion-thumbnail>
             <ion-label>
               <p class="overline">{{ item.parentProductName }}</p>
@@ -92,7 +92,7 @@ import { closeOutline, saveOutline } from 'ionicons/icons';
 import { defineComponent } from "@vue/runtime-core";
 import { mapGetters, useStore } from "vuex";
 import { ref } from "vue";
-import Image from '@/components/Image.vue';
+import { ShopifyImg } from "@hotwax/dxp-components";
 
 export default defineComponent({
   name: "MissingSkuModal",
@@ -117,7 +117,7 @@ export default defineComponent({
   IonTitle,
   IonThumbnail,
   IonToolbar,
-  Image
+  ShopifyImg
   },
   data(){
     return {

diff --git a/src/components/PurchaseOrderDetail.vue b/src/components/PurchaseOrderDetail.vue
@@ -26,7 +26,7 @@
         <div class="list-item">
           <ion-item lines="none">
             <ion-thumbnail slot="start">
-              <Image :src="item.imageUrl" />
+              <ShopifyImg :src="item.imageUrl" size="small" />
             </ion-thumbnail>
             <ion-label class="ion-text-wrap">
               <h3>{{ item.pseudoId }}</h3>
@@ -55,7 +55,7 @@
   </div>     
 </template>
 <script lang="ts"> 
-import Image from '@/components/Image.vue';
+import { ShopifyImg } from "@hotwax/dxp-components";
 import {
   IonCheckbox,
   IonThumbnail,
@@ -82,7 +82,7 @@ export default defineComponent({
     IonIcon,
     IonItem,
     IonLabel,
-    Image
+    ShopifyImg
   },
   props: {
     purchaseOrders: {

diff --git a/src/main.ts b/src/main.ts
@@ -44,6 +44,7 @@ const app = createApp(App)
   .use(i18n)
   .use(store)
   .use(dxpComponents, {
+    defaultImgUrl: require("@/assets/images/defaultImage.png"),
     login,
     logout,
     loader,

diff --git a/src/views/InventoryReview.vue b/src/views/InventoryReview.vue
@@ -47,7 +47,7 @@
       <div v-if="searchedProduct?.pseudoId" class="list-item">
         <ion-item lines="none">
           <ion-thumbnail>
-            <Image :src="searchedProduct.imageUrl" />
+            <ShopifyImg :src="searchedProduct.imageUrl" size="small" />
           </ion-thumbnail>
           <ion-label class="ion-text-wrap">
             <h3>{{ searchedProduct.pseudoId }}</h3>
@@ -100,7 +100,7 @@
           <div class="list-item">
             <ion-item lines="none">
               <ion-thumbnail slot="start">
-                <Image :src="item.imageUrl" />
+                <ShopifyImg :src="item.imageUrl" size="small" />
               </ion-thumbnail>
               <ion-label class="ion-text-wrap">
                 <h3>{{ item.pseudoId }}</h3>
@@ -142,7 +142,7 @@
 </template>   
 <script lang="ts">
 import { UploadService } from "@/services/UploadService";
-import Image from '@/components/Image.vue';
+import { ShopifyImg } from "@hotwax/dxp-components"; 
 import ProductPopover from '@/components/ProductPopover.vue'
 import BulkInventoryAdjustmentModal from '@/components/BulkInventoryAdjustmentModal.vue'
 import MissingFacilitiesModal from '@/components/MissingFacilitiesModal.vue'
@@ -158,7 +158,7 @@ import { businessOutline, calculatorOutline, chevronForwardOutline, ellipsisVert
 export default defineComponent({
   name: 'InventoryDetail',
   components: {
-    Image,
+    ShopifyImg,
     IonPage,
     IonHeader,
     IonToolbar,