diff --git a/.github/workflows/deploy-vue-storefront-cloud.yml b/.github/workflows/deploy-vue-storefront-cloud.yml
index b72bd0865..fe24d98fa 100644
--- a/.github/workflows/deploy-vue-storefront-cloud.yml
+++ b/.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
diff --git a/.vuestorefrontcloud/docker/Dockerfile b/.vuestorefrontcloud/docker/Dockerfile
index 6717226d8..0d92503de 100644
--- a/.vuestorefrontcloud/docker/Dockerfile
+++ b/.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 \
diff --git a/docs/guide/configuration.md b/docs/guide/configuration.md
index 5015ec053..b4239b262 100644
--- a/docs/guide/configuration.md
+++ b/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
+
+```
+
+### 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,
+ },
+};
+
+```
diff --git a/packages/theme/.env.example b/packages/theme/.env.example
index 9663e1dff..14030bda5 100644
--- a/packages/theme/.env.example
+++ b/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}
diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
index 77e580468..ed46990ef 100644
--- a/packages/theme/components/AppHeader.vue
+++ b/packages/theme/components/AppHeader.vue
@@ -10,10 +10,12 @@
:to="localePath('/')"
class="sf-header__logo"
>
-
@@ -155,7 +157,6 @@