Skip to content

Commit e8c7545

Browse files
donald-nguyen-bcdonald-nguyen-bc
committed
feat(promotions): PROMO-1497 display "featured promotion callouts" in PLP and PDP
1 parent 3437ad1 commit e8c7545

9 files changed

Lines changed: 133 additions & 1 deletion

File tree

‎assets/scss/layouts/_layouts.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,9 @@
4646
// Product Sale Badges
4747
@import "products/productSaleBadges";
4848

49+
// Featured Promotion Callouts
50+
@import "products/promotionCallout";
51+
4952
// Product view
5053
@import "products/productSwatch";
5154

‎assets/scss/layouts/products/_promotionCallout.scss‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
// =============================================================================
2+
// PRODUCT Promotion Callouts (CSS)
3+
// =============================================================================
4+
5+
.promotionCallout {
6+
margin-top: spacing("quarter");
7+
}
8+
9+
.promotionCallout-item {
10+
display: flex;
11+
flex-wrap: wrap;
12+
align-items: center;
13+
gap: spacing("quarter");
14+
padding: spacing("quarter") spacing("half");
15+
background: stencilColor("color_bg_featured_promotions");
16+
border: 1px solid rgba(0, 0, 0, 0.08);
17+
border-radius: 4px;
18+
}
19+
20+
.promotionCallout-icon {
21+
flex-shrink: 0;
22+
width: 16px;
23+
height: 16px;
24+
stroke: stencilColor("color_text_featured_promotions");
25+
}
26+
27+
.promotionCallout-text {
28+
font-size: fontSize("smaller");
29+
color: stencilColor("color_text_featured_promotions");
30+
font-weight: fontWeight("semibold");
31+
line-height: lineHeight("smallest");
32+
}
33+
34+
.promotionCallout-more {
35+
flex-basis: 100%;
36+
font-size: fontSize("smallest");
37+
color: stencilColor("color_text_featured_promotions");
38+
opacity: 0.7;
39+
}
40+
41+
.promotionCallout--full {
42+
list-style: none;
43+
margin: 0 0 spacing("half");
44+
padding: 0;
45+
46+
.promotionCallout-item + .promotionCallout-item {
47+
margin-top: spacing("quarter");
48+
}
49+
}
50+
51+
.card-body .promotionCallout--compact {
52+
margin-top: spacing("quarter");
53+
}
54+
55+
.listItem-actions .promotionCallout--compact {
56+
margin-top: spacing("quarter");
57+
}

‎config.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -334,6 +334,9 @@
334334
"color_badge_product_sold_out_badges": "#007dc6",
335335
"color_text_product_sold_out_badges": "#ffffff",
336336
"color_hover_product_sold_out_badges": "#000000",
337+
"show_featured_promotions": true,
338+
"color_bg_featured_promotions": "#fef9e7",
339+
"color_text_featured_promotions": "#856404",
337340
"focusTooltip-textColor": "#ffffff",
338341
"focusTooltip-backgroundColor": "#313440",
339342
"swatch_option_size": "22x22",

‎lang/en.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -835,7 +835,10 @@
835835
"suffix": "each"
836836
}
837837
},
838-
"card_default_image_alt": "Image coming soon"
838+
"card_default_image_alt": "Image coming soon",
839+
"featured_promotions": {
840+
"more_offers": "more offers"
841+
}
839842
},
840843
"invoice": {
841844
"for_order": "{name} Invoice for Order #{id}",

‎schema.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1351,6 +1351,30 @@
13511351
"reference": "product_sold_out_badges",
13521352
"reference_default": "none"
13531353
},
1354+
{
1355+
"type": "heading",
1356+
"content": "i18n.FeaturedPromotions"
1357+
},
1358+
{
1359+
"type": "checkbox",
1360+
"label": "i18n.ShowFeaturedPromotions",
1361+
"force_reload": true,
1362+
"id": "show_featured_promotions"
1363+
},
1364+
{
1365+
"type": "color",
1366+
"label": "i18n.FeaturedPromotionBackgroundColor",
1367+
"id": "color_bg_featured_promotions",
1368+
"reference": "show_featured_promotions",
1369+
"reference_default": false
1370+
},
1371+
{
1372+
"type": "color",
1373+
"label": "i18n.FeaturedPromotionTextColor",
1374+
"id": "color_text_featured_promotions",
1375+
"reference": "show_featured_promotions",
1376+
"reference_default": false
1377+
},
13541378
{
13551379
"type": "heading",
13561380
"content": "i18n.DisplaySettings"

‎templates/components/products/card.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,5 +134,12 @@ <h3 class="card-title">
134134
</div>
135135
{{{region name="product_item_below_price"}}}
136136
{{> components/products/bulk-discount-rates}}
137+
{{#if theme_settings.show_featured_promotions}}
138+
{{> components/products/promotion-callout
139+
promotions=featured_promotions
140+
mode="compact"
141+
productUrl=url
142+
}}
143+
{{/if}}
137144
</div>
138145
</article>

‎templates/components/products/list-item.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,13 @@ <h4 class="listItem-title">
8787
{{#if price}}
8888
<div class="listItem-price">{{> components/products/price price=price}}</div>
8989
{{{region name="product_item_below_price"}}}
90+
{{#if theme_settings.show_featured_promotions}}
91+
{{> components/products/promotion-callout
92+
promotions=featured_promotions
93+
mode="compact"
94+
productUrl=url
95+
}}
96+
{{/if}}
9097
{{/if}}
9198
{{else}}
9299
{{> components/common/login-for-pricing}}

‎templates/components/products/product-view.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,12 @@ <h2 class="productView-brand">
126126
{{/or}}
127127
</div>
128128
{{{region name="product_below_price"}}}
129+
{{#if theme_settings.show_featured_promotions}}
130+
{{> components/products/promotion-callout
131+
promotions=product.featured_promotions
132+
mode="full"
133+
}}
134+
{{/if}}
129135
<div class="productView-rating">
130136
{{#if settings.show_product_rating}}
131137
{{> components/products/ratings rating=product.rating}}

‎templates/components/products/promotion-callout.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{{#if promotions.length}}
2+
{{#if mode '===' 'compact'}}
3+
<div class="promotionCallout promotionCallout--compact">
4+
<div class="promotionCallout-item">
5+
<span class="promotionCallout-text">{{promotions.[0].text}}</span>
6+
{{#if promotions.[1]}}
7+
<span class="promotionCallout-more">
8+
+{{subtract promotions.length 1}} {{lang 'products.featured_promotions.more_offers'}}
9+
</span>
10+
{{/if}}
11+
</div>
12+
</div>
13+
{{else}}
14+
<ul class="promotionCallout promotionCallout--full">
15+
{{#each promotions}}
16+
<li class="promotionCallout-item">
17+
<span class="promotionCallout-text">{{text}}</span>
18+
</li>
19+
{{/each}}
20+
</ul>
21+
{{/if}}
22+
{{/if}}

0 commit comments

Comments
 (0)