HowTo: Add support for number formatting in the Storefront

Last updated:
Edit on GitHub

Number formats can vary by locales. For example, if in the DE locale there is a number 123.456,78, in the US locale it would be 123,456.78. To enable the proper number formatting by locale in your store, follow the instructions in this document.

Prerequisites

To add support for number formatting in the Storefront, integrate the required features:

NAME VERSION INSTALLATION GUIDE
Spryker Core 202410.0 Install the Spryker Core feature

1) Install the required modules

Install the required modules using Composer:

composer require spryker/util-number
Verification

Make sure the following modules have been installed:

MODULE EXPECTED DIRECTORY
UtilNumber vendor/spryker/util-number
ShopUi vendor/spryker-shop/shop-ui

2) Set up transfer objects

Generate transfers:

console transfer:generate
Verification

Ensure the following transfers have been created:

TRANSFER TYPE EVENT PATH
NumberFormatConfig class created src/Generated/Shared/Transfer/NumberFormatConfigTransfer
NumberFormatFilter class created src/Generated/Shared/Transfer/NumberFormatFilterTransfer
NumberFormatIntRequest class created src/Generated/Shared/Transfer/NumberFormatIntRequestTransfer
NumberFormatFloatRequest class created src/Generated/Shared/Transfer/NumberFormatFloatRequestTransfer

3) Set up behavior

Enable the following behaviors by registering the plugins:

PLUGIN SPECIFICATION PREREQUISITES NAMESPACE
NumberFormatterTwigPlugin Extends Twig with formatInt() and formatFloat() filter functions. None SprykerShop\Yves\ShopUi\Plugin\Twig\NumberFormatterTwigPlugin

src/Pyz/Yves/Twig/TwigDependencyProvider.php

<?php

namespace Pyz\Yves\Twig;

use Spryker\Yves\Twig\TwigDependencyProvider as SprykerTwigDependencyProvider;
use SprykerShop\Yves\ShopUi\Plugin\Twig\NumberFormatterTwigPlugin;

class TwigDependencyProvider extends SprykerTwigDependencyProvider
{
    /**
     * @return array<\Spryker\Shared\TwigExtension\Dependency\Plugin\TwigPluginInterface>
     */
    protected function getTwigPlugins(): array
    {
        return [
            ...
            new NumberFormatterTwigPlugin(),
        ];
    }
}

4) Install npm dependency

Add autonumeric dependency:

npm install autonumeric@~4.6.0

5) Build the Storefront UI frontend

Enable Javascript and CSS changes for the Storefront:

console frontend:yves:build

After applying all these changes, you can see formatted prices and numbers in the Storefront forms and views.