HowTo: Add support for number formatting in the Storefront
Edit on GitHubNumber 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 | 202404.0 | Install the Spryker Core feature |
1) Install the required modules
Install the required modules using Composer:
composer require spryker/util-number
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
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.
Thank you!
For submitting the form