- Taxonomic name: M-STICKY-PRICE
- Extension: SUPPORTING-NAVIGATION
- Added on: v2023.01 (19/06/23)
- Updated on: v2023.01 (19/06/23)
Sticky price
To improve the customer experience and provide a permanent display of the estimated price.
Design and usage
- Keep labels simple and short.
- Not to be used in conjunction with Sticky CTA Bar component.
Examples
Sticky price - Default
Interactive examples
Code example
<div class="m-sticky-price [ Modifiers ]" data-module="m-sticky-price" data-module-load="true">
<div class="l-content-container">
<div class="m-sticky-price__content-left">
<span class="m-sticky-price__label">...</span>
<span class="m-sticky-price__sub-label">...</span>
</div>
<div class="m-sticky-price__content-right">
<span class="m-sticky-price__price">...<span>...</span></span>
<span class="m-sticky-price__sub-price">...</span>
</div>
</div>
</div>
Sticky price - Repeated price
Interactive examples
Code example
<div class="m-sticky-price [ Modifiers ]" data-module="m-sticky-price" data-module-load="true">
<div class="l-content-container">
<div class="m-sticky-price__content-left">
<span class="m-sticky-price__label">...</span>
<span class="m-sticky-price__sub-label">...</span>
</div>
<div class="m-sticky-price__content-right">
<span class="m-sticky-price__price">...<span>...</span></span>
<span class="m-sticky-price__sub-price">...</span>
</div>
</div>
</div>
...
<div class="m-card m-card--repeated-price [ Modifiers ]">
<div class="m-card-content">
<div class="m-card-content__inner">
<div class="m-card-content__inner-left">
<span class="m-card-repeated-price__label">...</span>
<span class="m-card-repeated-price__sub-label">...</span>
</div>
<div class="m-card-content__inner-right">
<div class="m-card-repeated-price__price">
<span class="m-card-repeated-price__primary-value">... <span>...</span></span>
</div>
<div class="m-card-repeated-price__sub-price">
<span class="m-card-repeated-price__secondary-value">...</span>
</div>
</div>
</div>
</div>
</div>
Sticky price - Repeated price with promo code applied
Interactive examples
Code example
<div class="m-sticky-price [ Modifiers ]" data-module="m-sticky-price" data-module-load="true">
<div class="l-content-container">
<div class="m-sticky-price__content-left">
<span class="m-sticky-price__label">...</span>
<span class="m-sticky-price__sub-label">...</span>
</div>
<div class="m-sticky-price__content-right">
<span class="m-sticky-price__price">...<span>...</span></span>
<span class="m-sticky-price__sub-price">...</span>
</div>
</div>
</div>
...
<div class="m-card m-card--repeated-price [ Modifiers ]">
<div class="m-card-content">
<div class="m-card-content__inner">
<div class="m-card-content__inner-left">
<span class="m-card-repeated-price__label">...</span>
<span class="m-card-repeated-price__sub-label">...</span>
</div>
<div class="m-card-content__inner-right">
<div class="m-card-repeated-price__price">
<span class="m-card-repeated-price__primary-value">... <span>...</span></span>
<span class="m-card-repeated-price__secondary-value">...</span>
</div>
<div class="m-card-repeated-price__sub-price">
<span class="m-card-repeated-price__primary-value">...</span>
<span class="m-card-repeated-price__secondary-value">...</span>
</div>
</div>
</div>
</div>
</div>
Development and test
Notes for developers
To use the repeated-price functionality, don't forget to add the m-card--repeated-price class to a card.
For example:
<div class="m-card m-card--repeated-price [ Modifiers ]">
<div class="m-card-content">
<div class="m-card-content__inner">
<div class="m-card-content__inner-left">
<span class="m-card-repeated-price__label">...</span>
<span class="m-card-repeated-price__sub-label">...</span>
</div>
<div class="m-card-content__inner-right">
<div class="m-card-repeated-price__price">
<span class="m-card-repeated-price__primary-value">... <span>...</span></span>
</div>
<div class="m-card-repeated-price__sub-price">
<span class="m-card-repeated-price__secondary-value">...</span>
</div>
</div>
</div>
</div>
</div>
Notes for testers
...
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.m-sticky-price |
Base styling for sticky price | Yes | #main > div |
|
.m-sticky-price--pushup-forced |
Force component to be the first element in the tag with the "main" id | .m-sticky-price |
||
.m-sticky-price__content-left |
Part left of the sticky price | Yes | .m-sticky-price > .l-content-container > div |
|
.m-sticky-price__content-right |
Part right of the sticky price | Yes | .m-sticky-price > .l-content-container > div |
|
.m-sticky-price__label |
Label | Yes | .m-sticky-price__content-left > strong |
|
.m-sticky-price__price |
Price | Yes | .m-sticky-price__content-right > strong |
|
.m-sticky-price__sub-label |
Sub-label | .m-sticky-price__content-left > span |
||
.m-sticky-price__sub-price |
Sub-price | Yes | .m-sticky-price__content-right > span |
|
.m-card--repeated-price |
Base repeated price | .m-card |