[pull] main from vuestorefront:main

.env.example

@@ -1,8 +1,39 @@
-STORE_ENV=dev
-STORE_URL=http://localhost:3000
-NUXT_APP_ENV=development
-NUXT_APP_PORT=3000
-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
+VSF_NUXT_APP_ENV=development
+VSF_NUXT_APP_PORT=3000
+VSF_NUXT_APP_HOST=localhost
+
+VSF_STORE_URL=https://localhost:3000
+VSF_MIDDLEWARE_URL=https://localhost:3000/api/
+VSF_SSR_MIDDLEWARE_URL=http://localhost:3000/api/
+
+VSF_MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL}
+VSF_MAGENTO_GRAPHQL_URL=https://{YOUR_SITE_FRONT_URL}/graphql
+
+VSF_MAGENTO_EXTERNAL_CHECKOUT_ENABLED=false
+VSF_MAGENTO_EXTERNAL_CHECKOUT_URL=https://{YOUR_SITE_FRONT_URL}
+VSF_MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync
+
+VSF_IMAGE_PROVIDER=cloudinary
+VSF_IMAGE_PROVIDER_BASE_URL=https://res-4.cloudinary.com/{YOUR_ID}/image/upload/
+VSF_IMAGE_PROVIDER_DOMAIN=https://res-4.cloudinary.com
+
+VSF_REDIS_ENABLED=false
+VSF_REDIS_HOST=127.0.0.1
+VSF_REDIS_PORT=6379
+VSF_REDIS_KEY_PREFIX=
+VSF_REDIS_CACHE_INVALIDATE_URL=/cache-invalidate
+
+VSF_RECAPTCHA_ENABLED=false
+VSF_RECAPTCHA_SITE_KEY=
+VSF_RECAPTCHA_SECRET_KEY=
+VSF_RECAPTCHA_HIDE_BADGE=
+VSF_RECAPTCHA_SIZE=invisible
+VSF_RECAPTCHA_MIN_SCORE=0.5
+VSF_RECAPTCHA_VERSION=3
+
+VSF_COOKIE_HTTP_ONLY=
+VSF_COOKIE_SECURE=
+VSF_COOKIE_SAME_SITE=
+VSF_COOKIE_PATH=
+
+NODE_TLS_REJECT_UNAUTHORIZED=0

.gitignore

@@ -93,6 +93,9 @@ sw.*
 *.swp
 
 version
