feat: added nuxt-img and possibility to use external image providers

.github/workflows/deploy-vue-storefront-cloud.yml

@@ -25,7 +25,7 @@ jobs:
           password: ${{ secrets.CLOUD_PASSWORD }}
           dockerfile: .vuestorefrontcloud/docker/Dockerfile
           buildoptions: --compress
-          buildargs: NPM_EMAIL,NPM_PASS,NPM_USER,NPM_REGISTRY,STORE_URL,MAGENTO_GRAPHQL,MAGENTO_EXTERNAL_CHECKOUT,MAGENTO_EXTERNAL_CHECKOUT_URL,MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH
+          buildargs: NPM_EMAIL,NPM_PASS,NPM_USER,NPM_REGISTRY,STORE_URL,MAGENTO_GRAPHQL,MAGENTO_EXTERNAL_CHECKOUT,MAGENTO_EXTERNAL_CHECKOUT_URL,MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH,IMAGE_PROVIDER,IMAGE_PROVIDER_BASE_URL
         env:
           NPM_EMAIL: ${{ secrets.NPM_EMAIL }}
           NPM_PASS: ${{ secrets.CLOUD_PASSWORD }}
@@ -36,6 +36,8 @@ jobs:
           MAGENTO_EXTERNAL_CHECKOUT: ${{ secrets.MAGENTO_EXTERNAL_CHECKOUT }}
           MAGENTO_EXTERNAL_CHECKOUT_URL: ${{ secrets.MAGENTO_EXTERNAL_CHECKOUT_URL }}
           MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH: ${{ secrets.MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH }}
+          IMAGE_PROVIDER: ${{ secrets.IMAGE_PROVIDER }}
+          IMAGE_PROVIDER_BASE_URL: ${{ secrets.IMAGE_PROVIDER_BASE_URL }}
   deploy:
     runs-on: ubuntu-latest
     needs: build

.vuestorefrontcloud/docker/Dockerfile

@@ -10,6 +10,9 @@ ARG MAGENTO_EXTERNAL_CHECKOUT_URL
 ARG MAGENTO_EXTERNAL_CHECKOUT
 ARG MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH
 ARG STORE_URL
+ARG MAGENTO_BASE_URL
+ARG IMAGE_PROVIDER
+ARG IMAGE_PROVIDER_BASE_URL
 
 ENV MAGENTO_GRAPHQL=${MAGENTO_GRAPHQL}
 ENV MAGENTO_EXTERNAL_CHECKOUT_URL=${MAGENTO_EXTERNAL_CHECKOUT_URL}
@@ -20,6 +23,9 @@ ENV LAST_COMMIT=${COMMIT}
 ENV STORE_ENV=production
 ENV NUXT_APP_ENV=production
 ENV NUXT_APP_PORT=3000
+ENV MAGENTO_BASE_URL=https://magento2-instance.vuestorefront.io/
+ENV IMAGE_PROVIDER=${IMAGE_PROVIDER}
+ENV IMAGE_PROVIDER_BASE_URL=${IMAGE_PROVIDER_BASE_URL}
 
 
 RUN npm install -g npm-cli-login \

docs/guide/configuration.md

@@ -15,6 +15,9 @@ MAGENTO_GRAPHQL=https://{YOUR_SITE_FRONT_URL}/graphql # Define Magento GraphQL e
 MAGENTO_EXTERNAL_CHECKOUT=false # Flag if VSF will use External Checkout
 MAGENTO_EXTERNAL_CHECKOUT_URL=https://{YOUR_SITE_FRONT_URL} # External checkout URL
 MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync # External Checkout synchronization path
+MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL} # base url of your Magento instance
+IMAGE_PROVIDER={YOUR_IMAGE_PROVIDER} # your image provider, for example cloudinary, default is ipx
+IMAGE_PROVIDER_BASE_URL={YOUR_IMAGE_PROVIDER_BASE_URL} # base url provided from your image provider. It's used by nuxt-img to fetch images
 ```
 
 ## Configuration file
@@ -35,7 +38,10 @@ Then on the `config` folder create a file `dev.json` with your configurations.
   "externalCheckoutUrl": "https://{YOUR_SITE_FRONT_URL}", // External checkout URL
   "externalCheckoutSyncPath": "/vue/cart/sync", // External Checkout synchronization path
   "nuxtAppEnvironment": "development",  // Define nuxt application environment
-  "nuxtAppPort": 3000 // Define nuxt port
+  "nuxtAppPort": 3000, // Define nuxt port
+  "imageProvider": "ipx", // define image provider
+  "magentoBaseUrl": "https://magento2-instance.vuestorefront.io/", // define your Magento base URL
+  "imageProviderBaseUrl": "https://res-4.cloudinary.com/{YOUR_CLOUD_ID}/image/upload/" // define image provider base url - this is example from cloudinary
 }
 ```
 
