Complementary products (#1938)

Shopify · Sep 12, 2022 · 592c598 · 592c598
1 parent c1511ae
commit 592c598
Show file tree

Hide file tree

Showing 62 changed files with 1,590 additions and 146 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -155,7 +155,8 @@
   --color-icon: rgb(var(--color-base-outline-button-labels));
 }
 
-.product-card-wrapper .card {
+.product-card-wrapper .card,
+.contains-product-card {
   --border-radius: var(--product-card-corner-radius);
   --border-width: var(--product-card-border-width);
   --border-opacity: var(--product-card-border-opacity);

diff --git a/assets/component-card.css b/assets/component-card.css
@@ -16,6 +16,24 @@
   height: 100%;
 }
 
+.card.card--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 1.5rem;
+}
+
+.card--horizontal.ratio:before {
+  padding-bottom: 0;
+}
+
+.card--card.card--horizontal {
+  padding: 1.2rem;
+}
+
+.card--card.card--horizontal.card--text {
+  column-gap: 0;
+}
+
 .card--card {
   height: 100%;
 }
@@ -133,7 +151,7 @@
   justify-self: flex-end;
 }
 
-.card > .card__content > .card__badge {
+.card:not(.card--horizontal) > .card__content > .card__badge {
   margin: 1.3rem;
 }
 
@@ -233,8 +251,8 @@
 }
 
 .card--standard.card--media .card__inner .card__information,
-.card--standard.card--text > .card__content .card__heading,
-.card--standard > .card__content .card__badge,
+.card--standard.card--text:not(.card--horizontal) > .card__content .card__heading,
+.card--standard:not(.card--horizontal) > .card__content .card__badge,
 .card--standard.card--text.article-card > .card__content .card__information,
 .card--standard > .card__content .card__caption {
   display: none;
@@ -255,6 +273,11 @@
   display: none;
 }
 
+.card--horizontal .card__badge,
+.card--horizontal.card--text .card__inner {
+  display: none;
+}
+
 .card--extend-height {
   height: 100%;
 }