-.env
-!config/example.json
-config/*.json
+.env.*
+!.env.example
+
+## SSL
+# Untrack all keys
+*.pem

README.md

@@ -1,20 +1,23 @@
+
+
 <div align="center">
 <img src="https://user-images.githubusercontent.com/1626923/137092657-fb398d20-b592-4661-a1f9-4135db0b61d5.png" height="80px"/>  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/Magento_Logo.svg/2560px-Magento_Logo.svg.png" height="80px"/>
 </div>
 
+# DEPRECATED
+**This repository is deprecated and no longer maintained. The new repository can be found [HERE](https://github.com/vuestorefront/storefront-nuxt2-magento2.git)**
+
 # Magento 2.x theme
 
-### Vue Storefront 2 integration with Magento
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/badge/all_contributors-21-orange.svg?style=flat-square)](#contributors-)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
 
-This theme developed by superheroes from [Caravel](https://github.com/caravelx) ❤️
-
-<div align="center">
-<img src="https://user-images.githubusercontent.com/1626923/127100067-98eda368-94e3-47dd-b824-842d38dc8550.png" height="80px"/>
-</div>
 
+### Vue Storefront 2 integration with Magento
 ### Requirements:
 
-- NodeJS v14 or later
+- NodeJS v16 or later
 - Yarn
 - Magento >= v2.4.3 instance for GraphQL endpoint
 - Change Magento GraphQL Query Complexity and Depth values
@@ -62,6 +65,7 @@ For detailed explanation on how things work, check out [Nuxt.js docs](https://nu
 ## Contributors ✨
 
 ### Honorable Mentions
+- [Caravel x](https://www.caravelx.com/)
 - [Cyberfuze](https://cyberfuze.com/)
 - [Leonex](https://www.leonex.de/)
 
@@ -74,22 +78,33 @@ Thanks go to these wonderful people 🙌:
   <tr>
     <td align="center"><a href="https://github.com/bloodf"><img src="https://avatars.githubusercontent.com/u/1626923?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Heitor Ramon Ribeiro</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=bloodf" title="Code">💻</a> <a href="#maintenance-bloodf" title="Maintenance">🚧</a> <a href="https://github.com/vuestorefront/magento2/commits?author=bloodf" title="Documentation">📖</a> <a href="#projectManagement-bloodf" title="Project Management">📆</a></td>
     <td align="center"><a href="https://github.com/alefbarbeli"><img src="https://avatars.githubusercontent.com/u/7727647?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Alef Barbeli</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=alefbarbeli" title="Code">💻</a> <a href="https://github.com/vuestorefront/magento2/commits?author=alefbarbeli" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/domideimel"><img src="https://avatars.githubusercontent.com/u/32941053?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Dominik Deimel</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=domideimel" title="Code">💻</a> <a href="https://github.com/vuestorefront/magento2/commits?author=domideimel" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/LiorLindvor"><img src="https://avatars.githubusercontent.com/u/6757942?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Lior Lindvor</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=LiorLindvor" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/hcmlopes"><img src="https://avatars.githubusercontent.com/u/20449158?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Henrique Lopes</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=hcmlopes" title="Code">💻</a> <a href="https://github.com/vuestorefront/magento2/commits?author=hcmlopes" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/DaiLoc5698"><img src="https://avatars.githubusercontent.com/u/76195735?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Đại Lộc Lê Quang</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=DaiLoc5698" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/zfmaster"><img src="https://avatars.githubusercontent.com/u/10129233?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Bogdan Podlesnii</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=zfmaster" title="Code">💻</a></td>
   </tr>
   <tr>
-    <td align="center"><a href="https://github.com/DaiLoc5698"><img src="https://avatars.githubusercontent.com/u/76195735?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Đại Lộc Lê Quang</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=DaiLoc5698" title="Code">💻</a></td>
-    <td align="center"><a href="https://mediabridge.solutions/"><img src="https://avatars.githubusercontent.com/u/10129233?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Bogdan Podlesnii</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=zfmaster" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/patrickmonteiro"><img src="https://avatars.githubusercontent.com/u/13258255?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Patrick Monteiro</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=patrickmonteiro" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/KevinGorjan"><img src="https://avatars.githubusercontent.com/u/789614?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Kevin Gorjan</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=kevingorjan" title="Code">💻</a> <a href="https://github.com/vuestorefront/magento2/commits?author=kevingorjan" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/bartoszherba"><img src="https://avatars.githubusercontent.com/u/16045377?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Bartosz Herba</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=bartoszherba" title="Code">💻</a> <a href="https://github.com/vuestorefront/magento2/commits?author=bartoszherba" title="Documentation">📖</a> <a href="#maintenance-bartoszherba" title="Maintenance">🚧</a> <a href="#mentoring-bartoszherba" title="Mentoring">🧑‍🏫</a> <a href="https://github.com/vuestorefront/magento2/pulls?q=is%3Apr+reviewed-by%3Abartoszherba" title="Reviewed Pull Requests">👀</a></td>
+    <td align="center"><a href="https://github.com/Frodigo"><img src="https://avatars.githubusercontent.com/u/11998249?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Marcin Kwiatkowski</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=Frodigo" title="Code">💻</a> <a href="#projectManagement-Frodigo" title="Project Management">📆</a> <a href="#business-Frodigo" title="Business development">💼</a> <a href="https://github.com/vuestorefront/magento2/commits?author=Frodigo" title="Documentation">📖</a> <a href="#ideas-Frodigo" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-Frodigo" title="Maintenance">🚧</a> <a href="#mentoring-Frodigo" title="Mentoring">🧑‍🏫</a> <a href="https://github.com/vuestorefront/magento2/pulls?q=is%3Apr+reviewed-by%3AFrodigo" title="Reviewed Pull Requests">👀</a></td>
     <td align="center"><a href="https://github.com/filrak"><img src="https://avatars.githubusercontent.com/u/15185752?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Filip Rakowski</b></sub></a><br /><a href="#question-filrak" title="Answering Questions">💬</a> <a href="#mentoring-filrak" title="Mentoring">🧑‍🏫</a> <a href="https://github.com/vuestorefront/magento2/pulls?q=is%3Apr+reviewed-by%3Afilrak" title="Reviewed Pull Requests">👀</a></td>
-    <td align="center"><a href="https://github.com/filipsobol"><img src="https://avatars.githubusercontent.com/u/4145208?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Filip Sobol</b></sub></a><br /><a href="#question-filipsobol" title="Answering Questions">💬</a> <a href="#mentoring-filipsobol" title="Mentoring">🧑‍🏫</a> <a href="https://github.com/vuestorefront/magento2/pulls?q=is%3Apr+reviewed-by%3Afilipsobol" title="Reviewed Pull Requests">👀</a></td>
-    <td align="center"><a href="https://github.com/andrzejewsky"><img src="https://avatars.githubusercontent.com/u/7943292?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Patryk Andrzejewski</b></sub></a><br /><a href="#question-andrzejewsky" title="Answering Questions">💬</a> <a href="#mentoring-andrzejewsky" title="Mentoring">🧑‍🏫</a> <a href="https://github.com/vuestorefront/magento2/pulls?q=is%3Apr+reviewed-by%3Aandrzejewsky" title="Reviewed Pull Requests">👀</a></td>
   </tr>
   <tr>
+    <td align="center"><a href="https://github.com/filipsobol"><img src="https://avatars.githubusercontent.com/u/4145208?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Filip Sobol</b></sub></a><br /><a href="#question-filipsobol" title="Answering Questions">💬</a> <a href="#mentoring-filipsobol" title="Mentoring">🧑‍🏫</a> <a href="https://github.com/vuestorefront/magento2/pulls?q=is%3Apr+reviewed-by%3Afilipsobol" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/vuestorefront/magento2/commits?author=filipsobol" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/andrzejewsky"><img src="https://avatars.githubusercontent.com/u/7943292?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Patryk Andrzejewski</b></sub></a><br /><a href="#question-andrzejewsky" title="Answering Questions">💬</a> <a href="#mentoring-andrzejewsky" title="Mentoring">🧑‍🏫</a> <a href="https://github.com/vuestorefront/magento2/pulls?q=is%3Apr+reviewed-by%3Aandrzejewsky" title="Reviewed Pull Requests">👀</a></td>
     <td align="center"><a href="https://github.com/renanoliveira0"><img src="https://avatars.githubusercontent.com/u/1081576?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Renan Oliveira</b></sub></a><br /><a href="#tool-renanoliveira0" title="Tools">🔧</a> <a href="#plugin-renanoliveira0" title="Plugin/utility libraries">🔌</a></td>
-    <td align="center"><a href="https://www.youtube.com/playlist?list=PLBjvYfV_TvwL7srfoBB0QxP1P-iJ5sQnc"><img src="https://avatars.githubusercontent.com/u/13258255?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Patrick Monteiro</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=patrickmonteiro" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/KevinGorjan"><img src="https://avatars.githubusercontent.com/u/789614?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Kevin Gorjan</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=kevingorjan" title="Code">💻</a></td>
-    <td align="center"><a href="http://digibart.com/"><img src="https://avatars.githubusercontent.com/u/16045377?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Bartosz Herba</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=bartoszherba" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/domideimel"><img src="https://avatars.githubusercontent.com/u/32941053?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Dominik Deimel</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=domideimel" title="Code">💻</a> <a href="https://github.com/vuestorefront/magento2/commits?author=domideimel" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/LiorLindvor"><img src="https://avatars.githubusercontent.com/u/6757942?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Lior Lindvor</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=LiorLindvor" title="Code">💻</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/sethidden"><img src="https://avatars.githubusercontent.com/u/5359825?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Artur Tagisow</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=sethidden" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/jonathanribas"><img src="https://avatars.githubusercontent.com/u/3003782?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Jonathan Ribas</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=jonathanribas" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Aliaaaam"><img src="https://avatars.githubusercontent.com/u/88658555?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Ali Ghanei</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=Aliaaaam" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/mayashavin"><img src="https://avatars.githubusercontent.com/u/6650139?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Maya Shavin</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=mayashavin" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/AlexanderDevitsky"><img src="https://avatars.githubusercontent.com/u/14941520?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Alexander Devitsky</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=AlexanderDevitsky" title="Code">💻</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/Diegoalbag"><img src="https://avatars.githubusercontent.com/u/72459310?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Diego Alba</b></sub></a><br /><a href="https://github.com/vuestorefront/magento2/commits?author=Diegoalbag" title="Code">💻</a></td>
   </tr>
 </table>
 
@@ -99,3 +114,4 @@ Thanks go to these wonderful people 🙌:
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+

app/router.scrollBehavior.js

@@ -1,6 +1,6 @@
-export default function (_to, _from, savedPosition) {
+export default function scrollBehavior(_to, _from, savedPosition) {
   return savedPosition || {
     x: 0,
     y: 0,
   };
-};
+}

babel.config.js

@@ -0,0 +1,17 @@
+/* eslint-disable unicorn/prefer-module */
+module.exports = {
+  env: {
+    test: {
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            targets: {
+              node: 'current',
+            },
+          },
+        ],
+      ],
+    },
+  },
+};