@@ -71,3 +77,83 @@ So for this configuration you need to have two Magento store views with correspo
 There are two steps to translate whole storefront:
 1. Add translations in Magento for products and categories if necessary
 2. Add translations to files in the `lang` directory
+
+
+## Image Providers
+Thanks to the [nuxt-img](https://image.nuxtjs.org/) you can use external image providers.
+
+By default, we use the `ipx` provider. that means the images are fetched from Magento, and from `static` directory.
+
+### How to configure external image provider
+
+1. Configure ENV variables
+   1. `MAGENTO_BASE_URL` - base URL of Magento shop. It's used by the `useImage` composable to extract image's path from full Magento URL.
+   2. `IMAGE_PROVIDER` - for example: `cloudinary`. List of available providers is [here](https://image.nuxtjs.org/getting-started/providers)
+   3. `IMAGE_PROVIDER_BASE_URL` - the base url of your project in for example cloudinary or other image providers
+2. Configure your provider in `nuxt.config.js`. Here is the example:
+```javascript
+image: {
+  provider: config.get('imageProvider'),
+  magekit: {
+    baseURL: config.get('imageProviderBaseUrl'),
+  }
+},
+```
+3. Sync your Magento images with external provider
+   1. For example if you have anb image in Magento with path `{YOUR_MAGENTO_BASE_URL}o/media/catalog/product/w/g/wg02-bk-0.jpg`
+   you should have corresponding image in your external provider: `media/catalog/product/w/g/wg02-bk-0.jpg`
+4. Sync your local images with external provider
+   1. Upload content of `static` directory to your external media library
+
+### The useImage composable
+
+Magento GraphQL API returns an URL to cached images, for example: `https://magento2-instance.vuestorefront.io/media/catalog/product/cache/d3f55929541f2d022ca06067148d0eae/w/g/wg02-bk-0.jpg`.
+When you basically download all images from your server (from media) directory, paths are different, they does not include `cache/***/` part.
+
+Because of that, we created the `useImage` hook, which provides `getMagentoImage(fullImageUrl: string)` method.
+That methods returns an URL to image, without magento base url, and cache part. Then you can use it to get images from external providers.
+
+
+When you want to use this composable you need to:
+
+1. import it in component
+`import { useImage } from '~/composables';`
+2. Export `getMagentoImage to a template
+```javascript
+// component body (typically a setup() function)
+const { getMagentoImage } = useImage();
+
+return {
+   ... // other things like computed properties, methods and so on
+   getMagentoImage
+}
+```
+3. Use the `getMagentoImage` method in template like this:
+```vue
+<nuxt-img
+  :src="getMagentoImage(wishlistGetters.getItemImage(product))"
+  :alt="wishlistGetters.getItemName(product)"
+  :width="140"
+  :height="200"
+/>
+```
+
+### ImageSizes enum
+There is helper object in `enums/imageEnums.js` file that export configuration for various image types:
+```javascript
+module.exports = {
+  productCard: {
+    width: 216,
+    height: 268,
+  },
+  productCardHorizontal: {
+    width: 140,
+    height: 200,
+  },
+  cartItem: {
+    width: 100,
+    height: 100,
+  },
+};
+
+```

packages/theme/.env.example

@@ -6,3 +6,6 @@ MAGENTO_GRAPHQL=https://{YOUR_SITE_FRONT_URL}/graphql
 MAGENTO_EXTERNAL_CHECKOUT=false
 MAGENTO_EXTERNAL_CHECKOUT_URL=https://{YOUR_SITE_FRONT_URL}
 MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync
+MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL}
+IMAGE_PROVIDER={YOUR_IMAGE_PROVIDER}
+IMAGE_PROVIDER_BASE_URL={YOUR_IMAGE_PROVIDER_BASE_URL}

packages/theme/components/AppHeader.vue

@@ -10,10 +10,12 @@
           :to="localePath('/')"
           class="sf-header__logo"
         >
-          <SfImage
+          <nuxt-img
             src="/icons/logo.svg"
             alt="Vue Storefront Next"
             class="sf-header__logo-image"
+            width="35"
+            height="34"
           />
         </nuxt-link>
       </template>
@@ -155,7 +157,6 @@
 <script>
 import {
   SfHeader,
-  SfImage,
   SfIcon,
   SfButton,
   SfBadge,
@@ -197,7 +198,6 @@ import SearchResults from '~/components/SearchResults.vue';
 export default defineComponent({
   components: {
     SfHeader,
-    SfImage,
     StoreSwitcher,
     SfIcon,
     SfButton,

packages/theme/components/CartSidebar.vue

@@ -166,10 +166,12 @@
           class="empty-cart"
         >
           <div class="empty-cart__banner">
-            <SfImage
+            <nuxt-img
               alt="Empty bag"
               class="empty-cart__image"
               src="/icons/empty-cart.svg"
+              width="211"
+              height="143"
             />
             <SfHeading
               title="Your cart is empty"
@@ -240,7 +242,6 @@ import {
   SfProperty,
   SfPrice,
   SfCollectedProduct,
-  SfImage,
   SfQuantitySelector,
   SfBadge,
 } from '@storefront-ui/vue';
@@ -273,7 +274,6 @@ export default defineComponent({
     SfProperty,
     SfPrice,
     SfCollectedProduct,
-    SfImage,
     SfQuantitySelector,
     SfBadge,
     CouponCode,

packages/theme/components/InstagramFeed.vue

@@ -7,86 +7,70 @@
     <div class="grid grid-images">
       <div class="grid__row">
         <div class="grid__col">
-          <SfImage
+          <nuxt-img
             v-if="isMobile"
             src="/homepage/imageAm.webp"
             alt="katherina_trn"
             :width="160"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
-          <SfImage
+          />
+          <nuxt-img
             v-else
             src="/homepage/imageAd.webp"
             alt="katherina_trn"
             :width="470"
             :height="470"
-          >
-            katherina_trn
-          </SfImage>
+          />
         </div>
         <div class="grid__col small">
-          <SfImage
+          <nuxt-img
             v-if="isMobile"
             src="/homepage/imageBm.webp"
             alt="katherina_trn"
             :width="160"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
-          <SfImage
+          />
+          <nuxt-img
             v-else
             src="/homepage/imageCd.webp"
             alt="katherina_trn"
             :width="470"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
+          />
         </div>
       </div>
       <div class="grid__row">
         <div class="grid__col small">
-          <SfImage
+          <nuxt-img
             v-if="isMobile"
             src="/homepage/imageCm.webp"
             alt="katherina_trn"
             :width="160"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
-          <SfImage
+          />
+          <nuxt-img
             v-else
             src="/homepage/imageBd.webp"
             alt="katherina_trn"
             :width="470"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
+          />
         </div>
         <div class="grid__col">
-          <SfImage
+          <nuxt-img
             v-if="isMobile"
             src="/homepage/imageDm.webp"
             alt="katherina_trn"
             :width="160"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
-          <SfImage
+          />
+          <nuxt-img
             v-else
             src="/homepage/imageDd.webp"
             alt="katherina_trn"
             :width="470"
             :height="470"
-          >
-            katherina_trn
-          </SfImage>
+          />
         </div>
       </div>
     </div>
@@ -95,7 +79,6 @@
 <script>
 import {
   SfSection,
-  SfImage,
 } from '@storefront-ui/vue';
 import {
   mapMobileObserver,
@@ -107,7 +90,6 @@ export default defineComponent({
   name: 'InstagramFeed',
   components: {
     SfSection,
-    SfImage,
   },
   computed: {
     ...mapMobileObserver(),

packages/theme/components/MobileStoreBanner.vue

@@ -12,22 +12,22 @@
           aria-label="Go to Apple Product"
           @click="() => {}"
         >
-          <img
+          <nuxt-img
             src="/homepage/apple.png"
             width="174"
             height="57"
-          >
+          />
         </SfButton>
         <SfButton
           class="banner-app__button sf-button--pure"
           aria-label="Go to Google Product"
           @click="() => {}"
         >
-          <img
+          <nuxt-img
             src="/homepage/google.png"
             width="174"
             height="57"
-          >
+          />
         </SfButton>
       </div>
     </template>