feat(default-theme): change view on product listing (#766)

packages/default-theme/cms/elements/CmsElementCategorySidebarFilter.vue

@@ -30,26 +30,32 @@
  </div>
  <div class="navbar__view">
  <span class="navbar__view-label desktop-only">View</span>
- <SfIcon
- class="navbar__view-icon"
- :color="isGridView ? '#1D1F22' : '#BEBFC4'"
- icon="tiles"
- size="10px"
- role="button"
+ <SfButton
+ class="sf-button--pure"
  aria-label="Change to grid view"
- :aria-pressed="isGridView"
- @click="isGridView = true"
- />
- <SfIcon
- class="navbar__view-icon"
- :color="!isGridView ? '#1D1F22' : '#BEBFC4'"
- icon="list"
- size="10px"
- role="button"
+ :aria-pressed="isGridView.toString()"
+ @click="setGridView(true)"
+ >
+ <SfIcon
+ class="navbar__view-icon"
+ :color="isGridView ? '#1D1F22' : '#BEBFC4'"
+ icon="tiles"
+ size="12px"
+ />
+ </SfButton>
+ <SfButton
+ class="sf-button--pure"
  aria-label="Change to list view"
- :aria-pressed="!isGridView"
- @click="isGridView = false"
- />
+ :aria-pressed="!isGridView.toString()"
+ @click="setGridView(false)"
+ >
+ <SfIcon
+ class="navbar__view-icon"
+ :color="!isGridView ? '#1D1F22' : '#BEBFC4'"
+ icon="list"
+ size="12px"
+ />
+ </SfButton>
  </div>
  <SfSidebar
  title="Filters"
@@ -59,7 +65,13 @@
  <div class="filters">
  <div v-for="filter in filters" :key="filter.name">
  <SfHeading class="filters__title" :level="4" :title="filter.name" />
- <div v-if="filter && filter.options && filter.options.length" :class="{'filters__filter--color': filter.name && filter.name === 'color'}">
+ <div
+ v-if="filter && filter.options && filter.options.length"
+ :class="{
+ 'filters__filter--color':
+ filter.name && filter.name === 'color',
+ }"
+ >
  <SfFilter
  v-for="option in filter.options"
  :key="option.value"
@@ -73,7 +85,7 @@
  )
  "
  class="filters__item"
