Skip to content

[DRAFT] [POC] feat(promotions): PROMO-1488 POC for featured-promotion-callouts: display promotion callouts in product list pages and product detail page #2646

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
donald-nguyen-bc wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

[DRAFT] [POC] feat(promotions): PROMO-1488 POC for featured-promotion-callouts: display promotion callouts in product list pages and product detail page #2646

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions assets/scss/layouts/_layouts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,9 @@
// Product Sale Badges
@import "products/productSaleBadges";

// Featured Promotion Callouts
@import "products/featuredPromotions";

// Product view
@import "products/productSwatch";

Expand Down
47 changes: 47 additions & 0 deletions assets/scss/layouts/products/_featuredPromotions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
// =============================================================================
// FEATURED PROMOTIONS (CSS)
// =============================================================================
//
// Chip-style callouts rendered inside product cards, list items, and on PDP.
//
// Markup is server-rendered by `templates/components/products/featured-promotion-callouts.html`
// from the `featured_promotions` array on the Stencil product context (PROMO-1488).
// The container is only emitted when the array is non-empty, so there is no
// `hidden`/`is-loaded` toggling here.

.featuredPromotions {
display: flex;
flex-wrap: wrap;
gap: spacing("eighth");
list-style: none;
margin: spacing("eighth") 0 0;
padding: 0;
}

.featuredPromotions-chip {
background: stencilColor("color_badge_product_sale_badges");
border-radius: 2px;
color: stencilColor("color_text_product_sale_badges");
display: inline-block;
font-size: rem-calc(12px);
font-weight: 600;
line-height: rem-calc(16px);
padding: spacing("eighth") spacing("third");
text-transform: uppercase;
transition: background-color 800ms ease;
}

.product:hover .featuredPromotions-chip {
background: stencilColor("color_hover_product_sale_badges");
}

