refactor(theme): create component for product gallery (#194)

* refactor: create component for product gallery

* fix: review requests

package.json

@@ -15,6 +15,7 @@
  "dev:client": "yarn dev shopware-6-client -format=esm",
  "dev:composables": "yarn dev composables -format=esm",
  "dev:helpers": "yarn dev helpers -format=esm",
+ "dev:debug": "node --inspect scripts/dev.js",
  "build": "node scripts/build.js",
  "postinstall": "lerna link",
  "lint": "prettier --write --parser typescript 'packages/**/*.ts'",

packages/default-theme/components/cms/elements/SwProductGallery.vue

@@ -0,0 +1,105 @@
+<template>
+ <div class="sw-product-gallery gallery">
+ <template v-if="mediaGallery.length > 0">
+ <slot name="desktop-galery" v-bind="mediaGallery">
+ <div class="gallery__desktop" v-for="(image, id) in mediaGallery" :key="id">
+ <SfImage
+ v-if="image.big"
+ :src="image.big.url"
+ class="image__big desktop-only"
+ />
+ <SfImage
+ v-else-if="image.medium"
+ :src="image.medium.url"
+ class="image__medium dektop-only"
+ />
+ </div>
+ </slot>
+ </template>
+ <div class="gallery__mobile mobile-only" v-if="mediaGallery.length > 0">
+ <slot name="mobile-galery" v-bind="mediaGallery">
+ <SfGallery
+ class="gallery-mobile mobile-only"
+ :images="mediaGallery"
+ />
+ </slot>
+ </div>
+ </div>
+</template>
+
+<script>
+import { SfImage, SfGallery } from '@storefront-ui/vue'
+import { getProductMainImageUrl, getProductMediaGallery } from '@shopware-pwa/helpers'
+
+export default {
+ components: { SfImage, SfGallery },
+ props: {
+ product: {
+ type: Object,
+ default: () => ({}),
+ }
+ },
+ computed: {
+ mediaGallery() {
+ return getProductMediaGallery({product: this.product})
+ },
+ },
+}
+</script>
+
+<style lang="scss">
+@import "~@storefront-ui/shared/styles/variables";
+
+.gallery-mobile {
+ $height-other: 240px;
+ $height-iOS: 265px;
+
+ height: calc(100vh - #{$height-other});
+ @supports (-webkit-overflow-scrolling: touch) {
+ height: calc(100vh - #{$height-iOS});
+ }
+ ::v-deep .glide {
+ &,
+ * {
+ height: 100%;
+ }
+ &__slide {
+ position: relative;
+ overflow: hidden;
+ }
+ img {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ min-width: calc((375 / 490) * (100vh - #{$height-other}));
+ @supports (-webkit-overflow-scrolling: touch) {
+ min-width: calc((375 / 490) * (100vh - #{$height-iOS}));
+ }
+ }
+ }
+ ::v-deep .sf-gallery__stage {
+ width: 100%;
+ }
+}
+
+.sf-gallery {
+ $this: &;
+ ::v-deep {
+ ul {
+ margin: 0;
+ }
+ #{$this}__thumbs {
+ left: 50%;
+ transform: translateX(-50%);
+ top: auto;
+ bottom: 10px;
+ display: flex;
+ }
+ #{$this}__item {
+ &:not(:first-child) {
+ margin: 0 0 0 $spacer;
+ }
+ }
+ }
+}
+</style>

packages/default-theme/components/views/ProductView.vue

@@ -1,18 +1,7 @@
 <template>
  <div id="product" v-if="product">
  <div class="product">
- <div class="product__gallery">
- <SfImage v-if="mainImage"
- :src="mainImage"
- class="desktop-only"
- />
-
- <SfGallery v-if="mediaGallery"
- class="gallery-mobile mobile-only"
- :images="mediaGallery"
- />
- </div>
-
+ <SwProductGallery :product="product" class="product__gallery"/>
  <div class="product__description">
  <SfSticky class="product-details">
  <div class="product-details__mobile-top">
@@ -174,16 +163,15 @@ import {
  SfSticky,
  SfReview
 } from "@storefront-ui/vue";
- import { useProduct, useAddToCart } from "@shopware-pwa/composables";
- import { 
- getProductMainImageUrl,
- getProductMediaGallery,
+import { useProduct, useAddToCart } from "@shopware-pwa/composables";
+import { 
  getProductOptions,
  getProductProperties,
  getProductOption,
  getProductReviews,
  getProductRegularPrice,
  isProductSimple } from "@shopware-pwa/helpers";
+import SwProductGallery from '../cms/elements/SwProductGallery'
 
 export default {
  name: "Product",
@@ -201,13 +189,13 @@ export default {
  SfProductCard,
  SfCarousel,
  SfSection,
- SfImage,
  SfBanner,
  SfBottomNavigation,
  SfCircleIcon,
  SfIcon,
  SfSticky,
- SfReview
+ SfReview,
+ SwProductGallery
  },
  props: {
  page: {
@@ -269,12 +257,6 @@ export default {
  isSimple() {
  return isProductSimple({product: this.product})
  },
- mainImage() {
- return getProductMainImageUrl({product: this.product})
- },
- mediaGallery() {
- return getProductMediaGallery({product: this.product})
- },
  properties() {
  return getProductProperties({product: this.product})
  },
@@ -479,37 +461,7 @@ export default {
 .product-property {
  padding: $spacer-small 0;
 }
-.gallery-mobile {
- $height-other: 240px;
- $height-iOS: 265px;
 
- height: calc(100vh - #{$height-other});
- @supports (-webkit-overflow-scrolling: touch) {
- height: calc(100vh - #{$height-iOS});
- }
- ::v-deep .glide {
- &,
- * {
- height: 100%;
- }
- &__slide {
- position: relative;
- overflow: hidden;
- }
- img {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- min-width: calc((375 / 490) * (100vh - #{$height-other}));
- @supports (-webkit-overflow-scrolling: touch) {
- min-width: calc((375 / 490) * (100vh - #{$height-iOS}));
- }
- }
- }
- ::v-deep .sf-gallery__stage {
- width: 100%;
- }
-}
 .section {
  @media (max-width: $desktop-min) {
  padding-left: $spacer-big;
@@ -531,27 +483,6 @@ export default {
  }
  }
 }
-/* we have PR to fix bullets position */
-.sf-gallery {
- $this: &;
- ::v-deep {
- ul {
- margin: 0;
- }
- #{$this}__thumbs {
- left: 50%;
- transform: translateX(-50%);
- top: auto;
- bottom: 10px;
- display: flex;
- }
- #{$this}__item {
- &:not(:first-child) {
- margin: 0 0 0 $spacer;
- }
- }
- }
-}
 /* same on the home, category */
 .bottom-navigation-circle {
  opacity: 1;