Updated product sale presentation in grid/list

locales/de.json

@@ -262,6 +262,7 @@
     },
     "product": {
       "sold_out": "Ausverkauft",
+      "on_sale": "Im Angebot",
       "on_sale_from_html": "<strong>Im Angebot</strong> ab {{ price }}",
       "unavailable": "Nicht verfügbar",
       "compare_at": "Vergleichen bei",

locales/en.default.json

@@ -262,6 +262,7 @@
     },
     "product": {
       "sold_out": "Sold Out",
+      "on_sale": "On Sale",
       "on_sale_from_html": "<strong>On Sale</strong> from {{ price }}",
       "unavailable": "Unavailable",
       "compare_at": "Compare at",

locales/es.json

@@ -262,6 +262,7 @@
     },
     "product": {
       "sold_out": "Agotado",
+      "on_sale": "En oferta",
       "on_sale_from_html": "<strong>En oferta</strong> desde {{ price }}",
       "unavailable": "No disponible",
       "compare_at": " Comparar en",

locales/fr.json

@@ -262,6 +262,7 @@
     },
     "product": {
       "sold_out": "Épuisé",
+      "on_sale": "En solde",
       "on_sale_from_html": "<strong>En solde</strong> {{ price }}",
       "unavailable": "Non disponible",
       "compare_at": "Était",

locales/pt-BR.json

@@ -262,6 +262,7 @@
     },
     "product": {
       "sold_out": "Esgotado",
+      "on_sale": "Em promoção",
       "on_sale_from_html": "<strong>Em promoção</strong>, a partir de {{ price }}",
       "unavailable": "Indisponível",
       "compare_at": "Preço normal:",

locales/pt-PT.json

@@ -262,6 +262,7 @@
     },
     "product": {
       "sold_out": "Esgotado",
+      "on_sale": "Em Promoção",
       "on_sale_from_html": "<strong>Em Promoção</strong> desde {{ price }}",
       "unavailable": "Indisponível",
       "compare_at": "Comparar em",

snippets/product-grid-item.liquid

@@ -66,14 +66,23 @@
       You can show a leading 'from' or 'up to' by checking 'product.price_varies'
       if your variants have different prices.
     {% endcomment %}
-    {% if product.price_varies %}{{ 'products.general.from' | t }}{% endif %}
-    {{ product.price | money }}
+    {% if on_sale %}
+      {% if product.price_varies %}
+        {% assign sale_price = product.price | money %}
+        {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
+      {% else %}
+        <strong>{{ 'products.product.on_sale' | t }}</strong>
+        {{ product.price | money }}
+      {% endif %}
+    {% else %}
+      {% if product.price_varies %}{{ 'products.general.from' | t }}{% endif %}
+      {{ product.price | money }}
+    {% endif %}
     {% if sold_out %}
       <br><strong>{{ 'products.product.sold_out' | t }}</strong>
     {% endif %}
     {% if on_sale %}
-      {% assign sale_price =  product.compare_at_price | money %}
-      <br>{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
+      <br><s>{{ product.compare_at_price | money }}</s>
     {% endif %}
   </p>
 

snippets/product-list-item.liquid

@@ -45,30 +45,43 @@
         <img src="{{ product.featured_image.src | img_url: 'medium' }}" alt="{{ product.featured_image.alt | escape }}" class="grid__image">
       </a>
     </div>
-    <div class="grid__item large--three-fifths large--display-table-cell medium--two-thirds">
-      <p class="h6">{{ product.title }}</p>
-      <div class="rte">
-        {% if product.excerpt.size > 0 %}
-          {{ product.excerpt }}
-        {% else %}
-          <p>{{ product.content | strip_html | truncatewords: 30 }}</p>
-        {% endif %}
+    <div class="grid__item large--four-fifths large--display-table-cell medium--two-thirds">
+      <div class="grid">
+        <div class="grid__item large--three-quarters medium--two-thirds">
+          <p class="h6">{{ product.title }}</p>
+          <div class="rte">
+            {% if product.excerpt.size > 0 %}
+              {{ product.excerpt }}
+            {% else %}
+              <p>{{ product.content | strip_html | truncatewords: 30 }}</p>
+            {% endif %}
+          </div>
+        </div>
+        <div class="grid__item large--one-quarter medium--one-third">
+          {% comment %}
+            You can show a leading 'from' or 'up to' by checking 'product.price_varies'
+            if your variants have different prices.
+          {% endcomment %}
+          {% if on_sale %}
+            {% if product.price_varies %}
+              {% assign sale_price = product.price | money %}
+              {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
+            {% else %}
+              <strong>{{ 'products.product.on_sale' | t }}</strong>
+              {{ product.price | money }}
+            {% endif %}
+          {% else %}
+            {% if product.price_varies %}{{ 'products.general.from' | t }}{% endif %}
+            {{ product.price | money }}
+          {% endif %}
+          {% if sold_out %}
+            <br><strong>{{ 'products.product.sold_out' | t }}</strong>
+          {% endif %}
+          {% if on_sale %}
+            <br><s>{{ product.compare_at_price | money }}</s>
+          {% endif %}
+        </div>
       </div>
     </div>
-    <div class="grid__item large--one-fifth large--display-table-cell medium--two-thirds">
-      {% comment %}
-        You can show a leading 'from' or 'up to' by checking 'product.price_varies'
-        if your variants have different prices.
-      {% endcomment %}
-      {% if product.price_varies %}{{ 'products.general.from' | t }}{% endif %}
-      {{ product.price | money }}
-      {% if sold_out %}
-        <br><strong>{{ 'products.product.sold_out' | t }}</strong>
-      {% endif %}
-      {% if on_sale %}
-        {% assign sale_price =  product.compare_at_price | money %}
-        <br>{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
-      {% endif %}
-    </div>
   </div>
 </div>