- :class="{'filters__item--color': option.color}"
+ :class="{ 'filters__item--color': option.color }"
  @change="
  toggleFilter({
  type: 'equals',
@@ -110,26 +122,24 @@ import {
  SfFilter,
  SfHeading,
  SfSidebar,
- SfProductOption,
 } from '@storefront-ui/vue'
 import {
  useCategoryFilters,
  useProductListing,
 } from '@shopware-pwa/composables'
-const { availableFilters, availableSorting } = useCategoryFilters()
 import { getSortingLabel } from '@shopware-pwa/default-theme/helpers'
+const { availableFilters, availableSorting } = useCategoryFilters()
 
 export default {
+ name: 'CmsElementCategorySidebarFilter',
  components: {
  SfButton,
  SfIcon,
  SfSelect,
  SfFilter,
  SfHeading,
  SfSidebar,
- SfProductOption,
  },
- name: 'CmsElementCategorySidebarFilter',
  props: {
  content: {
  type: Object,
@@ -161,7 +171,6 @@ export default {
  return {
  isFilterSidebarOpen: false,
  sortBy: this.selectedSorting,
- isGridView: true,
  }
  },
  computed: {
@@ -186,6 +195,9 @@ export default {
  lazyLoad() {
  return true
  },
+ isGridView() {
+ return this.$store.state.isGridView
+ },
  },
  watch: {
  sortBy(newSorting, oldOne) {
@@ -207,7 +219,10 @@ export default {
  },
  getSortLabel(sorting) {
  return getSortingLabel(sorting)
- }
+ },
+ setGridView(flag) {
+ this.$store.commit('SET_IS_GRID_VIEW', flag)
+ },
  },
 }
 </script>

packages/default-theme/cms/elements/CmsElementProductListing.vue

@@ -1,19 +1,34 @@
 <template>
  <div class="cms-element-product-listing">
  <SfLoader :loading="loading" class="cms-element-product-listing__loader" />
- <div class="cms-element-product-listing__wrapper" v-if="products.length">
- <div
+ <div v-if="products.length" class="cms-element-product-listing__wrapper">
+ <transition-group
+ tag="div"
+ appear
+ name="cms-element-product-listing__slide"
  class="cms-element-product-listing__list"
  :class="{ 'cms-element-product-listing__list--blur': loading }"
  >
- <SwProductCard
- class="cms-element-product-listing__product-card"
- v-for="product in products"
- :key="product.id"
- :product="product"
- />
- <div class="cms-element-product-listing__place-holder" />
- </div>
+ <template v-if="isGridView">
+ <SwProductCard
+ v-for="(product, i) in products"
+ :key="product.id"
+ class="cms-element-product-listing__product-card"
+ :product="product"
+ :style="{ '--index': i }"
+ />
+ </template>
+ <template v-else>
+ <SwProductCardHorizontal
+ v-for="(product, i) in products"
+ :key="product.id"
+ class="cms-element-product-listing__product-card-horizontal"
+ :product="product"
+ :style="{ '--index': i }"
+ />
+ </template>
+ <div key="holder" class="cms-element-product-listing__place-holder" />
+ </transition-group>
  <SfPagination
  class="cms-element-product-listing__pagination"
  :current="pagination.currentPage"
@@ -32,16 +47,18 @@
 
 <script>
 import SwProductCard from '@shopware-pwa/default-theme/components/SwProductCard'
+import SwProductCardHorizontal from '@shopware-pwa/default-theme/components/SwProductCardHorizontal'
 import { SfPagination, SfHeading, SfLoader } from '@storefront-ui/vue'
 import { useProductListing } from '@shopware-pwa/composables'
 export default {
+ name: 'CmsElementProductListing',
  components: {
+ SwProductCardHorizontal,
  SwProductCard,
  SfPagination,
  SfHeading,
  SfLoader,
  },
- name: 'CmsElementProductListing',
  props: {
  content: {
  type: Object,
@@ -68,6 +85,11 @@ export default {
  loading,
  }
  },
+ computed: {
+ isGridView() {
+ return this.$store.state.isGridView
+ },
+ },
 }
 </script>
 
@@ -201,23 +223,34 @@ $col-prod-1: 1 0 $mx-photo-wth-1;
  padding: var(--spacer-base);
  }
  }
-
+ &__product-card-horizontal {
+ flex: 0 0 100%;
+ @include for-desktop-small {
+ margin: var(--spacer-sm) 0;
+ }
+ }
  &__pagination {
  @include for-desktop-small {
  display: flex;
  justify-content: center;
  margin-top: var(--spacer-base);
  }
  }
+ &__slide-enter {
+ opacity: 0;
+ transform: scale(0.5);
+ }
+ &__slide-enter-active {
+ transition: all 0.2s ease;
+ transition-delay: calc(0.1s * var(--index));
+ }
 }
-
 .section {
  @media (max-width: $desktop-min) {
  padding-left: var(--spacer-base);
  padding-right: var(--spacer-base);
  }
 }
-
 ::v-deep .sf-product-card {
  max-width: $mx-photo-wth-2 !important;
 

packages/default-theme/store/index.js

@@ -6,6 +6,7 @@ export const state = () => ({
  cartSidebarOpen: false,
  locales: ['en-GB', 'de-DE'],
  locale: 'en-GB',
+ isGridView: true,
 })
 
 export const mutations = {
@@ -29,6 +30,9 @@ export const mutations = {
  state.locale = locale
  }
  },
+ SET_IS_GRID_VIEW(state, flag) {
+ state.isGridView = flag
+ },
 }
 
 export const getters = {