.productView .featuredPromotions {
margin-top: spacing("half");

.featuredPromotions-chip {
font-size: rem-calc(13px);
line-height: rem-calc(18px);
padding: spacing("eighth") spacing("half");
text-transform: none;
}
}
5 changes: 4 additions & 1 deletion lang/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -833,7 +833,10 @@
"suffix": "each"
}
},
"card_default_image_alt": "Image coming soon"
"card_default_image_alt": "Image coming soon",
"featured_promotions": {
"aria_label": "Featured promotions"
}
},
"invoice": {
"for_order": "{name} Invoice for Order #{id}",
Expand Down
4 changes: 2 additions & 2 deletions templates/components/brand/product-listing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@

<div data-list-name="Brand: {{brand.name}}">
{{#if theme_settings.product_list_display_mode '===' 'grid'}}
{{> components/products/grid products=brand.products show_compare=brand.show_compare theme_settings=theme_settings event="list"}}
{{> components/products/grid products=brand.products show_compare=brand.show_compare theme_settings=theme_settings event="list" show_featured_promotions=true}}
{{else}}
{{> components/products/list products=brand.products show_compare=brand.show_compare theme_settings=theme_settings event="list"}}
{{> components/products/list products=brand.products show_compare=brand.show_compare theme_settings=theme_settings event="list" show_featured_promotions=true}}
{{/if}}
</div>

Expand Down
4 changes: 2 additions & 2 deletions templates/components/category/product-listing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@

<div data-list-name="Category: {{category.name}}" role="region" aria-label="{{lang 'category.product_label'}}">
{{#if theme_settings.product_list_display_mode '===' 'grid'}}
{{> components/products/grid products=category.products show_compare=category.show_compare theme_settings=theme_settings event="list" }}
{{> components/products/grid products=category.products show_compare=category.show_compare theme_settings=theme_settings event="list" show_featured_promotions=true }}
{{else}}
{{> components/products/list products=category.products show_compare=category.show_compare theme_settings=theme_settings event="list" }}
{{> components/products/list products=category.products show_compare=category.show_compare theme_settings=theme_settings event="list" show_featured_promotions=true }}
{{/if}}
</div>

Expand Down
3 changes: 3 additions & 0 deletions templates/components/products/card.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,9 @@ <h3 class="card-title">
{{> components/common/login-for-pricing}}
{{/or}}
</div>
{{#if show_featured_promotions}}
{{> components/products/featured-promotion-callouts callouts=featured_promotions}}
{{/if}}
{{{region name="product_item_below_price"}}}
{{> components/products/bulk-discount-rates}}
</div>
Expand Down
23 changes: 23 additions & 0 deletions templates/components/products/featured-promotion-callouts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{{!--
Renders "Featured Promotion" callout chips for a product.

Source: server-rendered Stencil context. The Storefront service populates
`product.featured_promotions` (PROMO-1488) on:
- the product details page object (PDP)
- each product card in category/brand/search listings (PLP)
via the GraphQL `Product.featuredPromotions` field, gated by the
`PROMO-1488.featured_promotions_in_graphql_enabled` LaunchDarkly flag.

When the flag is off (or no callouts apply), `featured_promotions` is
omitted from the Stencil context and the block below renders nothing.

Caller: pass the product's `featured_promotions` array as `callouts`,
e.g. `{{> components/products/featured-promotion-callouts callouts=product.featured_promotions }}`.
--}}
{{#if callouts.length}}
<ul class="featuredPromotions" aria-label="{{lang 'products.featured_promotions.aria_label'}}">
{{#each callouts}}
<li class="featuredPromotions-chip" data-promotion-id="{{id}}">{{text}}</li>
{{/each}}
</ul>
{{/if}}
2 changes: 1 addition & 1 deletion templates/components/products/grid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<ul class="productGrid">
{{#each products}}
<li class="product">
{{>components/products/card settings=../settings show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer event=../event position=(add @index 1)}}
{{>components/products/card settings=../settings show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer event=../event position=(add @index 1) show_featured_promotions=../show_featured_promotions}}
</li>
{{/each}}
</ul>
3 changes: 3 additions & 0 deletions templates/components/products/list-item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,9 @@ <h4 class="listItem-title">
{{#or customer (unless settings.hide_price_from_guests)}}
{{#if price}}
<div class="listItem-price">{{> components/products/price price=price}}</div>
{{#if show_featured_promotions}}
{{> components/products/featured-promotion-callouts callouts=featured_promotions}}
{{/if}}
{{{region name="product_item_below_price"}}}
{{/if}}
{{else}}
Expand Down
2 changes: 1 addition & 1 deletion templates/components/products/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<ul class="productList">
{{#each products}}
<li class="product">
{{>components/products/list-item show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer event=../event settings=../settings position=(add @index 1)}}
{{>components/products/list-item show_compare=../show_compare show_rating=../settings.show_product_rating theme_settings=../theme_settings customer=../customer event=../event settings=../settings position=(add @index 1) show_featured_promotions=../show_featured_promotions}}
</li>
{{/each}}
</ul>
1 change: 1 addition & 0 deletions templates/components/products/product-view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,7 @@ <h2 class="productView-brand">
{{> components/common/login-for-pricing}}
{{/or}}
</div>
{{> components/products/featured-promotion-callouts callouts=product.featured_promotions}}
{{{region name="product_below_price"}}}
<div class="productView-rating">
{{#if settings.show_product_rating}}
Expand Down
4 changes: 2 additions & 2 deletions templates/components/search/product-listing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
{{/if}}
<div data-list-name="Search Results">
{{#if theme_settings.product_list_display_mode '===' 'grid'}}
{{> components/products/grid products=product_results.products show_compare=product_results.show_compare event="list" theme_settings=theme_settings}}
{{> components/products/grid products=product_results.products show_compare=product_results.show_compare event="list" theme_settings=theme_settings show_featured_promotions=true}}
{{else}}
{{> components/products/list products=product_results.products show_compare=product_results.show_compare event="list" theme_settings=theme_settings}}
{{> components/products/list products=product_results.products show_compare=product_results.show_compare event="list" theme_settings=theme_settings show_featured_promotions=true}}
{{/if}}
</div>

Expand Down
Loading