Install the Back Office number formatting

Last updated:
Edit on GitHub

This document explains how to add support of number formatting in the Back Office UI.

Prerequisites

To add support of number formatting in the Back Office, integrate the following features:

NAME REQUIRED VERSION INTEGRATION GUIDE
Spryker Core ✅ 202410.0 Install the Spryker Core feature
Promotions & Discounts 202410.0 Install the Promotions & Discounts feature
Product Options 202410.0 Product Options feature walkthrough
Product + Order Management 202410.0 Install the Product + Order Management feature
Shipment 202410.0 Shipment integration

1) Install the required modules

Install the required modules using Composer:

composer require spryker/util-number spryker/money-gui
Verification

Make sure the following modules have been installed:

MODULE EXPECTED DIRECTORY
UtilNumber vendor/spryker/util-number
MoneyGui vendor/spryker/money-gui

2) Set up configuration

Extend the Discount configuration settings:

Warning

Apply the following changes only if you have the Promotions & Discounts feature installed.

src/Pyz/Zed/Discount/DiscountConfig.php

<?php

/**
 * This file is part of the Spryker Suite.
 * For full license information, view the LICENSE file that was distributed with this source code.
 */

namespace Pyz\Zed\Discount;

use Spryker\Zed\Discount\DiscountConfig as SprykerDiscountConfig;

class DiscountConfig extends SprykerDiscountConfig
{
    /**
     * @var bool
     */
    protected const IS_MONEY_COLLECTION_FORM_TYPE_PLUGIN_ENABLED = true;
}
Verification

Make sure that calling Pyz\Zed\Discount\DiscountConfig::isMoneyCollectionFormTypePluginEnabled() returns true.

3) 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
MoneyValueCollection class created src/Generated/Shared/Transfer/MoneyValueCollectionTransfer
MoneyValue class created src/Generated/Shared/Transfer/MoneyValueTransfer
Currency class created src/Generated/Shared/Transfer/CurrencyTransfer
Store class created src/Generated/Shared/Transfer/StoreTransfer
StoreWithCurrency class created src/Generated/Shared/Transfer/StoreWithCurrencyTransfer

4) Set up behavior

Enable the following behaviors by registering the plugins:

PLUGIN SPECIFICATION PREREQUISITES NAMESPACE
NumberFormatterApplicationPlugin Provides number formatter service. None Spryker\Zed\UtilNumber\Communication\Plugin\Application
NumberFormatterTwigPlugin Extends Twig with formatInt() and formatFloat() filter functions. None Spryker\Zed\Gui\Communication\Plugin\Twig
MoneyFormTypePlugin Adds MoneyFormTypePlugin form type. None Spryker\Zed\MoneyGui\Communication\Plugin\Form
MoneyCollectionFormTypePlugin Adds MoneyCollectionType form type. None Spryker\Zed\MoneyGui\Communication\Plugin\Form

src/Pyz/Zed/Application/ApplicationDependencyProvider.php

<?php

namespace Pyz\Zed\Application;

use Spryker\Zed\Application\ApplicationDependencyProvider as SprykerApplicationDependencyProvider;
use Spryker\Zed\UtilNumber\Communication\Plugin\Application\NumberFormatterApplicationPlugin;

class ApplicationDependencyProvider extends SprykerApplicationDependencyProvider
{
    /**
     * @return array<\Spryker\Shared\ApplicationExtension\Dependency\Plugin\ApplicationPluginInterface>
     */
    protected function getBackofficeApplicationPlugins(): array
    {
        $plugins = [
            ...
            new NumberFormatterApplicationPlugin(),
        ];

        ...
    }
}

src/Pyz/Zed/Twig/TwigDependencyProvider.php

<?php

namespace Pyz\Zed\Twig;

use Spryker\Zed\Gui\Communication\Plugin\Twig\NumberFormatterTwigPlugin;
use Spryker\Zed\Twig\TwigDependencyProvider as SprykerTwigDependencyProvider;

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

Apply the following changes only if you have the Discount Management feature installed.

src/Pyz/Zed/Discount/DiscountDependencyProvider.php

<?php

namespace Pyz\Zed\Discount;

use Spryker\Zed\Discount\DiscountDependencyProvider as SprykerDiscountDependencyProvider;
use Spryker\Zed\MoneyGui\Communication\Plugin\Form\MoneyCollectionFormTypePlugin;

class DiscountDependencyProvider extends SprykerDiscountDependencyProvider
{
    /**
     * @return \Spryker\Zed\Kernel\Communication\Form\FormTypeInterface
     */
    protected function getMoneyCollectionFormTypePlugin(): FormTypeInterface
    {
        return new MoneyCollectionFormTypePlugin();
    }
}
Warning

Apply the following changes only if you have the Product feature installed.

src/Pyz/Zed/ProductManagement/ProductManagementDependencyProvider.php

<?php

namespace Pyz\Zed\ProductManagement;

use Spryker\Zed\MoneyGui\Communication\Plugin\Form\MoneyFormTypePlugin;
use Spryker\Zed\ProductManagement\ProductManagementDependencyProvider as SprykerProductManagementDependencyProvider;

class ProductManagementDependencyProvider extends SprykerProductManagementDependencyProvider
{
    /**
     * @param \Spryker\Zed\Kernel\Container $container
     *
     * @return \Spryker\Zed\Kernel\Communication\Form\FormTypeInterface
     */
    protected function createMoneyFormTypePlugin(Container $container): FormTypeInterface
    {
        return new MoneyFormTypePlugin();
    }
}
Warning

Apply the following changes only if you have the Product Options feature installed.

src/Pyz/Zed/ProductOption/ProductOptionDependencyProvider.php

<?php

use Spryker\Zed\MoneyGui\Communication\Plugin\Form\MoneyCollectionFormTypePlugin;
use Spryker\Zed\ProductOption\ProductOptionDependencyProvider as SprykerProductOptionDependencyProvider;

class ProductOptionDependencyProvider extends SprykerProductOptionDependencyProvider
{
    /**
     * @param \Spryker\Zed\Kernel\Container $container
     *
     * @return \Spryker\Zed\Kernel\Communication\Form\FormTypeInterface
     */
    protected function createMoneyCollectionFormTypePlugin(Container $container): FormTypeInterface
    {
        return new MoneyCollectionFormTypePlugin();
    }
}
Warning

Apply the following changes only if you have the Carrier Management feature installed.

src/Pyz/Zed/ShipmentGui/ShipmentGuiDependencyProvider.php

<?php

use Spryker\Zed\MoneyGui\Communication\Plugin\Form\MoneyCollectionFormTypePlugin;
use Spryker\Zed\ShipmentGui\ShipmentGuiDependencyProvider as SprykerShipmentGuiDependencyProvider;

class ShipmentGuiDependencyProvider extends SprykerShipmentGuiDependencyProvider
{
    /**
     * @param \Spryker\Zed\Kernel\Container $container
     *
     * @return \Spryker\Zed\Kernel\Communication\Form\FormTypeInterface
     */
    protected function getMoneyCollectionFormTypePlugin(Container $container): FormTypeInterface
    {
        return new MoneyCollectionFormTypePlugin();
    }
}

5) Build Zed UI frontend

Enable Javascript and CSS changes for Zed:

console frontend:zed:build

After applying all these changes, you can see formatted prices and numbers in Back Office forms and tables.