Add alt text if it's not empty. Add role=presentation if alt is empty

Shopify · Sep 16, 2022 · 440e613 · 440e613
1 parent 8a6eb9e
commit 440e613
Showing 1 changed file with 27 additions and 8 deletions.
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -688,12 +688,12 @@
               {%- if product.metafields.reviews.rating.value != blank -%}
                 {% liquid
                   assign rating_decimal = 0
-                   assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1
-                   if decimal >= 0.3 and decimal <= 0.7
+                  assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1
+                  if decimal >= 0.3 and decimal <= 0.7
                     assign rating_decimal = 0.5
                   elsif decimal > 0.7
                     assign rating_decimal = 1
-                   endif
+                  endif
                 %}
                 <div
                   class="rating"
@@ -747,6 +747,11 @@
                       <img
                         src="{{ block.settings.image_1 | image_url }}"
                         class="image--{{ block.settings.layout }}"
+                        {% if block.settings.image_1.alt != blank %}
+                          alt="{{ block.settings.image_1.alt | escape }}"
+                        {% else %}
+                          role="presentation"
+                        {% endif %}
                         height="auto"
                         width="auto"
                         loading="lazy"
@@ -765,6 +770,11 @@
                       <img
                         src="{{ block.settings.image_2 | image_url }}"
                         class="image--{{ block.settings.layout }}"
+                        {% if block.settings.image_2.alt != blank %}
+                          alt="{{ block.settings.image_2.alt | escape }}"
+                        {% else %}
+                          role="presentation"
+                        {% endif %}
                         height="auto"
                         width="auto"
                         loading="lazy"
@@ -781,6 +791,11 @@
                       <img
                         src="{{ block.settings.image_3 | image_url }}"
                         class="image--{{ block.settings.layout }}"
+                        {% if block.settings.image_3.alt != blank %}
+                          alt="{{ block.settings.image_3.alt | escape }}"
+                        {% else %}
+                          role="presentation"
+                        {% endif %}
                         height="auto"
                         width="auto"
                         loading="lazy"
@@ -1106,23 +1121,27 @@
   {%- endif -%}
 
   <script>
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
       function isIE() {
         const ua = window.navigator.userAgent;
         const msie = ua.indexOf('MSIE ');
         const trident = ua.indexOf('Trident/');
 
-        return (msie > 0 || trident > 0);
+        return msie > 0 || trident > 0;
       }
 
       if (!isIE()) return;
       const hiddenInput = document.querySelector('#{{ product_form_id }} input[name="id"]');
       const noScriptInputWrapper = document.createElement('div');
-      const variantSwitcher = document.querySelector('variant-radios[data-section="{{ section.id }}"]') || document.querySelector('variant-selects[data-section="{{ section.id }}"]');
-      noScriptInputWrapper.innerHTML = document.querySelector('.product-form__noscript-wrapper-{{ section.id }}').textContent;
+      const variantSwitcher =
+        document.querySelector('variant-radios[data-section="{{ section.id }}"]') ||
+        document.querySelector('variant-selects[data-section="{{ section.id }}"]');
+      noScriptInputWrapper.innerHTML = document.querySelector(
+        '.product-form__noscript-wrapper-{{ section.id }}'
+      ).textContent;
       variantSwitcher.outerHTML = noScriptInputWrapper.outerHTML;
 
-      document.querySelector('#Variants-{{ section.id }}').addEventListener('change', function(event) {
+      document.querySelector('#Variants-{{ section.id }}').addEventListener('change', function (event) {
         hiddenInput.value = event.currentTarget.value;
       });
     });