feat: add more support for cloudinary images

packages/theme/components/CartSidebar.vue

@@ -111,6 +111,19 @@
                   @input="delayedUpdateItemQty({ product, quantity: $event })"
                   @click:remove="sendToRemove({ product })"
                 >
+                  <template #image>
+                    <SfImage
+                      image-tag="nuxt-img"
+                      :src="getMagentoImage(cartGetters.getItemImage(product))"
+                      :alt="cartGetters.getItemName(product)"
+                      :width="imageSizes.cart.imageWidth"
+                      :height="imageSizes.cart.imageHeight"
+                      class="sf-collected-product__image"
+                      :nuxt-img-config="{
+                        fit: 'cover',
+                      }"
+                    />
+                  </template>
                   <template #input>
                     <div
                       v-if="isInStock(product)"
@@ -237,6 +250,7 @@ import {
   SfCollectedProduct,
   SfQuantitySelector,
   SfBadge,
+  SfImage,
 } from '@storefront-ui/vue';
 import {
   computed,
@@ -246,8 +260,8 @@ import {
   useContext,
   onMounted,
 } from '@nuxtjs/composition-api';
-import { cartGetters } from '~/getters';
 import _debounce from 'lodash.debounce';
+import { cartGetters } from '~/getters';
 import {
   useCart,
   useUiState,
@@ -258,6 +272,7 @@ import {
 import stockStatusEnum from '~/enums/stockStatusEnum';
 import SvgImage from '~/components/General/SvgImage.vue';
 import CouponCode from './CouponCode.vue';
+import { useImage } from '~/composables/index.ts';
 
 export default defineComponent({
   name: 'CartSidebar',
@@ -274,10 +289,12 @@ export default defineComponent({
     SfBadge,
     CouponCode,
     SvgImage,
+    SfImage,
   },
   setup() {
     const { initializeCheckout } = useExternalCheckout();
     const { isCartSidebarOpen, toggleCartSidebar } = useUiState();
+    const { getMagentoImage, imageSizes } = useImage();
     const router = useRouter();
     const { app } = useContext();
     const {
@@ -316,7 +333,7 @@ export default defineComponent({
     });
 
     const goToCheckout = async () => {
-      const redirectUrl = await initializeCheckout({
+      const redirectUrl = initializeCheckout({
         baseUrl: '/checkout/user-account',
       });
       await router.push(`${app.localePath(redirectUrl)}`);
@@ -372,6 +389,8 @@ export default defineComponent({
       getAttributes,
       getBundles,
       isInStock,
+      imageSizes,
+      getMagentoImage,
     };
   },
 });

packages/theme/components/Header/SearchBar/SearchResults.vue

@@ -77,6 +77,9 @@
                       productGetters.getProductThumbnailImage(product)
                     )
                   "
+                  :nuxt-img-config="{
+                    fit: 'cover',
+                  }"
                   :alt="productGetters.getName(product)"
                   :title="productGetters.getName(product)"
                   :link="
@@ -113,6 +116,9 @@
                     productGetters.getProductThumbnailImage(product)
                   )
                 "
+                :nuxt-img-config="{
+                  fit: 'cover',
+                }"
                 :alt="productGetters.getName(product)"
                 :title="productGetters.getName(product)"
                 :link="

packages/theme/components/ProductsCarousel.vue

@@ -25,6 +25,9 @@
             :image="
               getMagentoImage(productGetters.getProductThumbnailImage(product))
             "
+            :nuxt-img-config="{
+              fit: 'cover',
+            }"
             :regular-price="$fc(productGetters.getPrice(product).regular)"
             :special-price="
               productGetters.getPrice(product).special &&
@@ -79,14 +82,13 @@
   </SfSection>
 </template>
 
-<script>
+<script lang="ts">
 import {
   SfCarousel,
   SfProductCard,
   SfSection,
   SfLoader,
   SfButton,
-  SfImage,
 } from '@storefront-ui/vue';
 
 import { computed, defineComponent } from '@nuxtjs/composition-api';
@@ -103,7 +105,6 @@ export default defineComponent({
     SfSection,
     SfLoader,
     SfButton,
-    SfImage,
     SvgImage,
   },
   props: {

packages/theme/composables/useProduct/index.ts

@@ -1,10 +1,10 @@
-import { Logger } from '~/helpers/logger';
 import { ref, useContext } from '@nuxtjs/composition-api';
+import { Logger } from '~/helpers/logger';
 import { getProductListCommand } from '~/composables/useProduct/commands/getProductListCommand';
 import { getProductDetailsCommand } from '~/composables/useProduct/commands/getProductDetailsCommand';
 import { ProductsListQuery } from '~/modules/GraphQL/types';
 
-export const useProduct = (id: string) => {
+export const useProduct = (id?: string) => {
   const loading = ref(false);
   const error = ref({
     search: null,

packages/theme/enums/imageEnums.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   productCard: {
     width: 216,
     height: 268,
@@ -7,8 +7,18 @@ module.exports = {
     width: 140,
     height: 200,
   },
-  cartItem: {
-    width: 100,
-    height: 100,
+  checkout: {
+    imageWidth: 100,
+    imageHeight: 100,
+  },
+  productGallery: {
+    thumbWidth: 160,
+    thumbHeight: 160,
+    imageWidth: 1080,
+    imageHeight: 1340,
+  },
+  cart: {
+    imageWidth: 170,
+    imageHeight: 170,
   },
 };

packages/theme/modules/catalog/pages/category.vue

@@ -51,6 +51,9 @@
             :image="getMagentoImage(getProductThumbnailImage(product))"
             :image-height="imageSizes.productCard.height"
             :image-width="imageSizes.productCard.width"
+            :nuxt-img-config="{
+              fit: 'cover',
+            }"
             :is-added-to-cart="isInCart({ product })"
             :is-in-wishlist="isInWishlist({ product })"
             :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
@@ -101,6 +104,9 @@
             :image="getMagentoImage(getProductThumbnailImage(product))"
             :image-height="imageSizes.productCardHorizontal.height"
             :image-width="imageSizes.productCardHorizontal.width"
+            :nuxt-img-config="{
+              fit: 'cover',
+            }"
             :is-in-wishlist="isInWishlist({ product })"
             :is-in-wishlist-icon="isAuthenticated ? '' : ''"
             :link="

packages/theme/pages/Checkout/Payment.vue

@@ -29,8 +29,11 @@
             image-tag="nuxt-img"
             :src="getMagentoImage(cartGetters.getItemImage(product))"
             :alt="cartGetters.getItemName(product)"
-            :width="imageSizes.cartItem.width"
-            :height="imageSizes.cartItem.height"
+            :width="imageSizes.checkout.imageWidth"
+            :height="imageSizes.checkout.imageHeight"
+            :nuxt-img-config="{
+              fit: 'cover',
+            }"
           />
         </SfTableData>
         <SfTableData class="table__data table__description table__data">

packages/theme/pages/MyAccount/MyWishlist.vue

@@ -76,6 +76,9 @@
                       productGetters.getProductThumbnailImage(product.product)
                     )
                   "
+                  :nuxt-img-config="{
+                    fit: 'cover',
+                  }"
                   :is-added-to-cart="isInCart({ product: product.product })"
                   :is-in-wishlist="true"
                   :link="
@@ -131,6 +134,9 @@
                   "
                   :image-width="imageSizes.productCardHorizontal.width"
                   :image-height="imageSizes.productCardHorizontal.height"
+                  :nuxt-img-config="{
+                    fit: 'cover',
+                  }"
                   :is-in-wishlist="true"
                   :link="
                     localePath(

packages/theme/pages/Product.vue

@@ -17,12 +17,20 @@
             >
               <SfGallery
                 :images="productGallery"
-                :image-width="422"
-                :image-height="664"
-                :thumb-width="160"
-                :thumb-height="160"
+                :image-width="imageSizes.productGallery.imageWidth"
+                :image-height="imageSizes.productGallery.imageHeight"
+                :thumb-width="imageSizes.productGallery.thumbWidth"
+                :thumb-height="imageSizes.productGallery.thumbHeight"
                 :enable-zoom="true"
+                image-tag="nuxt-img"
+                thumb-image-tag="nuxt-img"
                 class="product__gallery"
+                :nuxt-img-config="{
+                  fit: 'cover',
+                }"
+                :thumb-nuxt-img-config="{
+                  fit: 'cover',
+                }"
               />
             </SfLoader>
           </LazyHydrate>
@@ -297,18 +305,21 @@ import reviewGetters, {
 import {
   useProduct, useCart, useWishlist, useUser, useReview,
 } from '~/composables';
+
+import { ProductReview } from '~/modules/GraphQL/types';
 import { productData } from '~/helpers/product/productData';
 import cacheControl from '~/helpers/cacheControl';
 import InstagramFeed from '~/components/InstagramFeed.vue';
 import MobileStoreBanner from '~/components/MobileStoreBanner.vue';
 import ProductAddReviewForm from '~/components/ProductAddReviewForm.vue';
 import SvgImage from '~/components/General/SvgImage.vue';
-import BundleProductSelector from '~/components/Products/BundleProductSelector';
-import GroupedProductSelector from '~/components/Products/GroupedProductSelector';
-import UpsellProducts from '~/components/UpsellProducts';
-import RelatedProducts from '~/components/RelatedProducts';
-import HTMLContent from '~/components/HTMLContent';
-import AddToWishlist from '~/components/AddToWishlist';
+import BundleProductSelector from '~/components/Products/BundleProductSelector.vue';
+import GroupedProductSelector from '~/components/Products/GroupedProductSelector.vue';
+import UpsellProducts from '~/components/UpsellProducts.vue';
+import RelatedProducts from '~/components/RelatedProducts.vue';
+import HTMLContent from '~/components/HTMLContent.vue';
+import AddToWishlist from '~/components/AddToWishlist.vue';
+import useImage from '~/composables/useImage/index';
 
 export default defineComponent({
   name: 'ProductPage',
@@ -348,7 +359,7 @@ export default defineComponent({
     const products = ref([]);
 
     const { product, id } = productData(products);
-
+    const { getMagentoImage, imageSizes } = useImage();
     const route = useRoute();
     const router = useRouter();
     const { getProductDetails, loading: productLoading } = useProduct();
@@ -390,7 +401,9 @@ export default defineComponent({
       ? [...productReviews.value].shift()
       : productReviews.value));
     const reviews = computed(() => reviewGetters.getItems(baseReviews.value));
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     const totalReviews = computed(() => reviewGetters.getTotalReviews(baseReviews.value));
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     const averageRating = computed(() => reviewGetters.getAverageRating(baseReviews.value));
     const breadcrumbs = computed(() => {
       const productCategories = product.value.categories;
@@ -400,9 +413,9 @@ export default defineComponent({
       );
     });
     const productGallery = computed(() => productGetters.getGallery(product.value).map((img) => ({
-      mobile: { url: img.small },
-      desktop: { url: img.normal },
-      big: { url: img.big },
+      mobile: { url: getMagentoImage(img.small) },
+      desktop: { url: getMagentoImage(img.normal) },
+      big: { url: getMagentoImage(img.big) },
       // eslint-disable-next-line no-underscore-dangle
       alt: product.value._name || product.value.name,
     })));
@@ -455,6 +468,7 @@ export default defineComponent({
       });
     };
     const successAddReview = async (reviewData) => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       await addReview(reviewData);
       document.querySelector('#tabs').scrollIntoView({
         behavior: 'smooth',
@@ -463,6 +477,7 @@ export default defineComponent({
     };
 
     const updateProductConfiguration = async (label, value) => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       productConfiguration.value.push([label, value]);
 
       await router.push({
@@ -512,7 +527,8 @@ export default defineComponent({
         prefix: CacheTagPrefix.Category,
         value: catId,
       }));
-      addTags(tags.concat(productTags, categoriesTags));
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      addTags([...tags, ...productTags, ...categoriesTags]);
     });
 
     return {
@@ -553,6 +569,7 @@ export default defineComponent({
       successAddReview,
       totalReviews,
       updateProductConfiguration,
+      imageSizes,
     };
   },
 });