Feat. collection updates (#1295)

assets/component-slider.css

@@ -1,8 +1,25 @@
 slider-component {
+  --desktop-margin-left-first-item: max(5rem, calc((100vw - var(--page-width) + 10rem - var(--grid-desktop-horizontal-spacing)) / 2));
   position: relative;
   display: block;
 }
 
+slider-component.slider-component-full-width {
+  --desktop-margin-left-first-item: 1.5rem;
+}
+
+@media screen and (max-width: 749px) {
+  slider-component.page-width {
+    padding: 0 1.5rem;
+  }
+}
+
+@media screen and (min-width: 749px) and (max-width: 990px) {
+  slider-component.page-width {
+    padding: 0 5rem;
+  }
+}
+
 @media screen and (max-width: 989px) {
   .no-js slider-component .slider {
     padding-bottom: 3rem;
@@ -98,17 +115,90 @@ slider-component {
   margin-bottom: 1rem;
 }
 
-@media (prefers-reduced-motion) {
-  .slider--everywhere {
-    scroll-behavior: auto;
-  }
-}
-
 .slider.slider--everywhere .slider__slide {
   margin-bottom: 0;
   scroll-snap-align: center;
 }
 
+@media screen and (min-width: 990px) {
+  .slider-component-desktop.page-width {
+    max-width: none;
+  }
+
+  .slider--desktop {
+    position: relative;
+    flex-wrap: inherit;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
+    margin-bottom: 1rem;
+    scroll-padding-left: var(--desktop-margin-left-first-item);
+  }
+
+  .slider.slider--desktop .slider__slide {
+    margin-bottom: 0;
+    padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
+    padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
+  }
+
+  .slider--desktop .slider__slide:first-child {
+    margin-left: var(--desktop-margin-left-first-item);
+    scroll-margin-left: var(--desktop-margin-left-first-item);
+  }
+
+  .slider.slider--desktop .slider__slide:last-child {
+    margin-right: 5rem;
+  }
+
+  .slider-component-full-width .slider--desktop {
+    scroll-padding-left: 1.5rem;
+  }
+
+  .slider-component-full-width .slider--desktop .slider__slide:first-child {
+    margin-left: 1.5rem;
+    scroll-margin-left: 1.5rem;
+  }
+
+  .slider-component-full-width .slider--desktop .slider__slide:last-child {
+    margin-right: 1.5rem;
+  }
+
+  .slider--desktop.grid--5-col-desktop .grid__item {
+    width: calc( (100% - var(--desktop-margin-left-first-item)) / 5 - var(--grid-desktop-horizontal-spacing) * 2);
+  }
+
+  .slider--desktop.grid--4-col-desktop .grid__item {
+    width: calc( (100% - var(--desktop-margin-left-first-item)) / 4 - var(--grid-desktop-horizontal-spacing) * 3);
+  }
+
+  .slider--desktop.grid--3-col-desktop .grid__item {
+    width: calc( (100% - var(--desktop-margin-left-first-item)) / 3 - var(--grid-desktop-horizontal-spacing) * 4);
+  }
+
+  .slider--desktop.grid--2-col-desktop .grid__item {
+    width: calc( (100% - var(--desktop-margin-left-first-item)) / 2 - var(--grid-desktop-horizontal-spacing) * 5);
+  }
+
+  .slider--desktop.grid--1-col-desktop .grid__item {
+    width: calc( (100% - var(--desktop-margin-left-first-item)) - var(--grid-desktop-horizontal-spacing) * 9);
+  }
+
+  .slider.slider--desktop.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
+    padding-bottom: var(--focus-outline-padding);
+  }
+
+  .slider.slider--desktop.contains-content-container .slider__slide {
+    --focus-outline-padding: 0rem;
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .slider {
+    scroll-behavior: auto;
+  }
+}
+
 /* Scrollbar */
 
 .slider {
@@ -220,7 +310,13 @@ slider-component {
 }
 
 @media screen and (min-width: 990px) {
-  .slider:not(.slider--everywhere) + .slider-buttons {
+  .slider:not(.slider--everywhere):not(.slider--desktop) + .slider-buttons {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 989px) {
+  .slider--desktop:not(.slider--tablet) + .slider-buttons {
     display: none;
   }
 }

assets/global.js

@@ -537,7 +537,7 @@ class SliderComponent extends HTMLElement {
     this.sliderItemsToShow = Array.from(this.sliderItems).filter(element => element.clientWidth > 0);
     if (this.sliderItemsToShow.length < 2) return;
     this.sliderItemOffset = this.sliderItemsToShow[1].offsetLeft - this.sliderItemsToShow[0].offsetLeft;
-    this.slidesPerPage = Math.floor(this.slider.clientWidth / this.sliderItemOffset);
+    this.slidesPerPage = Math.floor((this.slider.clientWidth - this.sliderItemsToShow[0].offsetLeft) / this.sliderItemOffset);
     this.totalPages = this.sliderItemsToShow.length - this.slidesPerPage + 1;
     this.update();
   }
@@ -565,7 +565,7 @@ class SliderComponent extends HTMLElement {
 
     if (this.enableSliderLooping) return;
 
-    if (this.isSlideVisible(this.sliderItemsToShow[0])) {
+    if (this.isSlideVisible(this.sliderItemsToShow[0]) && this.slider.scrollLeft === 0) {
       this.prevButton.setAttribute('disabled', 'disabled');
     } else {
       this.prevButton.removeAttribute('disabled');

assets/template-collection.css

@@ -38,6 +38,42 @@
   margin-bottom: 15rem;
 }
 
-.collection__view-all {
-  margin-top: 2rem;
+@media screen and (max-width: 989px) {
+  .collection .slider--tablet.product-grid {
+    scroll-padding-left: 1.5rem;
+  }
+}
+
+.collection__description > * {
+  margin: 0;
+}
+
+.collection__title.title-wrapper {
+  margin-bottom: 2.5rem;
+}
+
+.collection__title .title:not(:only-child) {
+  margin-bottom: 1rem;
+}
+
+@media screen and (min-width: 990px) {
+  .collection__title--desktop-slider .title {
+    margin-bottom: 2.5rem;
+  }
+
+  .collection__title.title-wrapper--self-padded-tablet-down {
+    padding: 0 5rem;
+  }
+
+  .collection slider-component:not(.page-width-desktop) {
+    padding: 0;
+  }
+
+  .collection--full-width slider-component:not(.slider-component-desktop) {
+    padding: 0 1.5rem;
+  }
+}
+
+.collection__view-all a:not(.link) {
+  margin-top: 1rem;
 }

locales/bg-BG.json

@@ -260,7 +260,8 @@
     },
     "featured_collection": {
       "view_all": "Покажи всички",
-      "view_all_label": "Покажи всички продукти в колекция {{ collection_name }}"
+      "view_all_label": "Покажи всички продукти в колекция {{ collection_name }}",
+      "slider": "Плъзгач"
     },
     "collection_list": {
       "view_all": "Покажи всички"

locales/cs.json

@@ -274,7 +274,8 @@
     },
     "featured_collection": {
       "view_all": "Zobrazit vše",
-      "view_all_label": "Zobrazit všechny produkty v kolekci {{ collection_name }}"
+      "view_all_label": "Zobrazit všechny produkty v kolekci {{ collection_name }}",
+      "slider": "Posuvník"
     },
     "collection_list": {
       "view_all": "Zobrazit vše"

locales/cs.schema.json

@@ -562,10 +562,7 @@
           "label": "Maximální počet zobrazovaných produktů"
         },
         "show_view_all": {
-          "label": "Povolit tlačítko Zobrazit vše v případě, že kolekce obsahuje více produktů, než kolik se zobrazuje"
-        },
-        "swipe_on_mobile": {
-          "label": "Povolit potažení prstem na mobilním zařízení"
+          "label": "Povolit možnost Zobrazit vše v případě, že kolekce obsahuje více produktů, než kolik se jich zobrazuje"
         },
         "header": {
           "content": "Karta produktu"
@@ -595,6 +592,42 @@
         "columns_desktop": {
           "label": "Počet sloupců na počítači"
         },
+        "description": {
+          "label": "Popis"
+        },
+        "show_description": {
+          "label": "Zobrazit popis kolekce z administrátorského rozhraní"
+        },
+        "description_style": {
+          "label": "Styl popisu",
+          "options__1": {
+            "label": "Hlavní část"
+          },
+          "options__2": {
+            "label": "Podtitul"
+          },
+          "options__3": {
+            "label": "Velká písmena"
+          }
+        },
+        "view_all_style": {
+          "label": "Zobrazit vše – styl",
+          "options__1": {
+            "label": "Odkaz"
+          },
+          "options__2": {
+            "label": "Tlačítko s obrysem"
+          },
+          "options__3": {
+            "label": "Tlačítko v jednolité barvě"
+          }
+        },
+        "enable_desktop_slider": {
+          "label": "Povolit karusel na desktopovém zařízení"
+        },
+        "full_width": {
+          "label": "Nastavit plnou šířku produktů"
+        },
         "header_mobile": {
           "content": "Mobilní rozvržení"
         },
@@ -606,6 +639,9 @@
           "options__2": {
             "label": "2 sloupce"
           }
+        },
+        "enable_mobile_slider": {
+          "label": "Povolit potažení prstem na mobilním zařízení"
         }
       },
       "presets": {

locales/da.json

@@ -260,7 +260,8 @@
     },
     "featured_collection": {
       "view_all": "Se alle",
-      "view_all_label": "Se alle produkter i kollektionen {{ collection_name }}"
+      "view_all_label": "Se alle produkter i kollektionen {{ collection_name }}",
+      "slider": "Diasshow"
     },
     "collection_list": {
       "view_all": "Se alle"

locales/da.schema.json

@@ -562,10 +562,7 @@
           "label": "Maksimalt antal produkter, der skal vises"
         },
         "show_view_all": {
-          "label": "Aktivér knappen \"Se alle\", hvis kollektionen indeholder flere produkter, end der vises"
-        },
-        "swipe_on_mobile": {
-          "label": "Aktivér swipe på mobilen"
+          "label": "Aktivér “Se alle”, hvis kollektionen indeholder flere produkter, end der vises"
         },
         "header": {
           "content": "Produktkort"
@@ -595,6 +592,42 @@
         "columns_desktop": {
           "label": "Antallet af kolonner på computer"
         },
+        "description": {
+          "label": "Beskrivelse"
+        },
+        "show_description": {
+          "label": "Vis kollektionsbeskrivelse fra administratoren"
+        },
+        "description_style": {
+          "label": "Beskrivelsesstil",
+          "options__1": {
+            "label": "Brødtekst"
+          },
+          "options__2": {
+            "label": "Underoverskrift"
+          },
+          "options__3": {
+            "label": "Store bogstaver"
+          }
+        },
+        "view_all_style": {
+          "options__1": {
+            "label": "Link"
+          },
+          "options__2": {
+            "label": "Rammeknap"
+          },
+          "options__3": {
+            "label": "Udfyldt knap"
+          },
+          "label": "Stilarten “Se alle”"
+        },
+        "enable_desktop_slider": {
+          "label": "Aktivér karrusel på computer"
+        },
+        "full_width": {
+          "label": "Gør produkter til fuld bredde"
+        },
         "header_mobile": {
           "content": "Mobillayout"
         },
@@ -606,6 +639,9 @@
           "options__2": {
             "label": "2 kolonner"
           }
+        },
+        "enable_mobile_slider": {
+          "label": "Aktivér swipe på mobilen"
         }
       },
       "presets": {

locales/de.json

@@ -260,7 +260,8 @@
     },
     "featured_collection": {
       "view_all": "Alle anzeigen",
-      "view_all_label": "Alle Produkte in der Kategorie {{ collection_name }} anzeigen"
+      "view_all_label": "Alle Produkte in der Kategorie {{ collection_name }} anzeigen",
+      "slider": "Slider"
     },
     "collection_list": {
       "view_all": "Alle anzeigen"