Symfony Form Theme for PrestaShop

PrestaShop usage

PrestaShop relies on Twig’s FormRenderer, which requires a Form Theme to function. Bootstrap 4 Form Theme is a popular one.

The Form Theme is a set of Twig macros and functions that provide a way to render the different parts of a form: every label, input type, and specific option has its own macro.

Example for the date widget:

{%- block date_widget -%}
  {%- if widget == 'single_text' -%}
    {{ block('form_widget_simple') }}
  {%- else -%}
    <div {{ block('widget_container_attributes') }}>
      {{- date_pattern|replace({
        '{{ year }}':  form_widget(form.year),
        '{{ month }}': form_widget(form.month),
        '{{ day }}':   form_widget(,
      })|raw -}}
  {%- endif -%}
{%- endblock date_widget -%}

PrestaShop UI Kit Form theme

PrestaShop Form theme is located in the src/PrestaShopBundle/Resources/views/Admin/TwigTemplateForm/ directory.

PrestaShop UI Kit Form theme aim is to allow developers to be able to render full forms using a single form_widget(form) statement. This allows developers to customize the rendering by customizing the Form Theme, not the form. The changes performed on the Form Theme are done globally rather than on a single page.

This theme extends Symfony’s Bootstrap 4 form theme, allowing it to inherit all improvements done to Symfony’s own form theme.

prestashop_ui_kit.html.twig extends prestashop_ui_kit_base.html.twig and also relies on bootstrap_4_horizontal_layout, in order to render forms horizontally.

Until it becomes the default Form Theme, Twig templates that need to rely on this theme need to activate it using the following statement:

{% form_theme form '@PrestaShop/Admin/TwigTemplateForm/prestashop_ui_kit_base.html.twig' %}

UI Kit Form Theme example of rendering