diff --git a/assets/component-complementary-products.css b/assets/component-complementary-products.css
@@ -0,0 +1,136 @@
+.complementary-products__container {
+  display: flex;
+  flex-direction: column;
+  gap: 1.3rem;
+}
+
+product-recommendations:not(.is-accordion) .complementary-products__container {
+  margin-top: 1.5rem;
+}
+
+.complementary-products__container > details[open] {
+  padding-bottom: 1.5rem;
+}
+
+.complementary-slider {
+  margin-top: 0;
+  gap: 0;
+}
+
+.complementary-slide {
+  --shadow-padding-sides: calc((var(--shadow-horizontal-offset) + var(--shadow-blur-radius)) * var(--shadow-visible));
+  --shadow-padding-sides-negative: calc((var(--shadow-horizontal-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible));
+}
+
+.complementary-slide > ul {
+  display: flex;
+  flex-direction: column;
+  gap: var(--grid-mobile-vertical-spacing);
+}
+
+.complementary-slide.complementary-slide--standard > ul {
+  gap: calc(var(--grid-mobile-vertical-spacing) + 8px);
+}
+
+@media screen and (min-width: 750px) {
+  .complementary-slide > ul {
+    gap: var(--grid-desktop-vertical-spacing);
+  }
+
+  .complementary-slide.complementary-slide--standard > ul {
+    gap: calc(var(--grid-desktop-vertical-spacing) + 8px);
+  }
+}
+
+.complementary-slide.grid__item {
+  width: 100%;
+  padding-top:  max(var(--focus-outline-padding), var(--shadow-padding-top));
+  padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
+  padding-right: max(var(--focus-outline-padding), var(--shadow-padding-sides));
+  padding-left: max(var(--focus-outline-padding), var(--shadow-padding-sides-negative));
+}
+
+.complementary-slide .card-wrapper {
+  height: auto;
+}
+
+.complementary-products > .summary__title {
+  display: flex;
+  line-height: 1;
+  padding: 1.5rem 0;
+}
+
+.accordion + product-recommendations .accordion,
+product-recommendations.is-accordion + .accordion {
+  margin-top: 0;
+  border-top: none;
+}
+
+.complementary-products > .summary__title .icon-accordion {
+  fill: rgb(var(--color-foreground));
+  height: calc(var(--font-heading-scale) * 2rem);
+  margin-right: calc(var(--font-heading-scale) * 1rem);
+  width: calc(var(--font-heading-scale) * 2rem);
+}
+
+.complementary-products__container .card--card .card__content,
+.complementary-products__container .card--horizontal .card__information {
+  padding: 0;
+}
+
+.complementary-products__container .card__heading {
+  font-size: calc(var(--font-heading-scale) * 1.2rem);
+}
+
+@media only screen and (min-width: 750px) {
+  .complementary-products__container .card__heading {
+    font-size: calc(var(--font-heading-scale) * 1.3rem);
+  }
+}
+
+.complementary-products__container .card--horizontal .card__inner {
+  max-width: 20%;
+}
+
+@media screen and (min-width: 750px) and (max-width: 1200px){
+  .complementary-products__container .card--horizontal .card__inner {
+    max-width: 25%
+  }
+}
+
+.complementary-slide .card--text .card__content {
+  grid-template-rows: minmax(0,1fr) max-content auto;
+}
+
+
+.complementary-products__container .card--card.card--media > .card__content {
+  margin-top: 0;
+}
+
+.complementary-products__container .card--card .card__inner .card__media {
+  border-radius: calc(var(--corner-radius) - var(--border-width) - var(--image-padding));
+}
+
+.complementary-products__container .card--horizontal .quick-add {
+  margin: 1rem 0 0;
+  max-width: 20rem;
+}
+
+.complementary-products__container .quick-add__submit {
+  padding: 0.8rem 2rem;
+}
+
+.complementary-products__container .card--horizontal .quick-add,
+.complementary-products__container .card__badge {
+  justify-self: var(--text-alignment);
+}
+
+.product--no-media .complementary-products__container .price {
+  text-align: var(--text-alignment);
+}
+
+@media screen and (min-width: 750px) {
+  .complementary-products__container .price--on-sale .price-item--regular {
+    font-size: 1.3rem;
+  }
+}
diff --git a/assets/component-price.css b/assets/component-price.css
@@ -19,6 +19,7 @@
 }
 
 .price .price-item {
+  display: inline-block;
   margin: 0 1rem 0 0;
 }
 

