HowTo: Add support for number formatting in the Storefront

Last updated:
Edit on GitHub

This document explains how to add support for number formatting in the Storefront UI.

Prerequisites

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

NAME VERSION INTEGRATION GUIDE
Spryker Core 202212.0 Spryker Core feature integration

1) Install the required modules using Composer

Install the required modules:

composer require spryker/util-number
Verification

Ensure that 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.