Frontend news from March 7, 2025

Breaking Change

Quantity component better accesibility (via Deferred Template Updates)

• The change is scheduled for release on March 19, 2025. If you are an addon developer, please review the changes described below now and adjust your addons accordingly. On the release date, these improvements will be rolled out to the majority of customers. E-shops using Deferred Template Updates will have time until April 2, 2025 to modify their customizations and accept the update.
• You can preview the changes by running the command shoptet.helpers.enableUpdatePreview('product_quantity') in the browser console.

Adjustments in 3G Templates

HTML Structure Adjustments in the Quantity Component

• The input is now wrapped in a <label> element.
• The input now utilizes native min, max, and step attributes, and the data-max and data-min attributes have been removed.
• The step attribute now reflects the decimal precision set for the product:
  • 3 decimal places → step="0.001"
  • 0 decimal places → step="1"
• The .increase and .decrease buttons have been changed from <span> elements to <button> elements.
• Each button now contains a <span> element with a plus or minus sign, used in the Samba template.

<span class="quantity">
    <span class="increase-tooltip js-increase-tooltip" data-trigger="manual" data-container="body" data-original-title="Není možné zakoupit více než 9999 ks." aria-hidden="true" role="tooltip">
    </span>
    <span class="decrease-tooltip js-decrease-tooltip" data-trigger="manual" data-container="body" data-original-title="Minimální množství, které lze zakoupit, je 3 ks." aria-hidden="true" role="tooltip">
    </span>
    <label>
        <input type="number" name="amount" value="3" class="amount" autocomplete="off" data-decimals="0" step="1" min="3" max="9999" aria-label="Množství">
    </label>
    <button class="increase" type="button" aria-label="Zvýšit množství o 1">
        <span class="increase__sign">+</span>
    </button>
    <button class="decrease" type="button" aria-label="Snížit množství o 1">
        <span class="decrease__sign">−</span>
    </button>
</span>

Component with aria-live Region for Screen Readers

• A hidden <div> with id="screen-reader-announcer" has been added at the end of each page:

<div id="screen-reader-announcer" aria-live="polite" class="sr-only"></div>

• The <div> is hidden using the sr-only CSS class.
• It is predefined as an ARIA live region to allow adding text that will be read by screen readers.
• In this case, it will be used to announce quantity changes and inform users when the maximum or minimum limit is reached.

CSS Adjustments

• Minor adjustments due to the change of elements to <button> for increase/decrease buttons in Waltz and Disco templates.
• In the Classic template, the larger quantity component in the cart is now displayed between 480px – 768px, along with other minor improvements.
• In Samba, .increase__sign and .decrease__sign elements are now correctly displayed with plus and minus symbols.

JavaScript Adjustments

Behavior Update for increase and decrease Buttons

• Quantity adjustments now rely on the native min, max, and step attributes of the input, along with the data-decimals attribute.
• The min attribute is now set to the product or variant’s minimum quantity.
• The max attribute is now set to the product or variant’s maximum quantity.
• The step attribute is set to 1 or the smallest allowed value based on decimal places (e.g., 0.001 for 3 decimal places).
• This unifies the behavior of the input field and the buttons, ensuring that quantity changes respect the step attribute whether adjusted via buttons (increase/decrease) or keyboard arrows (ArrowUp/ArrowDown).
• Adjustments were made in the shoptet.helpers.updateQuantity function and related functions.

New Function: shoptet.helpers.announceToScreenReader

• To improve accessibility, a new function has been added that uses the hidden <div> with id="screen-reader-announcer" as the ARIA live region for screen readers.
• Function parameters:

announceToScreenReader(message, liveType = 'polite')
@param {string} message - The message that will be announced by the screen reader.
@param {'polite' | 'assertive'} [liveType="polite"] - Defines the urgency of the announcement:
    polite (default): Announces the message at the next available opportunity.
    assertive: Announces the message immediately, interrupting any ongoing speech.

Adjustments in 2G Templates

• Only necessary changes were made to unify the behavior of quantity adjustments via buttons and keyboard arrows (ArrowUp/ArrowDown).
• Accessibility was not implemented in these templates.
• The step attribute for the quantity input was adjusted:
  • Instead of value any, it now reflects the decimal precision set for the product (e.g., 0.001 for 3 decimal places, 1 for no decimals).
• The autocomplete="off" attribute was added to the quantity input.

---

Improvements

Deprecated function log

As we informed you in the previous news, we will mark deprecated functions using shoptet.dev.deprecated and log them into the console. Please remove deprecated functions from your codebase as soon as possible.

Largest Contentful Paint (LCP) metrics improvement

We moved cookie bar right after the footer element, this significantly improves the performance.

---

What we plan in upcoming days

• Width and height attribute and lazy loading for (almost) all images
• Main navigation keyboard accessibility
• Product sorting keyboard accessibility
• Cart widget keyboard accessibility
• Product slider improvements

Post navigation