fix(storefront): bctheme-1171 fix sold-out badge appearance

bigcommerce · Jan 31, 2023 · 5cadaf8 · 5cadaf8
1 parent e400137
commit 5cadaf8
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Fix sold-out badge appearance [#2315](https://github.com/bigcommerce/cornerstone/pull/2315)
 
 ## 6.8.0 (01-26-2023)
 - Add remote_api_scripts into cart/preview template to let GA3 snippet to fire the Product Added event, when clicking Add to cart button on Product detail page and rendering the response in popup. [#2281](https://github.com/bigcommerce/cornerstone/pull/2281)

diff --git a/templates/components/products/card.html b/templates/components/products/card.html
@@ -29,18 +29,40 @@
     {{/if}}>
     <figure class="card-figure">
         {{#if stock_level '===' 0}}
-            {{#if theme_settings.pdp_sold_out_label '===' ''}}
-                {{> components/products/product-badge
-                    badge-type='sold-out'
-                    badge_view=theme_settings.product_sold_out_badges
-                    badge_label=(lang "page_builder.pdp_sold_out_label")
-                }}
-            {{else}}
-                {{> components/products/product-badge
-                    badge-type='sold-out'
-                    badge_view=theme_settings.product_sold_out_badges
-                    badge_label=theme_settings.pdp_sold_out_label
-                }}
+            {{#if show_cart_action}}
+                {{#if theme_settings.pdp_sold_out_label '===' ''}}
+                    {{> components/products/product-badge
+                        badge-type='sold-out'
+                        badge_view=theme_settings.product_sold_out_badges
+                        badge_label=(lang "page_builder.pdp_sold_out_label")
+                    }}
+                {{else}}
+                    {{> components/products/product-badge
+                        badge-type='sold-out'
+                        badge_view=theme_settings.product_sold_out_badges
+                        badge_label=theme_settings.pdp_sold_out_label
+                    }}
+                {{/if}}
+            {{/if}}
+        {{else if has_options '===' false}}
+            {{#if stock_level '===' null}}
+                {{#if show_cart_action}}
+                    {{#unless add_to_cart_url}}
+                        {{#if theme_settings.pdp_sold_out_label '===' ''}}
+                            {{> components/products/product-badge
+                                badge-type='sold-out'
+                                badge_view=theme_settings.product_sold_out_badges
+                                badge_label=(lang "page_builder.pdp_sold_out_label")
+                            }}
+                        {{else}}
+                            {{> components/products/product-badge
+                                badge-type='sold-out'
+                                badge_view=theme_settings.product_sold_out_badges
+                                badge_label=theme_settings.pdp_sold_out_label
+                            }}
+                        {{/if}}
+                    {{/unless}}
+                {{/if}}
             {{/if}}
         {{else}}
             {{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}

diff --git a/templates/components/products/list-item.html b/templates/components/products/list-item.html
@@ -20,7 +20,7 @@
            data-event-type="product-click"
            {{/if}}
         >
-        {{#if stock_level '===' 0}}
+        {{#or (if stock_level '===' 0) (unless has_options)}}
             {{#if theme_settings.pdp_sold_out_label '===' ''}}
                 {{> components/products/product-badge
                     badge-type='sold-out'
@@ -50,7 +50,7 @@
                     }}
                 {{/if}}
             {{/or}}
-        {{/if}}
+        {{/or}}
         {{> components/common/responsive-img
             image=image
             class="listItem-image"