Hello,
I have a simple webform for contact with two email handlers.
First is an email to the customer and the second one is for employee, saying there is a new contact request.
WEBFORM_ID = contact
HANDLER_ID = customerconfirmation
HANDLER_ID = contactrequest
in both, for the body, it is configured to use HTML (Twig) Template.
In my custom module, i have created this files:
/themes/custom/gssolar/templates/webform/webform-email-message-html--contact--contactrequest.html.twig
/themes/custom/gssolar/templates/webform/webform-email-message-html--contact--customerconfirmation.html.twig
In my gssolar.theme, there is a function:
/**
* Implements hook_preprocess_HOOK() for webform email message templates.
*/
function gssolar_preprocess_webform_email_message_html(&$variables) {
/** @var \Drupal\webform\WebformSubmissionInterface $webform_submission */
$webform_submission = $variables['webform_submission'];
$variables['data'] = $webform_submission->getData();
// Retrieve the Webform ID
$webform_id = $webform_submission->getWebform()->id();
// Access the handler object correctly
$handler = $variables['handler'];
// Check and access the handler ID through configuration
$handler_configuration = $handler->getConfiguration();
$handler_id = !empty($handler_configuration['handler_id']) ? $handler_configuration['handler_id'] : NULL;
if ($handler_id) {
// Perform operations with the handler ID if necessary
$variables['theme_hook_suggestion'] = 'webform-email-message-html--' . $webform_id . '--' . $handler_id;
} else {
// Handle the case where the handler ID cannot be retrieved
\Drupal::logger('gssolar')->error('Unable to retrieve the handler ID');
// Optionally, handle the lack of handler_id by setting a default suggestion:
// $variables['theme_hook_suggestion'] = 'webform-email-message-html--' . $webform_id . '--default';
}
// Debug to verify the Twig template suggestion
\Drupal::logger('gssolar')->notice('Twig template suggestion: @suggestion', ['@suggestion' => $variables['theme_hook_suggestion']]);
// Retrieve the name of the Twig template actually applied
$template_name = isset($variables['theme_hook_suggestion']) ? $variables['theme_hook_suggestion'] : '';
// Log to verify the name of the Twig template applied
\Drupal::logger('gssolar')->notice('Applied Twig template: @template', ['@template' => $template_name]);
}
in my Recent Log Messages I see:
Message Template Twig applicato: webform-email-message-html--contact--contactrequest
Message Suggerimento template Twig: webform-email-message-html--contact--contactrequest
The point is, both emails arrives without any template.
If I create the file only with webform_id, it applies the same twig file for both emails --> behavior not wanted.
I am missing something or there is bug?
Thank you in advance!
Camila F.
P.s.:
webform-email-message-html--contact--contactrequest.html.twig
I have also inserted this line "{{ 'Template Twig loaded'|debug }}" into my twig template, but nothing is showed in my Recent Log Pages.
{#
/**
* @file
* Default theme implementation for webform email wrapper template as HTML.
*
* Available variables:
* - message: The email message which contains to, from, subject, message, etc…
* - webform_submission: The webform submission.
* - handler: The webform handler.
*
* @ingroup themeable
*/
#}
{{ 'Template Twig loaded'|debug }}
<!DOCTYPE html>
<html lang="it">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap" rel="stylesheet">
<style>
{
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: inherit !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
}
p {
line-height: inherit;
}
.desktop_hide,
.desktop_hide table {
mso-hide: all;
display: none;
max-height: 0px;
overflow: hidden;
}
.image_block img+div {
display: none;
}
@media (max-width: 660px) {
.desktop_hide table.icons-inner {
display: inline-block !important;
}
.icons-inner {
text-align: center;
}
.icons-inner td {
margin: 0 auto;
}
.mobile_hide {
display: none;
}
.row-content {
width: 100% !important;
}
.stack .column {
width: 100%;
display: block;
}
.mobile_hide {
min-height: 0;
max-height: 0;
max-width: 0;
overflow: hidden;
font-size: 0px;
}
.desktop_hide,
.desktop_hide table {
display: table !important;
max-height: none !important;
}
}
</style>
</head>
<body class="body" style="background-color: #f6f8f8; margin: 0; padding: 0; -webkit-text-size-adjust: none; text-size-adjust: none;">
<table border="0" cellpadding="0" cellspacing="0" class="nl-container" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f8f8;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #000000; width: 640px; margin: 0 auto;" width="640">
<tbody>
<tr>
<td class="column column-1" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="100%">
<div class="spacer_block block-1" style="height: 1px; line-height: 1px; font-size: 1px;"></div>
<div class="spacer_block block-2" style="height: 35px; line-height: 35px; font-size: 1px;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-2" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff; color: #000000; width: 640px; margin: 0 auto;" width="640">
<tbody>
<tr>
<td class="column column-1" style="
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
font-weight: 400;
text-align: left;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
vertical-align: middle;
border-top: 0px;
border-right: 0px;
border-bottom: 0px;
border-left: 0px;
" width="25%">
<table border="0" cellpadding="0" cellspacing="0" class="image_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tr>
<td class="pad" style="width: 100%; padding-right: 0px; padding-left: 0px;">
<div align="left" class="alignment" style="line-height: 10px;">
<div style="max-width: 140px;">
<img height="auto" src="https://www.gssolar.eu/sites/default/files/logo_trasp_0.png" style="display: block; height: auto; border: 0; width: 100%;" width="140" />
</div>
</div>
</td>
</tr>
</table>
</td>
<td class="column column-2" style="
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
font-weight: 400;
text-align: left;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
vertical-align: middle;
border-top: 0px;
border-right: 0px;
border-bottom: 0px;
border-left: 0px;
" width="75%">
<table border="0" cellpadding="10" cellspacing="0" class="heading_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tr>
<td class="pad">
<h1 style="
margin: 0;
color: #000;
direction: ltr;
font-family: 'Quicksand', Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 26px;
font-weight: 700;
letter-spacing: normal;
line-height: 120%;
text-align: center;
margin-top: 0;
margin-bottom: 0;
mso-line-height-alt: 31.2px;
">
<span class="tinyMce-placeholder">Contatto Richiesto dal Sito</span>
</h1>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-3" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff; color: #000000; width: 640px; margin: 0 auto;" width="640">
<tbody>
<tr>
<td class="column column-1" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: middle; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="100%">
<div class="spacer_block block-1" style="height: 35px; line-height: 35px; font-size: 1px;"></div>
<table border="0" cellpadding="10" cellspacing="0" class="paragraph_block block-2" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;" width="100%">
<tr>
<td class="pad">
<div style="
color: #101112;
direction: ltr;
font-family: 'Quicksand', Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0px;
line-height: 120%;
text-align: left;
mso-line-height-alt: 19.2px;
">
<p style="margin: 0; margin-bottom: 16px;"> Ci sono nuove richieste di contatto inserite sul sito! <br />
<br /> Nome: <b>{{ data.first_name }}</b>
<br /> Cognome: <b>{{ data.last_name }}</b>, <br />
<br /> Recapiti forniti: <br />
<br /> E-mail: <b>{{ data.email }}</b>
<br /> Telefono: <b>{{ data.phone_number }}</b>
<br />
<br /> Dettaglio Messaggio: <br />
<br /> Oggetto: <b>{{ data.subject }}</b>
<br /> Messaggio: <b>{{ data.message }}</b>
</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-4" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #ffffff; color: #000000; width: 640px; margin: 0 auto;" width="640">
<tbody>
<tr>
<td class="column column-1" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="100%">
<div class="spacer_block block-1" style="height: 35px; line-height: 35px; font-size: 1px;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-5" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #000000; width: 640px; margin: 0 auto;" width="640">
<tbody>
<tr>
<td class="column column-1" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-weight: 400; text-align: left; vertical-align: top; border-top: 0px; border-right: 0px; border-bottom: 0px; border-left: 0px;" width="100%">
<table border="0" cellpadding="0" cellspacing="0" class="paragraph_block block-1" role="presentation" style="mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word;" width="100%">
<tr>
<td class="pad" style="padding-bottom: 15px; padding-left: 20px; padding-right: 20px; padding-top: 15px;">
<div style="color: #555555; font-family: 'Quicksand', Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 12px; font-weight: 400; line-height: 150%; text-align: center; mso-line-height-alt: 18px;"> © 2024 GSSolar di Gabriele Sassaro P.IVA 04382310243 </div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Drupal: 10.3.0
Webform: 6.2.2
Closed: works as designed
6.2
Code
There are already a lot of theme suggestions including webform handlers for email templates
@see https://git.drupalcode.org/project/webform/-/blob/6.2.x/includes/webform...
@see https://git.drupalcode.org/project/webform/-/blob/6.2.x/includes/webform...
If you need additional template suggestions, you should use custom code.