Merge branch 'master' into feat/client/#217-e2e-api-tests

packages/default-theme/components/SwCartProduct.vue

@@ -1,12 +1,12 @@
 <template>
   <SfCollectedProduct
-    image="/img/productB.png"
+    v-model="quantity"
+    :image="productImage"
     :title="product.label"
     :regular-price="product.price.unitPrice | price"
     :stock="product.deliveryInformation.stock"
-    v-model="quantity"
-    @click:remove="removeProduct(product)"
     class="collected-product"
+    @click:remove="removeProduct(product)"
   >
     <template #configuration>
       <div class="collected-product__properties">
@@ -31,57 +31,58 @@
   </SfCollectedProduct>
 </template>
 <script>
-import {
-  SfSidebar,
-  SfButton,
-  SfProperty,
-  SfPrice,
-  SfCollectedProduct
-} from "@storefront-ui/vue";
-import { useCart } from "@shopware-pwa/composables";
-import {ref, watch} from "@vue/composition-api"
+import { SfButton, SfProperty, SfCollectedProduct } from '@storefront-ui/vue'
+import { getProductMainImageUrl } from '@shopware-pwa/helpers'
+import { useCart } from '@shopware-pwa/composables'
+import { ref, watch, computed } from '@vue/composition-api'
 
 export default {
   components: {
-    SfSidebar,
     SfButton,
     SfProperty,
-    SfPrice,
     SfCollectedProduct
   },
+  filters: {
+    price(price) {
+      if (!price) return
+      return `$${price}`
+    }
+  },
   props: {
     product: {
       type: Object,
-      defult: () => ({})
+      default: () => ({})
     }
   },
-  setup (props) {
+  setup(props) {
     const { removeProduct, changeProductQuantity } = useCart()
 
     const quantity = ref(props.product.quantity)
+    const productImage = computed(() =>
+      getProductMainImageUrl({ product: props.product })
+    )
 
-    watch(quantity, async qty => { // in future we may want to have debounce here
-      if (qty == props.product.quantity) return
-      await changeProductQuantity({id: props.product.id, quantity: qty})
-    })
-    watch(() => props.product.quantity, qty => {
-      quantity.value = qty
+    watch(quantity, async (qty) => {
+      // in future we may want to have debounce here
+      if (qty === props.product.quantity) return
+      await changeProductQuantity({ id: props.product.id, quantity: qty })
     })
+    watch(
+      () => props.product.quantity,
+      (qty) => {
+        quantity.value = qty
+      }
+    )
     return {
+      productImage,
       removeProduct,
       quantity
     }
-  },
-  filters: {
-    price: function(price) {
-      if (!price) return;
-      return `$${price}`;
-    }
   }
-};
+}
 </script>
 <style lang="scss" scoped>
-@import "~@storefront-ui/vue/styles";
+@import '~@storefront-ui/vue/styles';
 @mixin for-desktop {
   @media screen and (min-width: $desktop-min) {
     @content;

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

@@ -2,7 +2,11 @@
   <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">
+        <div
+          v-for="(image, id) in mediaGallery"
+          :key="id"
+          class="gallery__desktop"
+        >
           <SfImage
             v-if="image.big"
             :src="image.big.url"
@@ -16,39 +20,36 @@
         </div>
       </slot>
     </template>
-    <div class="gallery__mobile mobile-only" v-if="mediaGallery.length > 0">
+    <div v-if="mediaGallery.length > 0" class="gallery__mobile mobile-only">
       <slot name="mobile-galery" v-bind="mediaGallery">
-        <SfGallery
-          class="gallery-mobile mobile-only"
-          :images="mediaGallery"
-        />
-     </slot>
+        <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'
+import { getProductMediaGallery } from '@shopware-pwa/helpers'
 
 export default {
   components: { SfImage, SfGallery },
   props: {
     product: {
       type: Object,
-      default: () => ({}),
+      default: () => ({})
     }
   },
   computed: {
     mediaGallery() {
-      return getProductMediaGallery({product: this.product})
-    },
-  },
+      return getProductMediaGallery({ product: this.product })
+    }
+  }
 }
 </script>
 
 <style lang="scss">
-@import "~@storefront-ui/shared/styles/variables";
+@import '~@storefront-ui/shared/styles/variables';
 
 .gallery-mobile {
   $height-other: 240px;
@@ -102,4 +103,4 @@ export default {
     }
   }
 }
-</style>
+</style>

packages/helpers/__tests__/product/getProductMainImageUrl.spec.ts

@@ -1,22 +1,46 @@
 import { getProductMainImageUrl } from "@shopware-pwa/helpers";
 
 describe("Helpers - getProductMainImageUrl", () => {
+  const mediaUrl =
+    "https://shopware.test/media/8a/fd/cb/1572351035/msh06-gray_main_2.jpg";
+
   it("should contain url in nested media object", () => {
     const product: any = {
       cover: {
         media: {
-          url:
-            "https://shopware.test/media/8a/fd/cb/1572351035/msh06-gray_main_2.jpg"
+          url: mediaUrl
+        }
+      }
+    };
+    const coverUrl = getProductMainImageUrl({ product });
+    expect(coverUrl).toEqual(mediaUrl);
+  });
+
+  it("should contain url in cover object when media url is blank", () => {
+    const product: any = {
+      cover: {
+        url: mediaUrl
+      }
+    };
+    const coverUrl = getProductMainImageUrl({ product });
+    expect(coverUrl).toEqual(mediaUrl);
+  });
+
+  it("Should take the url from the media object first", () => {
+    const product: any = {
+      cover: {
+        url:
+          "https://shopware.test/media/8a/fd/cb/1572351035/msh06-gray_main_1.jpg",
+        media: {
+          url: mediaUrl
         }
       }
     };
     const coverUrl = getProductMainImageUrl({ product });
-    expect(coverUrl).toEqual(
-      "https://shopware.test/media/8a/fd/cb/1572351035/msh06-gray_main_2.jpg"
-    );
+    expect(coverUrl).toEqual(mediaUrl);
   });
 
-  it("should return null for product without cover media", () => {
+  it("should return null for product without cover media and cover url", () => {
     const emptyProduct: any = {};
     const coverUrl = getProductMainImageUrl({ product: emptyProduct });
     expect(coverUrl).toBeUndefined();

packages/helpers/src/product/getProductMainImageUrl.ts

@@ -6,7 +6,5 @@ import { Product } from "@shopware-pwa/shopware-6-client";
 export function getProductMainImageUrl({
   product
 }: { product?: Product } = {}): string | undefined {
-  return (
-    product && product.cover && product.cover.media && product.cover.media.url
-  );
+  return ( product && product.cover && ((product.cover.media && product.cover.media.url) || product.cover.url));
 }

packages/shopware-6-client/src/interfaces/models/content/product/ProductMedia.ts

@@ -8,4 +8,5 @@ export interface ProductMedia {
   media: Media;
   product: Product;
   customFields: CustomField[];
+  url: string;
 }