vuestorefront#2913 Improved Size Guide feature

CHANGELOG.md

@@ -84,6 +84,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Extra space if not found products in everything new section home page - @cnviradiya (#2846)
 - Load custom fonts without webfont.js - @jahvi (#2944)
 - Added some structured data to product page - @cewald (#2910)
+- Improved the Size Guide feature so it opens in a modal popup instead of a new page - @RGijsberts - (#2913)
 
 ## [1.9.1] - 2019.05.27
 

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

@@ -110,9 +110,9 @@
                         v-focus-clean
                       />
                     </div>
-                    <router-link
-                      to="/size-guide"
+                    <span
                       v-if="option.label == 'Size'"
+                      @click="openSizeGuide"
                       class="
                         p0 ml30 inline-flex middle-xs no-underline h5
                         action size-guide pointer cl-secondary
@@ -122,7 +122,7 @@
                       <span>
                         {{ $t('Size guide') }}
                       </span>
-                    </router-link>
+                    </span>
                   </div>
                 </div>
               </div>
@@ -229,6 +229,7 @@
     />
     <promoted-offers single-banner />
     <related-products type="related" />
+    <SizeGuide />
   </div>
 </template>
 
@@ -253,6 +254,8 @@ 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: {
@@ -272,7 +275,8 @@ export default {
     Reviews,
     SizeSelector,
     WebShare,
-    BaseInputNumber
+    BaseInputNumber,
+    SizeGuide
   },
   mixins: [Product, VueOfflineMixin],
   data () {
@@ -306,6 +310,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: {