Comment on page
Price
<la-dn-price-wrapper
available="true"
product-handle="product-1"
location="product-page">
<la-dn-price-unavailable label="Out of stock"></la-dn-price-unavailable>
<la-dn-price-available
discounted="true"
add-microdata="true"
currency="USD"
layout="[price|compare-at-price][compliance]"
price-template="{{price}}"
compare-at-price-template="<b>was</b> {{compare-at-price}} [[{{compare-at-price-suffix}}]]"
compliance-template="Lowest {{compliance-period}}day price: {{compliance-price}}"
price="10000"
compare-at-price="120000"
compliance-period="30"
compliance-price="95000"
compare-at-price-suffix="You save $20">
</la-dn-price-available>
</la-dn-price-wrapper>
- The component renders a visually hidden label for each of the prices.
- The labels can be found in the context object, specifically in
discountNinjaContext.Labels.Accessibility:Price: "Price"DiscountedPrice: "Sale price"OriginalPrice: "Regular price"MSRP: "Retail price"UnitPrice: "Unit price"CompliancePrice: "Lowest prior price"
These labels are rendered as follows:
<span class="la-dn-visually-hidden">Regular price</span>
- Also for accessibility we need to hide the unit price separator (
discountNinjaContext.Labels.UnitPriceSeparator, default value "/") in unit price and instead add an accessible label (discountNinjaContext.Labels.Accessibility.UnitPriceSeparator, default value "per"):
<span aria-hidden="true">{LABEL}</span>
<span class="la-dn-visually-hidden"> {ACCESSIBILITY_LABEL} </span>
The
la-dn-visually-hidden class is implemented as follows:.visually-hidden {
position: absolute!important;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
word-wrap: normal!important;
}
.visually-hidden--inline {
margin: 0;
height: 1em;
}
Last modified 2mo ago