Hide variant images setting (Shopify#158)

tairli · Aug 19, 2021 · ce0e5ec · ce0e5ec
1 parent d3b44e7
commit ce0e5ec
Show file tree

Hide file tree

Showing 15 changed files with 88 additions and 14 deletions.
diff --git a/assets/global.js b/assets/global.js
@@ -456,15 +456,17 @@ class SliderComponent extends HTMLElement {
   }
 
   initPages() {
-    if (!this.sliderItems.length === 0) return;
-    this.slidesPerPage = Math.floor(this.slider.clientWidth / this.sliderItems[0].clientWidth);
-    this.totalPages = this.sliderItems.length - this.slidesPerPage + 1;
+    const sliderItemsToShow = Array.from(this.sliderItems).filter(element => element.clientWidth > 0);
+    this.sliderLastItem = sliderItemsToShow[sliderItemsToShow.length - 1];
+    if (sliderItemsToShow.length === 0) return;
+    this.slidesPerPage = Math.floor(this.slider.clientWidth / sliderItemsToShow[0].clientWidth);
+    this.totalPages = sliderItemsToShow.length - this.slidesPerPage + 1;
     this.update();
   }
 
   update() {
     if (!this.pageCount || !this.pageTotal) return;
-    this.currentPage = Math.round(this.slider.scrollLeft / this.sliderItems[0].clientWidth) + 1;
+    this.currentPage = Math.round(this.slider.scrollLeft / this.sliderLastItem.clientWidth) + 1;
 
     if (this.currentPage === 1) {
       this.prevButton.setAttribute('disabled', true);
@@ -484,7 +486,7 @@ class SliderComponent extends HTMLElement {
 
   onButtonClick(event) {
     event.preventDefault();
-    const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + this.sliderItems[0].clientWidth : this.slider.scrollLeft - this.sliderItems[0].clientWidth;
+    const slideScrollPosition = event.currentTarget.name === 'next' ? this.slider.scrollLeft + this.sliderLastItem.clientWidth : this.slider.scrollLeft - this.sliderLastItem.clientWidth;
     this.slider.scrollTo({
       left: slideScrollPosition
     });
@@ -533,10 +535,17 @@ class VariantSelects extends HTMLElement {
     const newMedia = document.querySelector(
       `[data-media-id="${this.dataset.section}-${this.currentVariant.featured_media.id}"]`
     );
+
     if (!newMedia) return;
+    const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`);
+    const newMediaModal = modalContent.querySelector( `[data-media-id="${this.currentVariant.featured_media.id}"]`);
     const parent = newMedia.parentElement;
+    if (parent.firstChild == newMedia) return;
+    modalContent.prepend(newMediaModal);
     parent.prepend(newMedia);
-    window.setTimeout(() => { parent.scroll(0, 0) });
+    this.stickyHeader = this.stickyHeader || document.querySelector('sticky-header');
+    this.stickyHeader.dispatchEvent(new Event('preventHeaderReveal'));
+    window.setTimeout(() => { parent.querySelector('li.product__media-item').scrollIntoView({behavior: "smooth"}); });
   }
 
   updateURL() {

diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -393,6 +393,16 @@ a.product__text {
   }
 }
 
+  .product__media-item--variant,
+  .product-media-modal__content > .product__media-item--variant.product__media-item--variant {
+    display: none;
+  }
+
+  .product__media-item--variant:first-child,
+  .product-media-modal__content > .product__media-item--variant:first-child {
+    display: block;
+  }
+
 .product__media-icon .icon {
   width: 1.2rem;
   height: 1.4rem;

diff --git a/locales/da.schema.json b/locales/da.schema.json
@@ -1343,6 +1343,9 @@
         },
         "enable_sticky_info": {
           "label": "Aktivér fastgjorte produktoplysninger på store skærme"
+        },
+        "hide_variants": {
+          "label": "Skjul andre varianters medier, når du har valgt en variant"
         }
       }
     },

diff --git a/locales/de.schema.json b/locales/de.schema.json
@@ -1330,6 +1330,9 @@
         },
         "enable_sticky_info": {
           "label": "Fixierte Produktinformationen auf großen Bildschirmen aktivieren"
+        },
+        "hide_variants": {
+          "label": "Medien anderer Varianten ausblenden, sobald eine Variante ausgewählt wurde"
         }
       },
       "name": "Produktinformationen"

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -1292,6 +1292,9 @@
         "enable_sticky_info": {
           "label": "Enable sticky product information on large screens"
         },
+        "hide_variants": {
+          "label": "Hide other variants’ media after selecting a variant"
+        },
         "enable_video_looping": {
           "label": "Enable video looping"
         }

diff --git a/locales/fi.schema.json b/locales/fi.schema.json
@@ -1330,6 +1330,9 @@
         },
         "enable_sticky_info": {
           "label": "Ota käyttöön kiinteät tuotetiedot suurilla näytöillä"
+        },
+        "hide_variants": {
+          "label": "Piilota muiden versioiden aineisto, kun versio on valittu"
         }
       },
       "name": "Tuotetiedot"

diff --git a/locales/fr.schema.json b/locales/fr.schema.json
@@ -1330,6 +1330,9 @@
         },
         "enable_sticky_info": {
           "label": "Activer les informations produits collées sur de grands écrans"
+        },
+        "hide_variants": {
+          "label": "Masquer les supports multimédias des autres variantes après la sélection d'une variante"
         }
       },
       "name": "Informations produits"

diff --git a/locales/it.schema.json b/locales/it.schema.json
@@ -1335,6 +1335,9 @@
         },
         "enable_sticky_info": {
           "label": "Abilita le informazioni di prodotto fisse su schermi grandi"
+        },
+        "hide_variants": {
+          "label": "Nascondi i contenuti multimediali delle altre varianti dopo averne selezionata una"
         }
       }
     },

diff --git a/locales/ja.schema.json b/locales/ja.schema.json
@@ -1354,6 +1354,9 @@
         },
         "enable_sticky_info": {
           "label": "大画面で商品情報のスティッキー表示を有効にする"
+        },
+        "hide_variants": {
+          "label": "バリエーションを選択した後、他のバリエーションのメディアを非表示にする"
         }
       }
     },

diff --git a/locales/ko.schema.json b/locales/ko.schema.json
@@ -1354,6 +1354,9 @@
         },
         "enable_sticky_info": {
           "label": "큰 화면에 제품 정보 스티커 사용"
+        },
+        "hide_variants": {
+          "label": "이형 상품을 선택한 후 다른 이형 상품의 미디어 숨기기"
         }
       }
     },

diff --git a/locales/pl.schema.json b/locales/pl.schema.json
@@ -1335,6 +1335,9 @@
         },
         "enable_sticky_info": {
           "label": "Włącz przypiętą informację o produkcie na dużych ekranach"
+        },
+        "hide_variants": {
+          "label": "Ukryj multimedia innych wariantów po wybraniu wariantu"
         }
       }
     },

diff --git a/locales/th.schema.json b/locales/th.schema.json
@@ -1346,6 +1346,9 @@
         },
         "enable_sticky_info": {
           "label": "เปิดใช้ข้อมูลสินค้าแบบยึดตำแหน่งบนหน้าจอใหญ่"
+        },
+        "hide_variants": {
+          "label": "ซ่อนสื่อของตัวเลือกสินค้าอื่นๆ หลังจากเลือกตัวเลือกสินค้า"
         }
       }
     },

diff --git a/locales/zh-CN.schema.json b/locales/zh-CN.schema.json
@@ -1354,6 +1354,9 @@
         },
         "enable_sticky_info": {
           "label": "在较大屏幕上启用粘性产品信息"
+        },
+        "hide_variants": {
+          "label": "在选择多属性后隐藏其他多属性的媒体文件"
         }
       }
     },

diff --git a/sections/header.liquid b/sections/header.liquid
@@ -437,15 +437,19 @@
       this.header = document.getElementById('shopify-section-header');
       this.headerBounds = {};
       this.currentScrollTop = 0;
+      this.preventReveal = false;
 
       this.onScrollHandler = this.onScroll.bind(this);
+      this.hideHeaderOnScrollUp = () => this.preventReveal = true;
 
+      this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
       window.addEventListener('scroll', this.onScrollHandler, false);
 
       this.createObserver();
     }
 
     disconnectedCallback() {
+      this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
       window.removeEventListener('scroll', this.onScrollHandler);
     }
 
@@ -461,12 +465,22 @@
     onScroll() {
       const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
 
-      if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
+      if (this.preventReveal) {
+        window.clearTimeout(this.isScrolling);
+
+        this.isScrolling = setTimeout(() => {
+          this.preventReveal = false;
+        }, 66);
+
         requestAnimationFrame(this.hide.bind(this));
-      } else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
-        requestAnimationFrame(this.reveal.bind(this));
-      } else if (scrollTop <= this.headerBounds.top) {
-        requestAnimationFrame(this.reset.bind(this));
+      } else {
+        if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
+          requestAnimationFrame(this.hide.bind(this));
+        } else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
+          requestAnimationFrame(this.reveal.bind(this));
+        } else if (scrollTop <= this.headerBounds.top) {
+          requestAnimationFrame(this.reset.bind(this));
+        }
       }
 
       this.currentScrollTop = scrollTop;

diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -25,15 +25,16 @@
           {{ "accessibility.skip_to_product_info" | t }}
         </a>
         <ul class="product__media-list grid grid--peek list-unstyled slider slider--mobile" role="list">
+          {%- assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' -%}
           {%- if product.selected_or_first_available_variant.featured_media != null -%}
             {%- assign media = product.selected_or_first_available_variant.featured_media -%}
-            <li class="product__media-item grid__item slider__slide{% if media.media_type != 'image' %} product__media-item--full{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
+            <li class="product__media-item grid__item slider__slide{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
               {% render 'product-thumbnail', media: media, position: 'featured', loop: section.settings.enable_video_looping, modal_id: section.id %}
             </li>
           {%- endif -%}
           {%- for media in product.media -%}
             {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
-              <li class="product__media-item grid__item slider__slide{% if media.media_type != 'image' %} product__media-item--full{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
+              <li class="product__media-item grid__item slider__slide{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
                 {% render 'product-thumbnail', media: media, position: forloop.index, loop: section.settings.enable_video_looping, modal_id: section.id %}
               </li>
             {%- endunless -%}
@@ -44,7 +45,7 @@
             <span class="slider-counter--current">1</span>
             <span aria-hidden="true"> / </span>
             <span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
-            <span class="slider-counter--total">{{ product.media.size }}</span>
+            <span class="slider-counter--total">{% if section.settings.hide_variants %}{{ product.media.size | minus: variant_images.size | plus: 1 }}{% else %}{{ product.media.size }}{% endif %}</span>
           </div>
           <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
           <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
@@ -335,6 +336,7 @@
               width="1100"
               height="{{ 1100 | divided_by: media.preview_image.aspect_ratio | ceil }}"
               data-media-id="{{ media.id }}"
+              {% if section.settings.hide_variants and variant_images contains media.src %}class="product__media-item--variant"{% endif %}
             >
           {%- else -%}
             {%- if media.media_type == 'model' -%}
@@ -752,6 +754,12 @@
       "content": "t:sections.main-product.settings.header.content",
       "info": "t:sections.main-product.settings.header.info"
     },
+    {
+      "type": "checkbox",
+      "id": "hide_variants",
+      "default": false,
+      "label": "t:sections.main-product.settings.hide_variants.label"
+    },
     {
       "type": "checkbox",
       "id": "enable_video_looping",