feat(promotions): PROMO-1497 display "featured promotion callouts" in PLP and PDP

assets/scss/layouts/_layouts.scss

@@ -46,6 +46,9 @@
 // Product Sale Badges
 @import "products/productSaleBadges";
 
+// Featured Promotion Callouts
+@import "products/promotionCallout";
+
 // Product view
 @import "products/productSwatch";
 

assets/scss/layouts/products/_promotionCallout.scss

@@ -0,0 +1,57 @@
+// =============================================================================
+// PRODUCT Promotion Callouts (CSS)
+// =============================================================================
+
+.promotionCallout {
+    margin-top: spacing("quarter");
+}
+
+.promotionCallout-item {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: spacing("quarter");
+    padding: spacing("quarter") spacing("half");
+    background: stencilColor("color_bg_featured_promotions");
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: 4px;
+}
+
+.promotionCallout-icon {
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+    stroke: stencilColor("color_text_featured_promotions");
+}
+
+.promotionCallout-text {
+    font-size: fontSize("smaller");
+    color: stencilColor("color_text_featured_promotions");
+    font-weight: fontWeight("semibold");
+    line-height: lineHeight("smallest");
+}
+
+.promotionCallout-more {
+    flex-basis: 100%;
+    font-size: fontSize("smallest");
+    color: stencilColor("color_text_featured_promotions");
+    opacity: 0.7;
+}
+
+.promotionCallout--full {
+    list-style: none;
+    margin: 0 0 spacing("half");
+    padding: 0;
+
+    .promotionCallout-item + .promotionCallout-item {
+        margin-top: spacing("quarter");
+    }
+}
+
+.card-body .promotionCallout--compact {
+    margin-top: spacing("quarter");
+}
+
+.listItem-actions .promotionCallout--compact {
+    margin-top: spacing("quarter");
+}

config.json

@@ -334,6 +334,9 @@
     "color_badge_product_sold_out_badges": "#007dc6",
     "color_text_product_sold_out_badges": "#ffffff",
     "color_hover_product_sold_out_badges": "#000000",
+    "show_featured_promotions": true,
+    "color_bg_featured_promotions": "#fef9e7",
+    "color_text_featured_promotions": "#856404",
     "focusTooltip-textColor": "#ffffff",
     "focusTooltip-backgroundColor": "#313440",
     "swatch_option_size": "22x22",

lang/en.json

@@ -835,7 +835,10 @@
                 "suffix": "each"
             }
         },
-        "card_default_image_alt": "Image coming soon"
+        "card_default_image_alt": "Image coming soon",
+        "featured_promotions": {
+            "more_offers": "more offers"
+        }
     },
     "invoice": {
         "for_order": "{name} Invoice for Order #{id}",

schema.json

@@ -1351,6 +1351,30 @@
         "reference": "product_sold_out_badges",
         "reference_default": "none"
       },
+      {
+        "type": "heading",
+        "content": "i18n.FeaturedPromotions"
+      },
+      {
+        "type": "checkbox",
+        "label": "i18n.ShowFeaturedPromotions",
+        "force_reload": true,
+        "id": "show_featured_promotions"
+      },
+      {
+        "type": "color",
+        "label": "i18n.FeaturedPromotionBackgroundColor",
+        "id": "color_bg_featured_promotions",
+        "reference": "show_featured_promotions",
+        "reference_default": false
+      },
+      {
+        "type": "color",
+        "label": "i18n.FeaturedPromotionTextColor",
+        "id": "color_text_featured_promotions",
+        "reference": "show_featured_promotions",
+        "reference_default": false
+      },
       {
         "type": "heading",
         "content": "i18n.DisplaySettings"

schemaTranslations.json

@@ -2032,6 +2032,18 @@
     "pl": "Tło stopki",
     "ja": "フッターの背景"
   },
+  "i18n.FeaturedPromotions": {
+    "default": "Featured Promotions"
+  },
+  "i18n.ShowFeaturedPromotions": {
+    "default": "Show featured promotions"
+  },
+  "i18n.FeaturedPromotionBackgroundColor": {
+    "default": "Featured promotion background color"
+  },
+  "i18n.FeaturedPromotionTextColor": {
+    "default": "Featured promotion text color"
+  },
   "i18n.DisplaySettings": {
     "default": "Display settings",
     "fr": "Paramètres d'affichage",

templates/components/products/card.html

@@ -134,5 +134,11 @@ <h3 class="card-title">
         </div>
         {{{region name="product_item_below_price"}}}
         {{> components/products/bulk-discount-rates}}
+        {{#if theme_settings.show_featured_promotions}}
+            {{> components/products/promotion-callout
+                promotions=featured_promotions
+                mode="compact"
+            }}
+        {{/if}}
     </div>
 </article>

templates/components/products/list-item.html

@@ -91,6 +91,12 @@ <h4 class="listItem-title">
                 {{else}}
                     {{> components/common/login-for-pricing}}
                 {{/or}}
+                {{#if theme_settings.show_featured_promotions}}
+                    {{> components/products/promotion-callout
+                        promotions=featured_promotions
+                        mode="compact"
+                    }}
+                {{/if}}
                 {{#if show_cart_action}}
                     {{#if has_options}}
                         <a href="{{url}}" data-event-type="product-click" class="button button--small" data-product-id="{{id}}">{{lang 'products.choose_options'}}</a>

templates/components/products/product-view.html

@@ -126,6 +126,12 @@ <h2 class="productView-brand">
                 {{/or}}
             </div>
             {{{region name="product_below_price"}}}
+            {{#if theme_settings.show_featured_promotions}}
+                {{> components/products/promotion-callout
+                    promotions=product.featured_promotions
+                    mode="full"
+                }}
+            {{/if}}
             <div class="productView-rating">
                 {{#if settings.show_product_rating}}
                     {{> components/products/ratings rating=product.rating}}

templates/components/products/promotion-callout.html

@@ -0,0 +1,22 @@
+{{#if promotions.length}}
+{{#if mode '===' 'compact'}}
+<div class="promotionCallout promotionCallout--compact">
+    <div class="promotionCallout-item">
+        <span class="promotionCallout-text">{{promotions.[0].text}}</span>
+        {{#if promotions.[1]}}
+        <span class="promotionCallout-more">
+            +{{subtract promotions.length 1}} {{lang 'products.featured_promotions.more_offers'}}
+        </span>
+        {{/if}}
+    </div>
+</div>
+{{else}}
+<ul class="promotionCallout promotionCallout--full">
+    {{#each promotions}}
+    <li class="promotionCallout-item">
+        <span class="promotionCallout-text">{{text}}</span>
+    </li>
+    {{/each}}
+</ul>
+{{/if}}
+{{/if}}