B2B compare at price with price range (#2858)

* Add sale badge and price-range for volume-pricing * Add compare_at price to PDP and Feat Prod. * Change opacity to 100% for price per item. * Update the logic * Hide price per item for unavailable variants. * Remove margin for dl. * Refactoring * Correct a mistake in liquid. * Change the JS logic back for updating price per item * Add compare at to prod card. Add style to compare at
Shopify · Jul 26, 2023 · ca15c89 · ca15c89
1 parent 91d6171
commit ca15c89
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 8 deletions.
diff --git a/assets/component-price.css b/assets/component-price.css
@@ -64,10 +64,15 @@
 }
 
 .price--sold-out .price__badge-sold-out,
-.price--on-sale .price__badge-sale {
+.price--on-sale .price__badge-sale,
+.volume-pricing--sale-badge .price__badge-sale {
   display: inline-block;
 }
 
+.volume-pricing--sale-badge .price__badge-sale {
+  margin-left: 0.5rem;
+}
+
 .price--on-sale .price__sale {
   display: initial;
   flex-direction: row;

diff --git a/assets/component-volume-pricing.css b/assets/component-volume-pricing.css
@@ -49,10 +49,22 @@ volume-pricing show-more-button {
 }
 
 .product-form__input .price-per-item {
+  color: rgba(var(--color-foreground));
   font-size: 1.4rem;
   letter-spacing: 0.06rem;
 }
 
+.price-per-item dl {
+  margin: 0;
+}
+
 .price-per-item dd {
   margin-left: 0;
 }
+
+.price-per-item__container .variant-item__old-price,
+.price__regular .variant-item__old-price {
+  color: rgba(var(--color-foreground), 0.75);
+  font-size: 1.2rem;
+  letter-spacing: 0.07rem;
+}
diff --git a/assets/global.js b/assets/global.js
@@ -1124,6 +1124,7 @@ class VariantSelects extends HTMLElement {
 
         if (pricePerItemSource && pricePerItemDestination) {
           pricePerItemDestination.innerHTML = pricePerItemSource.innerHTML;
+          pricePerItemDestination.classList.toggle('visibility-hidden', pricePerItemSource.classList.contains('visibility-hidden'));
         }
 
         const price = document.getElementById(`price-${this.dataset.section}`);
@@ -1174,12 +1175,14 @@ class VariantSelects extends HTMLElement {
     const price = document.getElementById(`price-${this.dataset.section}`);
     const inventory = document.getElementById(`Inventory-${this.dataset.section}`);
     const sku = document.getElementById(`Sku-${this.dataset.section}`);
+    const pricePerItem = document.getElementById(`Price-Per-Item-${this.dataset.section}`);
 
     if (!addButton) return;
     addButtonText.textContent = window.variantStrings.unavailable;
     if (price) price.classList.add('visibility-hidden');
     if (inventory) inventory.classList.add('visibility-hidden');
     if (sku) sku.classList.add('visibility-hidden');
+    if (pricePerItem) pricePerItem.classList.add('visibility-hidden');
   }
 
   getVariantData() {

diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
@@ -290,7 +290,20 @@
                         data-variant-id="{{ product.selected_or_first_available_variant.id }}"
                       >
                         {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
+                          {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
                           <div class="price-per-item">
+                            {%- if variant_price_compare -%}
+                              <dl class="price-per-item--current">
+                                <dt class="visually-hidden">
+                                  {{ 'products.product.price.regular_price' | t }}
+                                </dt>
+                                <dd>
+                                  <s class="variant-item__old-price">
+                                    {{ variant_price_compare | money_with_currency }}
+                                  </s>
+                                </dd>
+                              </dl>
+                            {%- endif -%}
                             {%- if current_qty_for_volume_pricing < volume_pricing_array.last.minimum_quantity -%}
                               {%- assign variant_price = product.selected_or_first_available_variant.price
                                 | money_with_currency
@@ -326,7 +339,7 @@
                                 </dt>
                                 <dd>
                                   <s class="variant-item__old-price">
-                                    {{ variant_price_compare | money }}
+                                    {{ variant_price_compare | money_with_currency }}
                                   </s>
                                 </dd>
                                 <dt class="visually-hidden">

diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -278,7 +278,20 @@
                   {%- if product.quantity_price_breaks_configured? -%}
                     <price-per-item class="no-js-hidden" id="Price-Per-Item-{{ section.id }}" data-section-id="{{ section.id }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
                       {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
+                        {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
                         <div class="price-per-item">
+                          {%- if variant_price_compare -%}
+                            <dl class="price-per-item--current">
+                              <dt class="visually-hidden">
+                                {{ 'products.product.price.regular_price' | t }}
+                              </dt>
+                              <dd>
+                                <s class="variant-item__old-price">
+                                  {{ variant_price_compare | money_with_currency }}
+                                </s>
+                              </dd>
+                            </dl>
+                          {%- endif -%}
                           {%- if current_qty_for_volume_pricing < volume_pricing_array.last.minimum_quantity -%}
                             {%- assign variant_price = product.selected_or_first_available_variant.price | money_with_currency -%}
                             <span class="price-per-item--current">{{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }}</span>
@@ -292,7 +305,7 @@
                             {%- endfor -%}
                           {%- endif -%}
                         </div>
-                        {%- else -%}
+                      {%- else -%}
                         {%- assign variant_price = product.selected_or_first_available_variant.price | money_with_currency -%}
                         {%- assign variant_price_compare = product.selected_or_first_available_variant.compare_at_price -%}
                         <div class="price-per-item">
@@ -303,7 +316,7 @@
                               </dt>
                               <dd>
                                 <s class="variant-item__old-price">
-                                  {{ variant_price_compare | money }}
+                                  {{ variant_price_compare | money_with_currency }}
                                 </s>
                               </dd>
                               <dt class="visually-hidden">

diff --git a/snippets/card-product.liquid b/snippets/card-product.liquid
@@ -21,6 +21,7 @@
 {% endcomment %}
 
 {{ 'component-rating.css' | asset_url | stylesheet_tag }}
+{{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
 
 {%- if card_product and card_product != empty -%}
   {%- liquid
@@ -198,7 +199,7 @@
               </p>
             {%- endif -%}
 
-            {% render 'price', product: card_product, price_class: '' %}
+            {% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
             {%- if card_product.quantity_price_breaks_configured? -%}
               <div class="card__information-volume-pricing-note">
                 <span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
@@ -377,7 +378,7 @@
               <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
               <div class="caption-with-letter-spacing light">{{ 'products.product.vendor' | t }}</div>
             {%- endif -%}
-            {% render 'price' %}
+            {% render 'price', show_compare_at_price: true %}
           </div>
         </div>
       </div>

diff --git a/snippets/price.liquid b/snippets/price.liquid
@@ -6,6 +6,7 @@
   - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
   - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
   - price_class: {String} Adds a price class to the price element (optional)
+  - show_compare_at_price: {Boolean} Renders the compare at price if the product matches the condition (optional)
 
   Usage:
   {% render 'price', product: product %}
@@ -40,8 +41,9 @@
   class="
     price
     {%- if price_class %} {{ price_class }}{% endif -%}
-    {%- if available == false %} price--sold-out {% endif -%}
-    {%- if compare_at_price > price %} price--on-sale {% endif -%}
+    {%- if available == false %} price--sold-out{% endif -%}
+    {%- if compare_at_price > price and product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
+    {%- if compare_at_price > price and product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
     {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
     {%- if show_badges %} price--show-badge{% endif -%}
   "
@@ -54,6 +56,22 @@
     {%- endcomment -%}
     <div class="price__regular">
       {%- if product.quantity_price_breaks_configured? -%}
+        {%- if show_compare_at_price -%}
+          {%- unless product.price_varies == false and product.compare_at_price_varies %}
+            <span class="visually-hidden visually-hidden--inline">
+              {{- 'products.product.price.regular_price' | t -}}
+            </span>
+            <span>
+              <s class="price-item price-item--regular variant-item__old-price">
+                {% if settings.currency_code_enabled %}
+                  {{ compare_at_price | money_with_currency }}
+                {% else %}
+                  {{ compare_at_price | money }}
+                {% endif %}
+              </s>
+            </span>
+          {%- endunless -%}
+        {%- endif -%}
         <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
         <span class="price-item price-item--regular">
           {{- 'products.product.volume_pricing.price_range' | t: minimum: money_price_min, maximum: money_price_max -}}