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

@@ -33,7 +33,7 @@
   Check if the product is sold out and set a variable to be used below.
 {% endcomment %}
 {% assign sold_out = true %}
-{% if product.available  %}
+{% if product.available %}
   {% assign sold_out = false %}
 {% endif %}
 
@@ -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

@@ -18,7 +18,7 @@
   Check if the product is sold out and set a variable to be used below.
 {% endcomment %}
 {% assign sold_out = true %}
-{% if product.available  %}
+{% if product.available %}
   {% assign sold_out = false %}
 {% endif %}
 
@@ -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>

snippets/search-result-grid.liquid

@@ -18,6 +18,22 @@
   {% assign grid_item_width = 'large--one-third medium--one-half' %}
 {% endunless %}
 
+{% comment %}
+  Check if the product is on sale and set a variable to be used below.
+{% endcomment %}
+{% assign on_sale = false %}
+{% if item.compare_at_price > item.price %}
+  {% assign on_sale = true %}
+{% endif %}
+
+{% comment %}
+  Check if the product is sold out and set a variable to be used below.
+{% endcomment %}
+{% assign sold_out = true %}
+{% if item.available %}
+  {% assign sold_out = false %}
+{% endif %}
+
 <div class="grid__item search-result {{ grid_item_width }}">
 
   {% if item.featured_image %}
@@ -30,20 +46,31 @@
 
     <h5>{{ item.title | link_to: item.url }}</h5>
 
-    <h6>
-      {% if item.compare_at_price > item.price %}
-        <span class="on-sale" itemprop="price">
-          {{ item.price | money }}
-        </span>
-        <small>
-          {{ 'products.product.compare_at' | t }}
-          {{ item.compare_at_price_max | money }}
-        </small>
-      {% else %}
-        <span itemprop="price">
-          {{ item.price | money }}
-        </span>
-      {% endif %}
-    </h6>
+    {% if item.price %}
+      <p>
+        {% 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 item.price_varies %}
+            {% assign sale_price = item.price | money %}
+            {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
+          {% else %}
+            <strong>{{ 'products.product.on_sale' | t }}</strong>
+            <span itemprop="price">{{ item.price | money }}</span>
+          {% endif %}
+        {% else %}
+          {% if item.price_varies %}{{ 'products.general.from' | t }}{% endif %}
+          <span itemprop="price">{{ item.price | money }}</span>
+        {% endif %}
+        {% if sold_out %}
+          <br><strong>{{ 'products.product.sold_out' | t }}</strong>
+        {% endif %}
+        {% if on_sale %}
+          <br><s>{{ item.compare_at_price | money }}</s>
+        {% endif %}
+      </p>
+    {% endif %}
 
 </div>

snippets/search-result.liquid

@@ -14,6 +14,22 @@
 
 {% endcomment %}
 
+{% comment %}
+  Check if the product is on sale and set a variable to be used below.
+{% endcomment %}
+{% assign on_sale = false %}
+{% if item.compare_at_price > item.price %}
+  {% assign on_sale = true %}
+{% endif %}
+
+{% comment %}
+  Check if the product is sold out and set a variable to be used below.
+{% endcomment %}
+{% assign sold_out = true %}
+{% if item.available %}
+  {% assign sold_out = false %}
+{% endif %}
+
 <div class="grid">
 
   {% if item.featured_image %}
@@ -33,22 +49,31 @@
   <div class="grid__item two-thirds {% unless item.featured_image %}push--one-third{% endunless %}">
     <h3>{{ item.title | link_to: item.url }}</h3>
 
-    {% comment %}
-      To show the price, let's pull what was already done on the product page,
-      but change product to item.
-    {% endcomment %}
-    {% if item.compare_at_price > item.price %}
-      <span class="on-sale" itemprop="price">
-        {{ item.price | money }}
-      </span>
-      <small>
-        {{ 'products.product.compare_at' | t }}
-        {{ item.compare_at_price_max | money }}
-      </small>
-    {% else %}
-      <span itemprop="price">
-        {{ item.price | money }}
-      </span>
+    {% if item.price %}
+      <p>
+        {% 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 item.price_varies %}
+            {% assign sale_price = item.price | money %}
+            {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
+          {% else %}
+            <strong>{{ 'products.product.on_sale' | t }}</strong>
+            <span itemprop="price">{{ item.price | money }}</span>
+          {% endif %}
+        {% else %}
+          {% if item.price_varies %}{{ 'products.general.from' | t }}{% endif %}
+          <span itemprop="price">{{ item.price | money }}</span>
+        {% endif %}
+        {% if sold_out %}
+          <br><strong>{{ 'products.product.sold_out' | t }}</strong>
+        {% endif %}
+        {% if on_sale %}
+          <br><s>{{ item.compare_at_price | money }}</s>
+        {% endif %}
+      </p>
     {% endif %}
 
     {% comment %}