Merge pull request #132 from Voog/131-sale-price-support

Add sale price support (#132)
Voog · Nov 23, 2023 · 3144056 · 3144056
2 parents c1d3ed5 + c7eb01d
commit 3144056
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 51 deletions.
diff --git a/components/buy-button.tpl b/components/buy-button.tpl
@@ -1,14 +1,16 @@
-{%- if product.price_min_with_tax != product.price_max_with_tax -%}
-  {%- assign with_price = true -%}
-{%- else -%}
+{%- if product.price_min_with_tax == product.price_max_with_tax and
+  product.effective_price_min_with_tax == product.effective_price_max_with_tax
+-%}
   {%- assign with_price = false -%}
+{%- else -%}
+  {%- assign with_price = true -%}
 {%- endif -%}
 
 {%- capture _button_attributes %}
   data-product-id="{{ product.id }}"
   data-product="{{ product | json | escape }}"
   data-settings="{&quot;title&quot;:&quot;{{ "add_to_cart" | lc | escape_once }}&quot;
-    {%- if with_price -%}
+    {%- if with_price and product.uses_variants -%}
       ,&quot;button_style&quot;:&quot;with_price&quot;
     {%- endif -%}
   }"
@@ -44,11 +46,9 @@
         {% else %}
           <span class="edy-buy-button-title">{{ 'add_to_cart' | lc | escape_once }}</span>
         {% endif -%}
-
-        {%- if with_price and product.price_min_with_tax == product.price_max_with_tax -%}
-          <span class="edy-buy-button-price">{{ product.price_with_tax | money_with_currency: product.currency }}</span>
-        {%- endif -%}
       </div>
+
+      <div class="edy-buy-button-price-container"></div>
     </div>
   </div>
 {% else %}

diff --git a/components/product-item.tpl b/components/product-item.tpl
@@ -54,11 +54,33 @@
           {{ look_closer_btn }}
           <div class="product_item-price">
             <div class="flex_box">
-              {%- if _buyButton.product.price_max_with_tax != _buyButton.product.price_min_with_tax -%}
-                {{ _buyButton.product.price_min_with_tax | money_with_currency: _buyButton.product.currency }}
-                <span class="pad_0-4">-</span>
-              {%- endif -%}
-              {{ _buyButton.product.price_max_with_tax | money_with_currency: _buyButton.product.currency }}
+              {%- capture original_price -%}
+                {%- if _buyButton.product.price_max_with_tax != _buyButton.product.price_min_with_tax -%}
+                  {{ _buyButton.product.price_min_with_tax | money_with_currency: _buyButton.product.currency }}
+                  <span> – </span>
+                {%- endif -%}
+                {{ _buyButton.product.price_max_with_tax | money_with_currency: _buyButton.product.currency }}
+              {%- endcapture -%}
+
+              <div class="product-price">
+                {% if _buyButton.product.on_sale? %}
+                  <s class="product-price-original">
+                    {{- original_price -}}
+                  </s>
+                {% endif %}
+
+                <span class="product-price-final">
+                  {%- if _buyButton.product.on_sale? -%}
+                    {% if _buyButton.product.effective_price_min_with_tax != _buyButton.product.effective_price_max_with_tax %}
+                      {{- _buyButton.product.effective_price_min_with_tax | money_with_currency: _buyButton.product.currency -}}
+                      <span> – </span>
+                    {%- endif -%}
+                    {{- _buyButton.product.effective_price_max_with_tax | money_with_currency: _buyButton.product.currency -}}
+                  {%- else -%}
+                    {{- original_price -}}
+                  {%- endif -%}
+                </span>
+              </div>
             </div>
           </div>
         {%- else -%}
@@ -68,8 +90,15 @@
             <div class="product_item-btn js-cart-btn p-rel" data-product-id="{{ _buyButton.product.id }}">{{ "add_to_cart" | lc | escape_once }}</div>
           {%- endif -%}
           <div class="product_item-price">
-            <span>
-            {{ _buyButton.product.price_with_tax | money_with_currency: _buyButton.product.currency }}
+            <span class="product-price">
+              {%- if _buyButton.product.on_sale? -%}
+                <s class="product-price-original">
+                  {{ _buyButton.product.price_min_with_tax | money_with_currency: _buyButton.product.currency }}
+                </s>
+              {%- endif -%}
+              <span class="product-price-final">
+                {{- _buyButton.product.effective_price_min_with_tax | money_with_currency: _buyButton.product.currency -}}
+              </span>
             </span>
           </div>
 

