4.8 Template Migration

Convert legacy Semantic UI templates to Bootstrap 5 and render them via Twig Hooks instead of direct bundle template overrides. This makes your UI consistent with Sylius 2.0 (Tabler/BS5) and decouples your plugin views from core templates.

1. Create hook config directories

Create per-resource hook config folders (Admin shown; repeat for other resources as needed):

mkdir -p config/twig_hooks/admin/{resource_name}

Replace {resource_name} with your resource (e.g. terms, product, …).

2. Create hook definition files

Define hooks for create and update forms of a resource. Use explicit Sylius Admin hook names you want to target.

config/twig_hooks/admin/{resource}/create.yaml

sylius_twig_hooks:
  hooks:
    'sylius_admin.{resource}.create.content.form.sections':
      general:
        template: '@{PluginName}/admin/{resource}/form/sections/general.html.twig'
        priority: 100

config/twig_hooks/admin/{resource}/update.yaml

sylius_twig_hooks:
  hooks:
    'sylius_admin.{resource}.update.content.form.sections':
      general:
        template: '@{PluginName}/admin/{resource}/form/sections/general.html.twig'
        priority: 100

Notes:

• Keep {PluginName} as your plugin’s Twig namespace (e.g. @Plugin).

• Block keys (e.g. general) are arbitrary; choose meaningful names.

• Adjust hook names if you target other regions (header, actions, sidebar, etc.).

3. Convert Semantic UI → Bootstrap 5

Find Semantic UI classes and convert them to BS5 equivalents:

4. Create the section template

Create the partial referenced by your hook:

templates/admin/{resource}/form/sections/general.html.twig

{% set form = hookable_metadata.context.form %}

<div class="card mb-3">
  <div class="card-header">
    <h3 class="card-title">General Information</h3>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-md-6">
        {{ form_row(form.{field}, { attr: { class: 'form-control' } }) }}
      </div>
    </div>
  </div>
</div>

• Replace {field} with your actual form field.

• Use additional rows/cols/cards for more fields as needed.

5. Update icons to Tabler

{# before #}
<i class="images outline icon"></i>

{# after (Tabler) #}
<i class="tabler-icon tabler-icon-photo"></i>

6. Import hook configs

Ensure your main config imports hook files:

# config/config.yaml
imports:
  - { resource: "twig_hooks/**/*.yaml" }