diff --git a/assets/global.js b/assets/global.js
@@ -721,13 +721,17 @@ class SlideshowComponent extends SliderComponent {
 
   setSlideVisibility() {
     this.sliderItemsToShow.forEach((item, index) => {
-      const button = item.querySelector('a');
+      const linkElements = item.querySelectorAll('a');
       if (index === this.currentPage - 1) {
-        if (button) button.removeAttribute('tabindex');
+        if (linkElements.length) linkElements.forEach(button => {
+          button.removeAttribute('tabindex');
+        });
         item.setAttribute('aria-hidden', 'false');
         item.removeAttribute('tabindex');
       } else {
-        if (button) button.setAttribute('tabindex', '-1');
+        if (linkElements.length) linkElements.forEach(button => {
+          button.setAttribute('tabindex', '-1');
+        });
         item.setAttribute('aria-hidden', 'true');
         item.setAttribute('tabindex', '-1');
       }
@@ -901,3 +905,43 @@ class VariantRadios extends VariantSelects {
 }
 
 customElements.define('variant-radios', VariantRadios);
+
+class ProductRecommendations extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    const handleIntersection = (entries, observer) => {
+      if (!entries[0].isIntersecting) return;
+      observer.unobserve(this);
+
+      fetch(this.dataset.url)
+        .then(response => response.text())
+        .then(text => {
+          const html = document.createElement('div');
+          html.innerHTML = text;
+          const recommendations = html.querySelector('product-recommendations');
+
+          if (recommendations && recommendations.innerHTML.trim().length) {
+            this.innerHTML = recommendations.innerHTML;
+          }
+
+          if (!this.querySelector('slideshow-component') && this.classList.contains('complementary-products')) {
+            this.remove();
+          }
+
+          if (html.querySelector('.grid__item')) {
+            this.classList.add('product-recommendations--loaded');
+          }
+        })
+        .catch(e => {
+          console.error(e);
+        });
+    }
+
+    new IntersectionObserver(handleIntersection.bind(this), {rootMargin: '0px 0px 400px 0px'}).observe(this);
+  }
+}
+
+customElements.define('product-recommendations', ProductRecommendations);
diff --git a/assets/section-product-recommendations.css b/assets/section-product-recommendations.css
@@ -2,12 +2,6 @@
   display: block;
 }
 
-.product-recommendations:not(.product-recommendations--loaded) {
-  padding: 0;
-  margin: 0;
-}
-
 .product-recommendations__heading {
-  margin: 0;
-  margin-bottom: 3rem;
+  margin: 0 0 3rem;
 }
diff --git a/locales/bg-BG.json b/locales/bg-BG.json
@@ -51,7 +51,8 @@
     "slider": {
       "of": "от",
       "next_slide": "Плъзгане надясно",
-      "previous_slide": "Плъзгане наляво"
+      "previous_slide": "Плъзгане наляво",
+      "name": "Плъзгач"
     }
   },
   "newsletter": {
@@ -267,8 +268,7 @@
     },
     "featured_collection": {
       "view_all": "Покажи всички",
-      "view_all_label": "Покажи всички продукти в колекция {{ collection_name }}",
-      "slider": "Плъзгач"
+      "view_all_label": "Покажи всички продукти в колекция {{ collection_name }}"
     },
     "collection_list": {
       "view_all": "Покажи всички"

diff --git a/locales/cs.json b/locales/cs.json
@@ -51,7 +51,8 @@
     "slider": {
       "of": "z",
       "next_slide": "Snímek vpravo",
-      "previous_slide": "Snímek vlevo"
+      "previous_slide": "Snímek vlevo",
+      "name": "Posuvník"
     }
   },
   "newsletter": {
@@ -281,8 +282,7 @@
     },
     "featured_collection": {
       "view_all": "Zobrazit vše",
-      "view_all_label": "Zobrazit všechny produkty v kolekci {{ collection_name }}",
-      "slider": "Posuvník"
+      "view_all_label": "Zobrazit všechny produkty v kolekci {{ collection_name }}"
     },
     "collection_list": {
       "view_all": "Zobrazit vše"

diff --git a/locales/cs.schema.json b/locales/cs.schema.json
@@ -1721,6 +1721,50 @@
               "content": "Pokud chcete zobrazovat hodnocení, přidejte si aplikaci pro hodnocení produktů. [Zjistit více](https://help.shopify.com/manual/online-store/themes/theme-structure/page-types#product-rating-block)"
             }
           }
+        },
+        "complementary_products": {
+          "name": "Doplňkové produkty",
+          "settings": {
+            "paragraph": {
+              "content": "Pokud chcete vybrat doplňkové produkty, přidejte si aplikaci Search & Discovery. [Zjistit více](https://shopify.dev/themes/product-merchandising/recommendations)"
+            },
+            "heading": {
+              "label": "Nadpis"
+            },
+            "make_collapsible_row": {
+              "label": "Zobrazit jako sbalitelný řádek"
+            },
+            "icon": {
+              "info": "Zobrazuje se v případě, že se zobrazuje sbalitelný řádek."
+            },
+            "product_list_limit": {
+              "label": "Maximální počet zobrazovaných produktů"
+            },
+            "products_per_page": {
+              "label": "Počet produktů na stránku"
+            },
+            "pagination_style": {
+              "label": "Styl stránkování",
+              "options": {
+                "option_1": "Tečky",
+                "option_2": "Počítadlo",
+                "option_3": "Čísla"
+              }
+            },
+            "product_card": {
+              "heading": "Karta produktu"
+            },
+            "image_ratio": {
+              "label": "Poměr obrázku",
+              "options": {
+                "option_1": "Na výšku",
+                "option_2": "Čtverec"
+              }
+            },
+            "enable_quick_add": {
+              "label": "Povolit tlačítko Rychlé přidání"
+            }
+          }
         }
       },
       "settings": {