diff --git a/components/template-cs-style-rules.tpl b/components/template-cs-style-rules.tpl
@@ -252,6 +252,14 @@ body {
   -webkit-box-shadow: var(--content-button-border-width) var(--content-button-border-width) 0 rgba(0, 0, 0, 0.2);
           box-shadow: var(--content-button-border-width) var(--content-button-border-width) 0 rgba(0, 0, 0, 0.2);
 }
+.content-formatted .edy-buy-button-price-container .edy-buy-button-price-original,
+.content-formatted .edy-buy-button-price-container .edy-buy-button-effective-price {
+  color: var(--content-body-text-color);
+}
+.dark-background .content-formatted .edy-buy-button-price-container .edy-buy-button-price-original,
+.dark-background .content-formatted .edy-buy-button-price-container .edy-buy-button-effective-price {
+  color: var(--third-color);
+}
 
 .content-formatted .form_field_textfield, .content-formatted .form_field_textarea, .content-formatted .form_field_select {
   font-size: var(--form-field-font-size);
@@ -327,6 +335,8 @@ body {
   font-size: var(--content-area-product-price__font-size);
   font-weight: var(--content-area-product-price__font-weight);
   font-style: var(--content-area-product-price__font-style);
+}
+.product-content .product-price .product-price-final {
   -webkit-text-decoration: var(--content-area-product-price__text-decoration);
           text-decoration: var(--content-area-product-price__text-decoration);
 }
@@ -352,7 +362,6 @@ body {
 .dark-background .edy-product-widget-grid .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-link {
   color: var(--third-color);
 }
-.dark-background .edy-product-widget-grid .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-price,
 .dark-background .edy-product-widget-grid .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-description {
   color: var(--third-color);
   opacity: 0.7;
@@ -372,10 +381,6 @@ body {
 .dark-background .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-header .edy-product-widget-item-title .edy-product-widget-item-link {
   color: var(--third-color);
 }
-.dark-background .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-header .edy-product-widget-item-price {
-  color: var(--third-color);
-  opacity: 0.7;
-}
 .dark-background .edy-product-widget-list .edy-product-widget-item-wrap .edy-product-widget-item .edy-product-widget-item-details-wrap .edy-product-widget-item-header .edy-product-widget-item-out-of-stock {
   color: var(--third-color);
 }
@@ -391,9 +396,14 @@ body {
   color: var(--secondary-color-content);
 }
 
+.dark-background .edy-product-widget-item-price-original,
+.dark-background .edy-product-widget-item-price-final,
 .dark-background .edy-product-widget-filter-name,
 .dark-background .edy-product-widget-filter-sort,
 .dark-background .edy-product-widget-filter-label,
 .dark-background .edy-product-widget-filter-search-input {
-  color: var(--fourth-color);
+  color: var(--third-color);
+}
+.dark-background .edy-product-widget-item-price-original {
+  opacity: 0.4;
 }
diff --git a/layouts/auto_generated_product.tpl b/layouts/auto_generated_product.tpl
@@ -84,12 +84,32 @@
                 <h1>{%- editable product.name -%}</h1>
               </div>
 
-              <div class="product-price">
-                {%- if product.price_max_with_tax != product.price_min_with_tax -%}
-                  {{ product.price_min_with_tax | money_with_currency: product.currency -}}
-                  <span class="product-price-divider">–</span>
+              {%- capture original_price -%}
+                {% if product.price_min_with_tax != product.price_max_with_tax -%}
+                  {{- product.price_min_with_tax | money_with_currency: product.currency -}}
+                  <span> – </span>
                 {%- endif -%}
-                {{ product.price_max_with_tax | money_with_currency: product.currency -}}
+                {{- product.price_max_with_tax | money_with_currency: product.currency -}}
+              {%- endcapture -%}
+
+              <div class="product-price">
+                {% if product.on_sale? -%}
+                  <s class="product-price-original">
+                    {{- original_price -}}
+                  </s>
+                {% endif -%}
+
+                <span class="product-price-final">
+                  {%- if product.on_sale? -%}
+                    {% if product.effective_price_min_with_tax != product.effective_price_max_with_tax %}
+                      {{- product.effective_price_min_with_tax | money_with_currency: product.currency -}}
+                      <span> – </span>
+                    {%- endif -%}
+                    {{- product.effective_price_max_with_tax | money_with_currency: product.currency -}}
+                  {% else %}
+                    {{ original_price }}
+                  {% endif -%}
+                </span>
               </div>
 
               <section class="content-formatted" data-search-indexing-allowed="true">

diff --git a/sources/components/custom-styles/template-cs-style-rules.scss b/sources/components/custom-styles/template-cs-style-rules.scss
@@ -311,6 +311,17 @@ body {
       box-shadow: var(--content-button-border-width) var(--content-button-border-width) 0 rgba($black, .2);
     }
   }
+
+  .edy-buy-button-price-container {
+    .edy-buy-button-price-original,
+    .edy-buy-button-effective-price {
+      color: var(--content-body-text-color);
+
+      .dark-background & {
+        color: var(--third-color);
+      }
+    }
+  }
 }
 
 //==============================================================================
@@ -406,15 +417,20 @@ body {
     font-size: var(--content-area-product-price__font-size);
     font-weight: var(--content-area-product-price__font-weight);
     font-style: var(--content-area-product-price__font-style);
-    text-decoration: var(--content-area-product-price__text-decoration);
+
+    .product-price-final {
+      text-decoration: var(--content-area-product-price__text-decoration);
+    }
   }
+
   .product-description {
     color: var(--content-area-product-description__color);
     font-size: var(--content-area-product-description__font-size);
     font-weight: var(--content-area-product-description__font-weight);
     font-style: var(--content-area-product-description__font-style);
     text-decoration: var(--content-area-product-description__text-decoration);
   }
+
   .content-item-title h1 {
     color: var(--content-area-product-title__color);
     font-size: var(--content-area-product-title__font-size);
@@ -433,7 +449,6 @@ body {
         color: var(--third-color);
       }
 
-      .edy-product-widget-item-price,
       .edy-product-widget-item-description {
         color: var(--third-color);
         opacity: .7;
@@ -469,11 +484,6 @@ body {
         }
       }
 
-      .edy-product-widget-item-price {
-        color: var(--third-color);
-        opacity: .7;
-      }
-
       .edy-product-widget-item-out-of-stock {
         color: var(--third-color);
       }
@@ -495,10 +505,16 @@ body {
 }
 
 .dark-background {
+  .edy-product-widget-item-price-original,
+  .edy-product-widget-item-price-final,
   .edy-product-widget-filter-name,
   .edy-product-widget-filter-sort,
   .edy-product-widget-filter-label,
   .edy-product-widget-filter-search-input {
-    color: var(--fourth-color);
+    color: var(--third-color);
+  }
+
+  .edy-product-widget-item-price-original {
+    opacity: .4;
   }
 }
diff --git a/sources/stylesheets/content/_buy-button.scss b/sources/stylesheets/content/_buy-button.scss
@@ -9,6 +9,10 @@
       word-break: normal;
     }
     // sass-lint:enable class-name-format
+
+    .edy-buy-button-price-container .edy-buy-button-price-original {
+      opacity: .4;
+    }
   }
 
   .edy-buy-button-variants {

diff --git a/sources/stylesheets/layouts/_auto-generated-product.scss b/sources/stylesheets/layouts/_auto-generated-product.scss
@@ -10,8 +10,14 @@
   .product-price {
     padding: 12px 0 24px 0;
 
-    &-divider {
-      margin: 0 4px;
+    .product-price-original {
+      display: inline-block;
+      padding-right: 4px;
+      opacity: .4;
+    }
+
+    .product-price-final {
+      display: inline-block;
     }
   }
 

diff --git a/sources/stylesheets/layouts/_product-list.scss b/sources/stylesheets/layouts/_product-list.scss
@@ -4,18 +4,18 @@
       .product_item-title,
       .product_item-btn,
       .product_item-price {
-        color: var(--color-main);
+        color: var(--main-color-content);
         font-family: var(--font-primary);
         font-size: 16px;
         line-height: 1.3;
         word-break: break-word;
 
         .dark-background & {
-          color: $white;
+          color: var(--third-color);
         }
 
         a {
-          color: var(--color-main);
+          color: var(--main-color-content);
         }
       }
 
@@ -37,7 +37,10 @@
         transition: all 300ms;
         display: flex;
         flex-wrap: wrap;
-        color: var(--secondary-color);
+
+        .product-price-original {
+          opacity: .4;
+        }
       }
 
       &:hover {
@@ -66,7 +69,7 @@
 
     &-list {
       a {
-        color: var(--color-main);
+        color: var(--main-color-content);
       }
     }
 
@@ -75,7 +78,7 @@
       overflow: hidden;
 
       a {
-        color: var(--color-main);
+        color: var(--main-color-content);
       }
       &--wrap {
         display: flex;