Epic layout small components with Twig #33101

jolelievre · 2023-07-04T13:00:49Z

The base smarty layout admin-dev/themes/new-theme/template/layout.tpl is composed of multiple small blocks. To migrate the whole layout progressively to Twig we're gonna handle those blocks piece by piece and split them into small components.

We will rely on the Symfony UX Twg component to handle them, you can see an example of this implementation in this POC PR

To allow merging in advance the modifications and avoid too many conflicts resolving on a dedicated branch we'll use a feature flag to enable/disable the Symfony layout feature (all the components are bound to the same feature flag).

Step 1 - create Twig component and identify their dependencies

The initial PR will introduce a render_template smarty method, this method is able to either render the old smarty block or the new Twig component. The first step of this migration is to create the Twig components (rendered via a temporary twig file), the method will need these parameters:

legacy smarty template path
twig template path
all the variables required to render the twig component

        {render_template
          smarty_template="components/layout/quick_access.tpl"
          twig_template="@PrestaShop/Admin/Layout/quick_access.html.twig"
          quick_access=$quick_access
          link=$link
          quick_access_current_link_icon=$quick_access_current_link_icon
          quick_access_current_link_name=$quick_access_current_link_name
        }

The @PrestaShop/Admin/Layout/quick_access.html.twig template is only used to render the component:

{{ component('QuickAccess', {
  quickAccess: quick_access,
  link: link,
  quickAccessCurrentLinkIcon: quick_access_current_link_icon,
  quickAccessCurrentLinkName: quick_access_current_link_name
}) }}

In step 1 all the required variables are passed manually from Smarty.

Step 2 - Make the components independent

The second step is about making the component independent, all the data it needs to fetch should be handled internally via some repositories, some context services, ... We only keep some manually injected variables if the component is meant to be used often with different options from the template so that it can adapt to several use cases.

The variables passed to the template should be lazy loaded as much as possible, this way when the component is not displayed no need to fetch the data.

#[AsTwigComponent(template: '@PrestaShop/Admin/Component/Layout/quick_access.html.twig')]
class QuickAccess
{
    public function __construct(private QuickAccessRepository $quickAccessRepository) {
    }

    public function getQuickAccesses(): array {
        return $this->quickAccessRepository->getQuickAccesses();
    }
}

The purpose, as much as possible, is that the component will then be rendered without requiring some inputs:

{{ component('QuickAccess') }}

Twig components

Independent twig components

Not required to finish the EPIC

Independent twig component: shop list #33178

The text was updated successfully, but these errors were encountered:

jolelievre added EPIC Macro-level issue gathering improvements & bugs related to a specific topic Symfony layout Task Type: neither a bug or a feature 9.0.x Branch labels Jul 10, 2023

jolelievre mentioned this issue Jul 10, 2023

Introduce the LayoutBuilder service for Symfony layout #33138

Closed

hibatallahAouadni removed the 9.0.x Branch label Jul 11, 2023

jolelievre mentioned this issue Jul 11, 2023

Create the symfony layout Twig component #33140

Closed

2 tasks

boherm mentioned this issue Jul 18, 2023

Make independent Quick Access twig component #33298

Merged

jolelievre closed this as completed Nov 23, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Epic layout small components with Twig #33101

Epic layout small components with Twig #33101

jolelievre commented Jul 4, 2023 •

edited

Epic layout small components with Twig #33101

Epic layout small components with Twig #33101

Comments

jolelievre commented Jul 4, 2023 • edited

Step 1 - create Twig component and identify their dependencies

Step 2 - Make the components independent

Twig components

Independent twig components

jolelievre commented Jul 4, 2023 •

edited