diff --git a/assets/scss/layouts/_layouts.scss b/assets/scss/layouts/_layouts.scss index ad18a92264..00eff2b220 100644 --- a/assets/scss/layouts/_layouts.scss +++ b/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"; diff --git a/assets/scss/layouts/products/_promotionCallout.scss b/assets/scss/layouts/products/_promotionCallout.scss new file mode 100644 index 0000000000..9278b36e64 --- /dev/null +++ b/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"); +} diff --git a/config.json b/config.json index a6a8b711fc..a60b20b7b2 100644 --- a/config.json +++ b/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", diff --git a/lang/en.json b/lang/en.json index bf2a14fde2..d22f73278c 100755 --- a/lang/en.json +++ b/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}", diff --git a/schema.json b/schema.json index 312871d9b6..e6278e5920 100644 --- a/schema.json +++ b/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" diff --git a/schemaTranslations.json b/schemaTranslations.json index 5928546395..5db948fe55 100644 --- a/schemaTranslations.json +++ b/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", diff --git a/templates/components/products/card.html b/templates/components/products/card.html index c90f62e76a..d7de61d1da 100644 --- a/templates/components/products/card.html +++ b/templates/components/products/card.html @@ -134,5 +134,11 @@

{{{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}} diff --git a/templates/components/products/list-item.html b/templates/components/products/list-item.html index b2678a4ab1..bbf7b6184a 100644 --- a/templates/components/products/list-item.html +++ b/templates/components/products/list-item.html @@ -91,6 +91,12 @@

{{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}} {{lang 'products.choose_options'}} diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html index 10553661de..ae5739285f 100644 --- a/templates/components/products/product-view.html +++ b/templates/components/products/product-view.html @@ -126,6 +126,12 @@

{{/or}} {{{region name="product_below_price"}}} + {{#if theme_settings.show_featured_promotions}} + {{> components/products/promotion-callout + promotions=product.featured_promotions + mode="full" + }} + {{/if}}
{{#if settings.show_product_rating}} {{> components/products/ratings rating=product.rating}} diff --git a/templates/components/products/promotion-callout.html b/templates/components/products/promotion-callout.html new file mode 100644 index 0000000000..dc50fd1013 --- /dev/null +++ b/templates/components/products/promotion-callout.html @@ -0,0 +1,22 @@ +{{#if promotions.length}} +{{#if mode '===' 'compact'}} +
+
+ {{promotions.[0].text}} + {{#if promotions.[1]}} + + +{{subtract promotions.length 1}} {{lang 'products.featured_promotions.more_offers'}} + + {{/if}} +
+
+{{else}} + +{{/if}} +{{/if}}