Notice: You are browsing the documentation for PrestaShop 9, which is currently in development.

You might want to read the documentation for the current version, PrestaShop 8. Read the current version of this page

How to extend a layout in a theme from a module

Sometimes you may want to use the provided email theme but you would like to add some information or change the header/footer. One of the advantages of new theme layouts is that they use Twig so you can take advantage of its extension and blocks features.

Layout

{% extends '@MailThemes/modern/core/order_conf.html.twig' %}

{% block content %}
  {{ parent() }}
  <table width="100%">
    <tr>
      <td align="center" class="titleblock" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; direction: ltr; font-size: 0px; padding: 0 50px; text-align: center; vertical-align: top;">
        <div  style="font-family:Open sans, arial, sans-serif;font-size:14px;line-height:25px;text-align:left;color:#555454;">
          {{ 'Thank you for purchasing this product on our store. Feel free to leave us a review if you are happy of this product:'|trans({}, 'EmailsBody', locale)|raw }}
          <a href="{shop_url}/post_review">{{ 'Post a review'|trans({}, 'EmailsBody', locale)|raw }}</a>
        </font>
      </td>
    </tr>
  </table>
{% endblock %}

Using the hook

Now you need to add your layout to the theme’s layout collection, in order to do so you will use the actionListMailThemes hook.

<?php
use PrestaShop\PrestaShop\Core\MailTemplate\Layout\LayoutInterface;
use PrestaShop\PrestaShop\Core\MailTemplate\ThemeCatalogInterface;
use PrestaShop\PrestaShop\Core\MailTemplate\ThemeCollectionInterface;
use PrestaShop\PrestaShop\Core\MailTemplate\ThemeInterface;

class MyEmailThemeModule extends Module 
{
    public function install() 
    {
        return parent::install()
            // This class constant contains 'actionListMailThemes'
            && $this->registerHook(ThemeCatalogInterface::LIST_MAIL_THEMES_HOOK)
        ;
    }

    public function uninstall() 
    {
        return parent::uninstall()
            && $this->unregisterHook(ThemeCatalogInterface::LIST_MAIL_THEMES_HOOK)
        ;
    }

    public function enable() 
    {
        return parent::enable()
            && $this->registerHook(ThemeCatalogInterface::LIST_MAIL_THEMES_HOOK)
        ;
    }

    public function disable() 
    {
        return parent::disable()
            && $this->unregisterHook(ThemeCatalogInterface::LIST_MAIL_THEMES_HOOK)
        ;
    }

    /**
     * @param array $hookParams
     */
    public function hookActionListMailThemes(array $hookParams)
    {
        if (!isset($hookParams['mailThemes'])) {
            return;
        }

        /** @var ThemeCollectionInterface $themes */
        $themes = $hookParams['mailThemes'];
        $theme = $themes->getByName('modern');
        if (!$theme) {
            return;
        }

        // First parameter is the layout name, second one is the module name (empty value matches the core layouts)
        $orderConfLayout = $theme->getLayouts()->getLayout('order_conf', '');
        if (null === $orderConfLayout) {
            return;
        }

        //The layout collection extends from ArrayCollection so it has more feature than it seems..
        //It allows to REPLACE the existing layout easily
        $orderIndex = $theme->getLayouts()->indexOf($orderConfLayout);
        $theme->getLayouts()->offsetSet($orderIndex, new Layout(
            $orderConfLayout->getName(),
            __DIR__ . '/mails/layouts/order_conf.html.twig',
            ''
        ));
    }
}

You can then go to the “Design > Email Theme” page and preview the modern order_conf layout.

Your order_conf layout has been extended' layout list