vuestorefront#2913 Improve Size Guide feature

src/themes/default/components/core/blocks/Product/SizeGuide.vue

@@ -0,0 +1,42 @@
+<template>
+  <modal name="modal-sizeguide" :width="620">
+    <div slot="header">
+      {{ $t('Size Guide') }}
+    </div>
+    <div slot="content"> <SizeGuideContent /> </div>
+  </modal>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Modal from 'theme/components/core/Modal'
+import SizeGuideContent from 'theme/components/theme/blocks/Static/Example'
+
+export default {
+  name: 'SizeGuide',
+  computed: {
+    ...mapState({
+      activeElem: state => state.ui.authElem
+    })
+  },
+  components: {
+    Modal,
+    SizeGuideContent
+  },
+  methods: {
+    close (e) {
+      if (e) localStorage.removeItem('redirect')
+      this.$bus.$emit('modal-hide', 'modal-sizeguide')
+    }
+  }
+}
+</script>
+
+<style scoped>
+    .modal {
+        font-size: 18px;
+    }
+    .modal-content {
+        max-height: 80%;
+    }
+</style>

src/themes/default/layouts/Default.vue

@@ -47,6 +47,7 @@ import Loader from 'theme/components/core/Loader.vue'
 import Modal from 'theme/components/core/Modal.vue'
 import Notification from 'theme/components/core/Notification.vue'
 import SignUp from 'theme/components/core/blocks/Auth/SignUp.vue'
+import SizeGuide from 'theme/components/core/blocks/Product/SizeGuide.vue'
 import CookieNotification from 'theme/components/core/CookieNotification.vue'
 import OfflineBadge from 'theme/components/core/OfflineBadge.vue'
 import { isServer } from '@vue-storefront/core/helpers'
@@ -116,6 +117,7 @@ export default {
     Notification,
     Modal,
     SignUp,
+    SizeGuide,
     CookieNotification,
     OfflineBadge,
     OrderConfirmation,

src/themes/default/pages/Product.vue

@@ -108,9 +108,10 @@
                         v-focus-clean
                       />
                     </div>
-                    <router-link
+                    <span
                       to="/size-guide"
                       v-if="option.label == 'Size'"
+                      @click.prevent="openSizeGuide"
                       class="
                         p0 ml30 inline-flex middle-xs no-underline h5
                         action size-guide pointer cl-secondary
@@ -120,7 +121,7 @@
                       <span>
                         {{ $t('Size guide') }}
                       </span>
-                    </router-link>
+                    </span>
                   </div>
                 </div>
               </div>
@@ -227,6 +228,7 @@
     />
     <promoted-offers single-banner />
     <related-products type="related" />
+    <SizeGuide />
   </div>
 </template>
 
@@ -251,7 +253,7 @@ import PromotedOffers from 'theme/components/theme/blocks/PromotedOffers/Promote
 import focusClean from 'theme/components/theme/directives/focusClean'
 import WebShare from '@vue-storefront/core/modules/social-share/components/WebShare'
 import BaseInputNumber from 'theme/components/core/blocks/Form/BaseInputNumber'
-
+import SizeGuide from 'theme/components/core/blocks/Product/SizeGuide'
 export default {
   components: {
     'WishlistButton': () => import(/* webpackChunkName: "wishlist" */'theme/components/core/blocks/Wishlist/AddToWishlist'),
@@ -270,7 +272,8 @@ export default {
     Reviews,
     SizeSelector,
     WebShare,
-    BaseInputNumber
+    BaseInputNumber,
+    SizeGuide
   },
   mixins: [Product, VueOfflineMixin],
   data () {
@@ -297,6 +300,9 @@ export default {
         message: this.$t('No such configuration for the product. Please do choose another combination of attributes.'),
         action1: { label: this.$t('OK') }
       })
+    },
+    openSizeGuide () {
+      this.$bus.$emit('modal-show', 'modal-sizeguide')
     }
   },
   validations: {
@@ -480,4 +486,5 @@ $bg-secondary: color(secondary, $colors-background);
 .web-share {
   float: right;
 }
+
 </style>