fix(default-theme): product carousel on mobile in the horizontal posi…

…tion (#833)
vuestorefront · Jun 8, 2020 · aabc31e · aabc31e · vercel · Jun 8, 2020
1 parent 3f6f09e
commit aabc31e
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 4 deletions.
diff --git a/packages/default-theme/cms/elements/CmsElementProductSlider.vue b/packages/default-theme/cms/elements/CmsElementProductSlider.vue
@@ -1,9 +1,9 @@
 <template>
  <div class="cms-element-product-slider">
  <SfSection :title-heading="title" class="section">
- <SfCarousel class="product-carousel">
+ <SfCarousel class="product-carousel" :settings="options">
  <SfCarouselItem v-for="product in products" :key="product.id">
- <SwProductCard :product="product" />
+ <SwProductCard :product="product" class="product-carousel__product" />
  </SfCarouselItem>
  </SfCarousel>
  </SfSection>
@@ -39,6 +39,24 @@ export default {
  : ""
  },
  },
+ data(){
+ return {
+ options: {
+ breakpoints: {
+ 480: {
+ perView: 2,
+ peek: {
+ before: 0,
+ after: 50,
+ },
+ },
+ 1023: {
+ perView: 4,
+ },
+ },
+ }
+ }
+ },
 }
 </script>
 
@@ -48,4 +66,11 @@ export default {
 .cms-element-product-slider {
  width: 100%;
 }
+.product-carousel {
+ &__product {
+ @include for-mobile {
+ max-width: unset;
+ }
+ }
+}
 </style>
diff --git a/packages/default-theme/components/SwProductCarousel.vue b/packages/default-theme/components/SwProductCarousel.vue
@@ -5,9 +5,9 @@
  class="section"
  title-heading="You may also like"
  >
- <SfCarousel class="product-carousel">
+ <SfCarousel class="product-carousel" :settings="options">
  <SfCarouselItem v-for="product in products" :key="product.id">
- <SwProductCard :product="product" />
+ <SwProductCard :product="product" class="product-carousel__product" />
  </SfCarouselItem>
  </SfCarousel>
  </SfSection>
@@ -31,6 +31,20 @@ export default {
  data() {
  return {
  products: {},
+ options: {
+ breakpoints: {
+ 480: {
+ perView: 2,
+ peek: {
+ before: 0,
+ after: 50,
+ },
+ },
+ 1023: {
+ perView: 4,
+ },
+ },
+ }
  }
  },
  async mounted() {
@@ -70,5 +84,10 @@ export default {
  --carousel-padding: var(--spacer-base);
  --carousel-max-width: calc(100% - 13.5rem);
  }
+ &__product {
+ @include for-mobile {
+ max-width: unset;
+ }
+ }
 }
 </style>