feat(storefront): BCTHEME-322 add sold-out badges for products on PLP (…

…#2003)
bigcommerce · Mar 15, 2021 · 3b957b1 · 3b957b1
1 parent 5710ac6
commit 3b957b1
Show file tree

Hide file tree

Showing 8 changed files with 195 additions and 54 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Added sold out badge on products within PLP. [#2003](https://github.com/bigcommerce/cornerstone/pull/2003)
 - Update focus trap in Modal. [#1998](https://github.com/bigcommerce/cornerstone/pull/1998)
 - Added unique identifiers to product cards on product list pages. [#1999](https://github.com/bigcommerce/cornerstone/pull/1999)
 - Fixed line breaks on Dropdown menu display mode. [#1996](https://github.com/bigcommerce/cornerstone/pull/1996)

diff --git a/assets/scss/layouts/products/_productSaleBadges.scss b/assets/scss/layouts/products/_productSaleBadges.scss
@@ -2,12 +2,14 @@
 // PRODUCT Sale Badges (CSS)
 // =============================================================================
 
+@mixin setFlagColors($badge-color, $text-color) {
+    background: stencilColor($badge-color);
+    color: stencilColor($text-color);
+}
 // BURST BADGE
 // -----------------------------------------------------------------------------
-.sale-flag-star,
-.sale-flag-star:before,
-.sale-flag-star:after {
-    background: stencilColor("color_badge_product_sale_badges");
+
+%base-flag-star {
     content: "";
     display: block;
     height: rem-calc(50px);
@@ -20,14 +22,27 @@
     transition: background-color 800ms ease;
     width: rem-calc(50px);
     z-index: zIndex("lower");
-}
 
-.sale-flag-star:before {
-    transform: rotateZ(30deg) scaleX(1) scaleY(1) scaleZ(1);
+    &:before {
+        transform: rotateZ(30deg) scaleX(1) scaleY(1) scaleZ(1);
+    }
+
+    &:after {
+        transform: rotateZ(60deg) scaleX(1) scaleY(1) scaleZ(1);
+    }
 }
-
+.sale-flag-star,
+.sale-flag-star:before,
 .sale-flag-star:after {
-    transform: rotateZ(60deg) scaleX(1) scaleY(1) scaleZ(1);
+    background: stencilColor("color_badge_product_sale_badges");
+    @extend %base-flag-star;
+}
+
+.sold-out-flag-star,
+.sold-out-flag-star:before,
+.sold-out-flag-star:after {
+    background: stencilColor("color_badge_product_sold_out_badges");
+    @extend %base-flag-star;
 }
 
 .starwrap {
@@ -55,8 +70,7 @@
     }
 }
 
-.sale-text-burst {
-    color: stencilColor("color_text_product_sale_badges");
+%base-text-burst {
     font-weight: 600;
     line-height: rem-calc(15px);
     position: absolute;
@@ -66,23 +80,36 @@
     z-index: zIndex("high");
 }
 
+.sale-text-burst {
+    color: stencilColor("color_text_product_sale_badges");
+    @extend %base-text-burst;
+}
+
+.sold-out-text-burst {
+    color: stencilColor("color_text_product_sold_out_badges");
+    @extend %base-text-burst;
+}
+
 .product:hover .starwrap {
 
     .sale-flag-star,
     .sale-flag-star:before,
     .sale-flag-star:after {
         background: stencilColor("color_hover_product_sale_badges");
+    }
+
+    .sold-out-flag-star,
+    .sold-out-flag-star:before,
+    .sold-out-flag-star:after {
+        background: stencilColor("color_hover_product_sold_out_badges");
     }    
 }
 
 // -----------------------------------------------------------------------------
 // TOP LEFT BADGE
 // -----------------------------------------------------------------------------
-
-.sale-flag-side {
-    background: stencilColor("color_badge_product_sale_badges");
+%base-flag-side {
     border-radius: 0 50px 50px 0;
-    color: stencilColor("color_text_product_sale_badges");
     font-size: 15px;
     font-weight: 700;
     height: rem-calc(20px);
@@ -95,17 +122,26 @@
     z-index: zIndex("lower");
 }
 
+.sale-flag-side {
+    @include setFlagColors("color_badge_product_sale_badges", "color_text_product_sale_badges");
+    @extend %base-flag-side;
+}
+.sold-out-flag-side {
+    @include setFlagColors("color_badge_product_sold_out_badges", "color_text_product_sold_out_badges");
+    @extend %base-flag-side;
+}
 .product:hover .sale-flag-side {
     background: stencilColor("color_hover_product_sale_badges");
 }
 
+.product:hover .sold-out-flag-side {
+    background: stencilColor("color_hover_product_sold_out_badges");
+}
+
 // -----------------------------------------------------------------------------
 // SASH BADGE
 // -----------------------------------------------------------------------------
-
-.sale-flag-sash {
-    background: stencilColor("color_badge_product_sale_badges");
-    color: stencilColor("color_text_product_sale_badges");
+%base-flag-sash {
     font-size: 15px;
     font-weight: 700;
     height: rem-calc(20px);
@@ -121,9 +157,20 @@
     z-index: zIndex("lower");
 }
 
+.sale-flag-sash {
+    @include setFlagColors("color_badge_product_sale_badges", "color_text_product_sale_badges");
+    @extend %base-flag-sash;
+}
+
+.sold-out-flag-sash {
+    @include setFlagColors("color_badge_product_sold_out_badges", "color_text_product_sold_out_badges");
+    @extend %base-flag-sash;
+}
+
 .listItem-figure {
 
-    .sale-flag-sash {
+    .sale-flag-sash,
+    .sold-out-flag-sash {
         top: 24px;
 
         @include breakpoint("small") {
@@ -142,6 +189,9 @@
 .product:hover .sale-flag-sash {
     background: stencilColor("color_hover_product_sale_badges");
 }
+.product:hover .sold-out-flag-sash {
+    background: stencilColor("color_hover_product_sold_out_badges");
+}
 
 .product {
     overflow: hidden;

diff --git a/config.json b/config.json
@@ -305,6 +305,10 @@
     "color_badge_product_sale_badges": "#007dc6",
     "color_text_product_sale_badges": "#ffffff",
     "color_hover_product_sale_badges": "#000000",
+    "product_sold_out_badges": "none",
+    "color_badge_product_sold_out_badges": "#007dc6",
+    "color_text_product_sold_out_badges": "#ffffff",
+    "color_hover_product_sold_out_badges": "#000000",
     "restrict_to_login": false,
     "swatch_option_size": "22x22",
     "social_icon_placement_top": false,
@@ -315,6 +319,7 @@
     "price_ranges": true,
     "pdp-price-label": "",
     "pdp_sale_badge_label": "On Sale!",
+    "pdp_sold_out_label": "Sold Out",
     "pdp-sale-price-label": "Now:",
     "pdp-non-sale-price-label": "Was:",
     "pdp-retail-price-label": "MSRP:",
@@ -587,7 +592,10 @@
         "optimizedCheckout-link-hoverColor": "#fab8a2",
         "color_badge_product_sale_badges": "#007dc6",
         "color_text_product_sale_badges": "#ffffff",
-        "color_hover_product_sale_badges": "#000000"
+        "color_hover_product_sale_badges": "#000000",
+        "color_badge_product_sold_out_badges": "#007dc6",
+        "color_text_product_sold_out_badges": "#ffffff",
+        "color_hover_product_sold_out_badges": "#000000"
       }
     },
     {
@@ -792,7 +800,10 @@
         "optimizedCheckout-link-hoverColor": "#994a00",
         "color_badge_product_sale_badges": "#007dc6",
         "color_text_product_sale_badges": "#ffffff",
-        "color_hover_product_sale_badges": "#000000"
+        "color_hover_product_sale_badges": "#000000",
+        "color_badge_product_sold_out_badges": "#007dc6",
+        "color_text_product_sold_out_badges": "#ffffff",
+        "color_hover_product_sold_out_badges": "#000000"
       }
     }
   ]

diff --git a/schema.json b/schema.json
@@ -1352,6 +1352,59 @@
         "reference": "product_sale_badges",
         "reference_default": "none"
       },
+      {
+        "type": "select",
+        "label": "i18n.ShowProductSoldOutBadges",
+        "id": "product_sold_out_badges",
+        "force_reload": true,
+        "options": [
+          {
+            "value": "none",
+            "label": "i18n.None"
+          },
+          {
+            "value": "topleft",
+            "label": "i18n.TopLeft"
+          },
+          {
+            "value": "sash",
+            "label": "i18n.Diagonal"
+          },
+          {
+            "value": "burst",
+            "label": "i18n.Burst"
+          }
+        ]
+      },
+      {
+        "type": "text",
+        "label": "i18n.ProductSoldOutBadgeLabel",
+        "force_reload": true,
+        "id": "pdp_sold_out_label",
+        "reference": "product_sold_out_badges",
+        "reference_default": "none"
+      },
+      {
+        "type": "color",
+        "label": "i18n.BadgeTextColor",
+        "id": "color_text_product_sold_out_badges",
+        "reference": "product_sold_out_badges",
+        "reference_default": "none"
+      },
+      {
+        "type": "color",
+        "label": "i18n.BadgeColor",
+        "id": "color_badge_product_sold_out_badges",
+        "reference": "product_sold_out_badges",
+        "reference_default": "none"
+      },
+      {
+        "type": "color",
+        "label": "i18n.BadgeHoverColor",
+        "id": "color_hover_product_sold_out_badges",
+        "reference": "product_sold_out_badges",
+        "reference_default": "none"
+      },
       {
         "type": "heading",
         "content": "i18n.DisplaySettings"

diff --git a/schemaTranslations.json b/schemaTranslations.json
@@ -1076,6 +1076,13 @@
     "uk": "Показати значки продажу товарів",
     "zh": "显示产品降价标志"
   },
+  "i18n.ShowProductSoldOutBadges": {
+    "default": "Show product sold-out badges",
+    "fr": "Show product sold-out badges",
+    "it": "Show product sold-out badges",
+    "uk": "Показати значки розпроданих товарів",
+    "zh": "Show product sold-out badges"
+  },
   "i18n.TopLeft": {
     "default": "Top Left",
     "fr": "En haut à gauche",
@@ -1104,6 +1111,13 @@
     "uk": "Етикетка для товару зі знижкою",
     "zh": "产品销售徽章标签"
   },
+  "i18n.ProductSoldOutBadgeLabel": {
+    "default": "Product sold out badge label",
+    "fr": "Product sold out badge label",
+    "it": "Product sold out badge label",
+    "uk": "Етикетка для розпроданого товару",
+    "zh": "产品销售徽章标签"
+  },
   "i18n.ProductPriceLabelSale": {
     "default": "Product price label (sale)",
     "fr": "Étiquette de prix du produit (vente)",

diff --git a/templates/components/products/card.html b/templates/components/products/card.html
@@ -24,22 +24,21 @@
         {{/if}}"
     {{/if}}>
     <figure class="card-figure">
-        {{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}
-            {{#if theme_settings.product_sale_badges '===' 'sash'}}
-                <div class="sale-flag-sash">
-                    <span class="sale-text">{{{theme_settings.pdp_sale_badge_label}}}</span>
-                </div>
-            {{else if theme_settings.product_sale_badges '===' 'topleft'}}
-                <div class="sale-flag-side">
-                    <span class="sale-text">{{{theme_settings.pdp_sale_badge_label}}}</span>
-                </div>
-            {{else if theme_settings.product_sale_badges '===' 'burst'}}
-                <div class="starwrap">
-                    <div class="sale-text-burst">{{{theme_settings.pdp_sale_badge_label}}}</div>
-                    <div class="sale-flag-star"></div>
-                </div>
-            {{/if}}
-        {{/or}}
+        {{#if stock_level '===' 0}}
+            {{> components/products/product-badge 
+                badge-type='sold-out'
+                badge_view=theme_settings.product_sold_out_badges
+                badge_label=theme_settings.pdp_sold_out_label
+            }}
+        {{else}}
+            {{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}
+                {{> components/products/product-badge 
+                    badge-type='sale'
+                    badge_view=theme_settings.product_sale_badges
+                    badge_label=theme_settings.pdp_sale_badge_label
+                }}
+            {{/or}}
+        {{/if}}
         <a href="{{url}}" 
            class="card-figure__link"
            aria-label="{{name}},{{> components/products/product-aria-label}}"

diff --git a/templates/components/products/list-item.html b/templates/components/products/list-item.html
@@ -11,22 +11,21 @@
            data-event-type="product-click"
            {{/if}}
         >
-        {{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}
-            {{#if theme_settings.product_sale_badges '===' 'sash'}}
-                <div class="sale-flag-sash">
-                    <span class="sale-text">On Sale!</span>
-                </div>
-            {{else if theme_settings.product_sale_badges '===' 'topleft'}}
-                <div class="sale-flag-side">
-                    <span class="sale-text">On Sale!</span>
-                </div>
-            {{else if theme_settings.product_sale_badges '===' 'burst'}}
-                <div class="starwrap">
-                    <div class="sale-text-burst">On Sale!</div>
-                    <div class="sale-flag-star"></div>
-                </div>
-            {{/if}}
-        {{/or}}
+        {{#if stock_level '===' 0}}
+            {{> components/products/product-badge 
+                badge-type='sold-out'
+                badge_view=theme_settings.product_sold_out_badges
+                badge_label=theme_settings.pdp_sold_out_label
+            }}
+        {{else}}
+            {{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}
+                {{> components/products/product-badge 
+                    badge-type='sale'
+                    badge_view=theme_settings.product_sale_badges
+                    badge_label=theme_settings.pdp_sale_badge_label
+                }}
+            {{/or}}
+        {{/if}}
         {{> components/common/responsive-img
             image=image
             class="listItem-image"

diff --git a/templates/components/products/product-badge.html b/templates/components/products/product-badge.html
@@ -0,0 +1,14 @@
+{{#if badge_view '===' 'sash'}}
+    <div class="{{badge-type}}-flag-sash">
+        <span class="{{badge-type}}-text">{{{badge_label}}}</span>
+    </div>
+{{else if badge_view '===' 'topleft'}}
+    <div class="{{badge-type}}-flag-side">
+        <span class="{{badge-type}}-text">{{{badge_label}}}</span>
+    </div>
+{{else if badge_view '===' 'burst'}}
+    <div class="starwrap">
+        <div class="{{badge-type}}-text-burst">{{{badge_label}}}</div>
+        <div class="{{badge-type}}-flag-star"></div>
+    </div>
+{{/if}}