fix(theme): restore same size for all images in category view (#282, #…

…281)
vuestorefront · Jan 15, 2020 · 0e5e532 · 0e5e532 · github-actions · Jan 15, 2020
1 parent 6e373a3
commit 0e5e532
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 27 deletions.
diff --git a/packages/default-theme/components/SwProductCard.vue b/packages/default-theme/components/SwProductCard.vue
@@ -1,8 +1,10 @@
 <template>
   <SfProductCard
     :title="product.name || ''"
-    :image="getImageUrl" 
+    :image="getImageUrl"
     :special-price="getSpecialPrice"
+    :image-width="216"
+    :image-height="326"
     :regular-price="getRegularPrice"
     :isOnWishlist="false"
     :link="getRouterLink"
@@ -11,8 +13,8 @@
     :showAddToCartButton="true"
     :isAddedToCart="isInCart"
     @click:add-to-cart="addToCart"
-    >
-    <template #title={title}>
+  >
+    <template #title="{title}">
       <div class="product-card-title">
         <h3 class="product-card-title__title">
           {{ title }}
@@ -23,17 +25,22 @@
 </template>
 
 <script>
-import { SfProductCard, SfAddToCart } from "@storefront-ui/vue";
-import { useAddToCart } from "@shopware-pwa/composables"
-import { getProductMainImageUrl, getProductRegularPrice, getProductUrl, getProductSpecialPrice } from '@shopware-pwa/helpers';
+import { SfProductCard, SfAddToCart } from '@storefront-ui/vue'
+import { useAddToCart } from '@shopware-pwa/composables'
+import {
+  getProductMainImageUrl,
+  getProductRegularPrice,
+  getProductUrl,
+  getProductSpecialPrice
+} from '@shopware-pwa/helpers'
 
 export default {
   components: {
     SfProductCard,
     SfAddToCart
   },
-  setup ({product}) {
-    const {addToCart, quantity, getStock, isInCart} = useAddToCart(product)
+  setup({ product }) {
+    const { addToCart, quantity, getStock, isInCart } = useAddToCart(product)
 
     return {
       quantity,
@@ -43,7 +50,7 @@ export default {
     }
   },
   data() {
-    return {};
+    return {}
   },
   props: {
     product: {
@@ -57,30 +64,32 @@ export default {
       return getProductUrl(this.product)
     },
     getRegularPrice() {
-      const regular = getProductRegularPrice({product: this.product})
-      const special = getProductSpecialPrice(this.product);
+      const regular = getProductRegularPrice({ product: this.product })
+      const special = getProductSpecialPrice(this.product)
       // temporary fix to show proper regular price
-      return "$" + (regular > special ? regular : special);
+      return '$' + (regular > special ? regular : special)
     },
     getSpecialPrice() {
       const special = getProductSpecialPrice(this.product)
-      const regular = getProductRegularPrice({product: this.product})
+      const regular = getProductRegularPrice({ product: this.product })
       // temporary fix to show proper special price
-      return special && ("$" + (special < regular ? special : regular))
+      return special && '$' + (special < regular ? special : regular)
     },
     getImageUrl() {
-      return getProductMainImageUrl({product: this.product}) || require('~/assets/productB.jpg')
+      return (
+        getProductMainImageUrl({ product: this.product }) ||
+        require('~/assets/productB.jpg')
+      )
     }
   },
   methods: {
-    async toggleWishlist() {
-    }
+    async toggleWishlist() {}
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
-@import "~@storefront-ui/vue/styles.scss";
+@import '~@storefront-ui/vue/styles.scss';
 
 .product-card-title {
   height: 4em;

diff --git a/packages/default-theme/components/cms/elements/SwProductListingSlot.vue b/packages/default-theme/components/cms/elements/SwProductListingSlot.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="sw-product-list">
-    <SfLoader
-      :loading="loading">
+    <SfLoader :loading="loading">
       <div class="sw-product-list--wrapper" v-if="products.length && !loading">
         <div class="sw-product-list__list">
           <SwProductCard
+            class="sw-product-list__card"
             v-for="product in products"
             :key="product.id"
             :product="product"
@@ -18,7 +18,11 @@
           @click="changedPage"
         />
       </div>
-      <SfHeading v-else title="No products found" subtitle="let us look for them"/>
+      <SfHeading
+        v-else
+        title="No products found"
+        subtitle="let us look for them"
+      />
     </SfLoader>
   </div>
 </template>
@@ -42,8 +46,13 @@ export default {
   },
   setup({ content }) {
     const propProducts = content.data.listing || []
-    const { products, changePagination, pagination, loading } = useProductListing(propProducts)
-    
+    const {
+      products,
+      changePagination,
+      pagination,
+      loading
+    } = useProductListing(propProducts)
+
     const changedPage = async (pageNumber) => {
       await changePagination(pageNumber)
     }
@@ -66,19 +75,23 @@ export default {
     @content;
   }
 }
+
 .sw-product-list {
-  display: flex;
-  flex-direction: column;
   box-sizing: border-box;
   margin: 0 -#{$spacer};
   @include for-desktop {
     margin: $spacer-big;
   }
 
   &__list {
+    display: flex;
     width: auto;
     flex-wrap: wrap;
-    display: flex;
+    flex-grow: 0;
+  }
+
+  &__card {
+    flex: 0 0 205px;
   }
 
   &__product-card {
@@ -102,3 +115,10 @@ export default {
   }
 }
 </style>
+
+<style>
+.sw-product-list--wrapper {
+  display: flex;
+  flex-direction: column;
+}
+</style>