Variant media modal fix (Shopify#1985)

* Fix duplicate class attr issue * Prevent use of lazy_load variable in complementary block
Gravytrain-UK · Sep 23, 2022 · b041dce · b041dce
1 parent 7541181
commit b041dce
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -739,7 +739,7 @@
                                         card_product: product,
                                         media_aspect_ratio: block.settings.image_ratio,
                                         show_secondary_image: false,
-                                        lazy_load: lazy_load,
+                                        lazy_load: false,
                                         show_quick_add: block.settings.enable_quick_add,
                                         section_id: section.id,
                                         horizontal_class: true

diff --git a/snippets/product-media.liquid b/snippets/product-media.liquid
@@ -4,7 +4,7 @@
     Accepts:
     - media: {Object} Product Media object
     - loop: {Boolean} Enable video looping (optional)
-    - variant_image: {Boolean} The media associated with a variant
+    - variant_image: {Boolean} Whether or not media is associated with a variant
 
     Usage:
     {% render 'product-media',
@@ -16,7 +16,7 @@
 
 {%- if media.media_type == 'image' -%}
   <img
-    class="global-media-settings global-media-settings--no-shadow"
+    class="global-media-settings global-media-settings--no-shadow{% if variant_image %} product__media-item--variant{% endif %}"
     srcset="{%- if media.preview_image.width >= 550 -%}{{ media.preview_image | image_url: width: 550 }} 550w,{%- endif -%}
             {%- if media.preview_image.width >= 1100 -%}{{ media.preview_image | image_url: width: 1100 }} 1100w,{%- endif -%}
             {%- if media.preview_image.width >= 1445 -%}{{ media.preview_image | image_url: width: 1445 }} 1445w,{%- endif -%}
@@ -33,7 +33,6 @@
     width="1100"
     height="{{ 1100 | divided_by: media.preview_image.aspect_ratio | ceil }}"
     data-media-id="{{ media.id }}"
-    {% if variant_image %}class="product__media-item--variant"{% endif %}
   >
 {%- else -%}
   {%- if media.media_type == 'model' -%}