components/AddToWishlist.vue

@@ -0,0 +1,76 @@
+<template>
+  <component
+    :is="component"
+    v-if="isShow"
+    class="add-to-wishlist"
+    @click="$emit('addToWishlist')"
+  >
+    <SvgImage
+      :icon="isInWishlist ? isInWishlistIcon : wishlistIcon"
+      :label="$t('Wishlist')"
+      width="32"
+      height="32"
+    />
+    <SfButton class="sf-button--text">
+      {{ $t(actionText) }}
+    </SfButton>
+  </component>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from '@nuxtjs/composition-api';
+import { SfButton } from '@storefront-ui/vue';
+import SvgImage from '~/components/General/SvgImage.vue';
+
+export default defineComponent({
+  name: 'AddToWishlist',
+  components: {
+    SfButton,
+    SvgImage,
+  },
+  props: {
+    component: {
+      type: String,
+      default: 'span',
+    },
+    isInWishlist: {
+      type: Boolean,
+      default: false,
+    },
+    wishlistIcon: {
+      type: String,
+      default: 'heart',
+    },
+    isInWishlistIcon: {
+      type: String,
+      default: 'heart_fill',
+    },
+    isShow: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const actionText = computed(() => (props.isInWishlist ? 'Remove from Wishlist' : 'Add to Wishlist'));
+
+    return {
+      actionText,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.add-to-wishlist {
+  display: flex;
+  align-items: center;
+  color: var(--c-primary);
+  cursor: pointer;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  &__content {
+    margin-left: 5px;
+    display: flex;
+  }
+}
+</style>

components/AppFooter.vue

@@ -1,11 +1,15 @@
 <template>
-  <SfFooter :column="4" multiple class="footer">
+  <SfFooter
+    :column="4"
+    multiple
+    class="footer"
+  >
     <SfFooterColumn :title="$t('About us')">
       <SfList>
         <SfListItem
           v-for="item in aboutUs"
           :key="item"
-          >
+        >
           <SfMenuItem
             :label="$t(item)"
           />
@@ -50,21 +54,38 @@
     </SfFooterColumn>
     <SfFooterColumn title="Social">
       <div class="footer__socials">
-        <SfImage class="footer__social-image" v-for="item in social" :key="item" :src="'/icons/'+item+'.svg'" :alt="item" width="32" height="32" />
+        <SfImage
+          v-for="item in social"
+          :key="item"
+          class="footer__social-image"
+          :src="addBasePath('/icons/'+item+'.svg')"
+          :alt="item"
+          width="32"
+          height="32"
+        />
       </div>
     </SfFooterColumn>
   </SfFooter>
 </template>
 
-<script>
-import { SfFooter, SfList, SfImage, SfMenuItem } from '@storefront-ui/vue';
+<script lang="ts">
+import {
+  SfFooter, SfList, SfImage, SfMenuItem,
+} from '@storefront-ui/vue';
+import { defineComponent } from '@nuxtjs/composition-api';
+import { addBasePath } from '~/helpers/addBasePath';
 
-export default {
+export default defineComponent({
   components: {
     SfFooter,
     SfList,
     SfImage,
-    SfMenuItem
+    SfMenuItem,
+  },
+  setup() {
+    return {
+      addBasePath,
+    };
   },
   data() {
     return {
@@ -74,10 +95,10 @@ export default {
       paymentsDelivery: ['Purchase terms', 'Guarantee'],
       social: ['facebook', 'pinterest', 'google', 'twitter', 'youtube'],
       isMobile: false,
-      desktopMin: 1024
+      desktopMin: 1024,
     };
-  }
-};
+  },
+});
 </script>
 
 <style lang="scss">
@@ -100,6 +121,8 @@ export default {
   }
   &__social-image {
     margin: 0 var(--spacer-2xs) 0 0;
+    background-color: #fff;
+    border-radius: 100%;
   }
 }
 .sf-footer {