Account for product media variant edge cases

Shopify · Apr 21, 2022 · 6249754 · 6249754
1 parent 2d6c17d
commit 6249754
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 7 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -2854,11 +2854,11 @@ details-disclosure > details {
 }
 
 .grid--collapsed-x.contains-content-container .content-container:after,
-.grid--collapsed-y.contains-media .global-media-settings:after {
+.grid--collapsed-x.contains-media .global-media-settings:after {
   margin-left: var(--collapsed-shadow-offset-x);
 }
 
-.grid--collapsed-x.contains-content-container .content-container:after,
+.grid--collapsed-y.contains-content-container .content-container:after,
 .grid--collapsed-y.contains-media .global-media-settings:after {
   margin-top: var(--collapsed-shadow-offset-y);
 }

diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -537,10 +537,18 @@ a.product__text {
 }
 
 @media screen and (max-width: 749px) {
-  .product__media-item--variant:first-child {
+  /* center only visible slider item */
+  .product__media-item--variant.product__media-item--only-visible {
     padding-right: 1.5rem;
   }
 }
+/* override slider radius collapse selectors (gallery with 1 visible item still renders as slider) */
+.grid--collapsed.grid.grid.grid .grid__item.product__media-item--variant.product__media-item--only-visible {
+  --top-left-radius: var(--media-radius);
+  --top-right-radius: var(--media-radius);
+  --bottom-right-radius: var(--media-radius);
+  --bottom-left-radius: var(--media-radius);
+}
 
 @media screen and (min-width: 750px) and (max-width: 989px) {
   .product__media-list .product__media-item:first-child {

diff --git a/sections/main-collection-product-grid.liquid b/sections/main-collection-product-grid.liquid
@@ -101,7 +101,7 @@
             <ul id="product-grid" data-id="{{ section.id }}" class="
               grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down
               grid--{{ section.settings.columns_desktop }}-col-desktop
-              {% render 'collapsed-classes' %} contains-card">
+              {% render 'collapsed-classes' %} contains-card{% if settings.card_style == 'standard' %} contains-card--standard{% endif %}">
               {%- for product in collection.products -%}
                 {% assign lazy_load = false %}
                 {%- if forloop.index > 2 -%}

diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -31,6 +31,13 @@
     <link id="ModelViewerOverride" rel="stylesheet" href="{{ 'component-model-viewer-ui.css' | asset_url }}" media="print" onload="this.media='all'">
   {%- endif -%}
 
+  {%- liquid
+    assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src'
+    if section.settings.hide_variants and variant_images.size == product.media.size
+      assign single_visible_media = true
+    endif
+  -%}
+
   <div class="product product--{{ section.settings.media_size }} product--{{ section.settings.gallery_layout }} grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
     <div class="grid__item product__media-wrapper">
       <media-gallery id="MediaGallery-{{ section.id }}" role="region" {% if section.settings.enable_sticky_info %}class="product__media-gallery"{% endif %} aria-label="{{ 'products.product.media.gallery_viewer' | t }}" data-desktop-layout="{{ section.settings.gallery_layout }}">
@@ -41,7 +48,6 @@
           </a>
           <ul id="Slider-Gallery-{{ section.id }}" class="product__media-list contains-media grid grid--peek{% render 'collapsed-classes' %} list-unstyled slider slider--mobile" role="list">
             {%- liquid
-              assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src'
               assign media_count = product.media.size
               if section.settings.hide_variants
                 assign media_count = media_count | minus: variant_images.size | plus: 1
@@ -57,14 +63,14 @@
             -%}
             {%- if product.selected_or_first_available_variant.featured_media != null -%}
               {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
-              <li id="Slide-{{ section.id }}-{{ featured_media.id }}" class="product__media-item grid__item slider__slide is-active{% if featured_media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains featured_media.src %} product__media-item--variant{% endif %}" data-media-id="{{ section.id }}-{{ featured_media.id }}">
+              <li id="Slide-{{ section.id }}-{{ featured_media.id }}" class="product__media-item grid__item slider__slide is-active{% if featured_media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains featured_media.src %} product__media-item--variant{% endif %}{% if single_visible_media %} product__media-item--only-visible{% endif %}" data-media-id="{{ section.id }}-{{ featured_media.id }}">
                 {%- assign media_position = 1 -%}
                 {% render 'product-thumbnail', media: featured_media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: false %}
               </li>
             {%- endif -%}
             {%- for media in product.media -%}
               {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
-                <li id="Slide-{{ section.id }}-{{ media.id }}" class="product__media-item grid__item slider__slide{% if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %} is-active{% endif %}{% 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 }}">
+                <li id="Slide-{{ section.id }}-{{ media.id }}" class="product__media-item grid__item slider__slide{% if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %} is-active{% endif %}{% 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 %}{% if single_visible_media %} product__media-item--only-visible{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
                   {%- assign media_position = media_position | default: 0 | plus: 1 -%}
                   {% render 'product-thumbnail', media: media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: true %}
                 </li>