phphtmllaravellaravel-blade
Why isn't my email interpreting my code and displaying the raw code?
I want to send an email with Laravel, for that, no problem, the email is sent. However, the email I want to send includes two tables that I want to show to the user. Once the email is received, half of it is “illegible”. Only the first table is interpreted, the second is shown in its raw form.
Here is my blade view.
<!-- resources/views/emails/visite/answer.blade.php -->
@component('mail::message')
@lang('Hello'),<br/><br/>
Votre demande de visite planifiée datant du {{ date('d/m/Y', strtotime($planif->created_at)) }} a été @if($planif->etat == 1) acceptée. @else refusée. @endif
@if($planif->etat == 1)
@component('mail::table')
| Nom | Prénom | Société |
|-----------|-----------|-------------|
@foreach(json_decode($planif->final_visiteurs) as $item)
| {{ $item->name }} | {{ $item->firstname }} | {{ $item->societe }} |
@endforeach
@endcomponent
<br/><br/>
@component('mail::table')
| Modèle | Immatriculation |
|---------------|------------------|
@foreach(json_decode($planif->final_vehicules) as $item)
| @if($item->modele != null) {{ $item->modele }} @else Non renseigné @endif | {{ $item->immat }} |
@endforeach
@endcomponent
@endif
Pour plus d'informations, veuillez contacter l'ASIP.
@lang('Sincerely yours')<br>
EamusCork
@endcomponent
Here is the function that sends the email.
public function accept_planif(Request $request, $id){
$planif = PlanificationVisite::findOrFail($id);
$vis_final = [];
if($request->input('vis')){
$vis = json_decode($request->input('vis')[0]);
for($i = 0; $i < count($vis); $i++){
$vis_final[] = [
'name' => $vis[$i]->name,
'firstname' => $vis[$i]->firstname,
'societe' => $vis[$i]->societe,
'document' => $vis[$i]->document
];
}
}
$veh_final = [];
if($request->input('veh')){
$veh = json_decode($request->input('veh')[0]);
for($i = 0; $i < count($veh); $i++){
$veh_final[] = [
'grise' => $veh[0]->grise,
'immat' => $veh[0]->immat,
'modele' => $veh[0]->modele,
];
}
}
$planif->update(['final_visiteurs' => json_encode($vis_final), 'final_vehicules' => json_encode($veh_final), 'etat' => 1]);
$email = new AnswerPlanificationVisite($planif);
Mail::to($planif->email_sent)->locale('fr')->send($email);
return redirect()->route('visite.see_planif');
}
This is how the email is rendered.
I tried to modify the blade view directly using the <table>, <thead>, <tbody>... tags without success. As you can see, the components don't work any better. I checked the documentation for the use of "\Mail", I don't think I made an error on the sending function and I use markdown correctly.
Here is the source code of the email.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- resources/views/emails/visite/answer.blade.php -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">
<style>
@media only screen and (max-width: 600px) {
.inner-body {
width: 100% !important;
}
.footer {
width: 100% !important;
}
}
@media only screen and (max-width: 500px) {
.button {
width: 100% !important;
}
}
</style>
</head>
<body style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -webkit-text-size-adjust: none; background-color: #ffffff; color: #718096; height: 100%; line-height: 1.4; margin: 0; padding: 0; width: 100% !important;"><img width="1" height="1" src='https://eciaccf.r.af.d.sendibt2.com/tr/op/OMollFTSRvBkb0jY8o-Ta5M0ZXU2U9xek8HU1_4aS2kfcplPBady8fOFepn-GeSkXsf7hUonWZMug_rFnjHlQBu7NcwO_S_3A992F6GQmP1NeVR-G6ToB15anoIFSHE-_gBX-1rmRA3EIII1xqORV1l3ZQFVzehDUlJv_Z1IGwvr7kDrFCUoOFfziW8kw2QVNVens6HQdhnjuR0cD_vbGD7HTXp_' />
<table class="wrapper" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%; background-color: #edf2f7; margin: 0; padding: 0; width: 100%;">
<tr>
<td align="center" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<table class="content" width="100%" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%; margin: 0; padding: 0; width: 100%;">
<tr>
<td class="header" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; padding: 25px 0; text-align: center;">
<a href="https://eciaccf.r.af.d.sendibt2.com/tr/cl/y4U0BaZi9-XI2z1JSr3N1odchSxYa4dWK4m8d9ekqrnzcfXJjkffCBTaq7vudG9jtBGlux8ZSQGnuEMI8ubBrSTJsxR4zuwTpfwrsGmBEY0RJd4zeSTiW2vkyFXUOYf-q5nVcX8cIBCgFDTM3D6IgrpDRXCcZxyXJAuDGhmc7MF0U6ZsvyDf58PtE9CBU1m6rNzqbTqhhmtuJarYLMWdbBA3VWL2C4cyqwn2AsnAYaI6BHRJV2AgDU1TIjlQ6talXhgQ0n8Xm7dqzR9kqQ" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; color: #3d4852; font-size: 19px; font-weight: bold; text-decoration: none; display: inline-block;">
EamusCork - Alerte
</a><br>
<span class="text-sm" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; font-size: 10px;">Ne pas répondre à cet e-mail</span>
</td>
</tr>
<!-- Email Body -->
<tr>
<td class="body" width="100%" cellpadding="0" cellspacing="0" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%; background-color: #edf2f7; border-bottom: 1px solid #edf2f7; border-top: 1px solid #edf2f7; margin: 0; padding: 0; width: 100%;">
<table class="inner-body" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 570px; background-color: #ffffff; border-color: #e8e5ef; border-radius: 2px; border-width: 1px; box-shadow: 0 2px 0 rgba(0, 0, 150, 0.025), 2px 4px 0 rgba(0, 0, 150, 0.015); margin: 0 auto; padding: 0; width: 570px;">
<!-- Body content -->
<tr>
<td class="content-cell" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; max-width: 100vw; padding: 32px;">
<p style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; font-size: 16px; line-height: 1.5em; margin-top: 0; text-align: left;">Bonjour,<br><br></p>
<p style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; font-size: 16px; line-height: 1.5em; margin-top: 0; text-align: left;">Votre demande de visite planifiée datant du 21/05/2024 a été acceptée.
</p>
<p style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; font-size: 16px; line-height: 1.5em; margin-top: 0; text-align: left;"><strong style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">Visiteurs concernés</strong></p>
<table class="table" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<thead style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<tr>
<th style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; border-bottom: 1px solid #edeff2; margin: 0; padding-bottom: 8px;">Nom</th>
<th style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; border-bottom: 1px solid #edeff2; margin: 0; padding-bottom: 8px;">Prénom</th>
<th style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; border-bottom: 1px solid #edeff2; margin: 0; padding-bottom: 8px;">Société</th>
</tr>
</thead>
<tbody style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<tr>
<td style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; color: #74787e; font-size: 15px; line-height: 18px; margin: 0; padding: 10px 0;">Smee</td>
<td style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; color: #74787e; font-size: 15px; line-height: 18px; margin: 0; padding: 10px 0;">Cédric</td>
<td style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; color: #74787e; font-size: 15px; line-height: 18px; margin: 0; padding: 10px 0;">Eamus Cork</td>
</tr>
<tr>
<td style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; color: #74787e; font-size: 15px; line-height: 18px; margin: 0; padding: 10px 0;">Ditacroute</td>
<td style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; color: #74787e; font-size: 15px; line-height: 18px; margin: 0; padding: 10px 0;">Thomas</td>
<td style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; color: #74787e; font-size: 15px; line-height: 18px; margin: 0; padding: 10px 0;">Eamus Cork</td>
</tr>
<tr>
<td style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; color: #74787e; font-size: 15px; line-height: 18px; margin: 0; padding: 10px 0;">Ben Arfa</td>
<td style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; color: #74787e; font-size: 15px; line-height: 18px; margin: 0; padding: 10px 0;">Karim</td>
<td style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; color: #74787e; font-size: 15px; line-height: 18px; margin: 0; padding: 10px 0;">Eamus Cork</td>
</tr>
</tbody>
</table>
<pre style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;"><code><br/><br/>
<p><strong>Véhicules concernés</strong></p>
<table class="table">
<thead>
<tr>
<th>Modèle</th>
<th>Immatriculation</th>
</tr>
</thead>
<tbody>
<tr>
<td> Ford Transit </td>
<td>AB-123-CD</td>
</tr>
<tr>
<td> Ford Transit </td>
<td>AB-123-CD</td>
</tr>
<tr>
<td> Ford Transit </td>
<td>AB-123-CD</td>
</tr>
</tbody>
</table>
</code></pre>
<p style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; font-size: 16px; line-height: 1.5em; margin-top: 0; text-align: left;">Pour plus d'informations, veuillez contacter l'ASIP.</p>
<p style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; font-size: 16px; line-height: 1.5em; margin-top: 0; text-align: left;">Cordialement<br>
EamusCork</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">
<table class="footer" align="center" width="570" cellpadding="0" cellspacing="0" role="presentation" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 570px; margin: 0 auto; padding: 0; text-align: center; width: 570px;">
<tr>
<td class="content-cell" align="center" style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; max-width: 100vw; padding: 32px;">
<p style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative; line-height: 1.5em; margin-top: 0; color: #b0adc5; font-size: 12px; text-align: center;"><i style="box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; position: relative;">Article L612-14 du CSI : L'autorisation d'exercice ne confère aucune prérogative de puissance publique à l'entreprise ou aux personnes qui en bénéficient.</i><br>
© 2024 DEVS - Portail Agent. All rights reserved.</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Solution
To fix this error, it is important to check for spaces and indentations. Markdown is very sensitive to these elements, if one of the two is not used correctly then all the rest of the code is not interpreted.
I don't know much about blade, but I think this is going to come down to the line that starts with: | @if($item->modele != null). Markdown is very sensitive to whitespace. Can you break the if into multiple lines, and then have | {{ $item->modele }} instead, making sure to keep that indentation at the same level as the table itself?
@Chris Haas
Here is my code before changes :
<!-- resources/views/emails/visite/answer.blade.php -->
@component('mail::message')
@lang('Hello'),<br/><br/>
Votre demande de visite planifiée datant du {{ date('d/m/Y', strtotime($planif->created_at)) }} a été @if($planif->etat == 1) acceptée. @else refusée. @endif
@if($planif->etat == 1)
@component('mail::table')
| Nom | Prénom | Société |
|-----------|-----------|-------------|
@foreach(json_decode($planif->final_visiteurs) as $item)
| {{ $item->name }} | {{ $item->firstname }} | {{ $item->societe }} |
@endforeach
@endcomponent
<br/><br/>
@component('mail::table')
| Modèle | Immatriculation |
|---------------|------------------|
@foreach(json_decode($planif->final_vehicules) as $item)
| @if($item->modele != null) {{ $item->modele }} @else Non renseigné @endif | {{ $item->immat }} |
@endforeach
@endcomponent
@endif
Pour plus d'informations, veuillez contacter l'ASIP.
@lang('Sincerely yours')<br>
EamusCork
@endcomponent
And my code now :
<!-- resources/views/emails/visite/answer.blade.php -->
@component('mail::message')
@lang('Hello'),<br/><br/>
Votre demande de visite planifiée datant du {{ date('d/m/Y', strtotime($planif->created_at)) }} a été @if($planif->etat == 1) acceptée. @else refusée. @endif
@if($planif->etat == 1)
@component('mail::table')
| Nom | Prénom | Société |
|-----------|-----------|-------------|
@foreach(json_decode($planif->final_visiteurs) as $item)
| {{ $item->name }} | {{ $item->firstname }} | {{ $item->societe }} |
@endforeach
@endcomponent
<br/><br/>
@component('mail::table')
| Modèle | Immatriculation |
|---------------|------------------|
@foreach(json_decode($planif->final_vehicules) as $item)
@if($item->modele != null) | {{ $item->modele }} @else | Non renseigné @endif | {{ $item->immat }} |
@endforeach
@endcomponent
<br/><br/>
@endif
Pour plus d'informations, veuillez contacter l'ASIP.
@lang('Sincerely yours')<br>
EamusCork
@endcomponent
You can see a slight change in the condition of the second table. This small error was enough to cause this raw code display error.
- How to enable locked user again on laravel after 3 wrong attempts on login
- PHP Strict Standards: Only variables should be passed by reference in .lib
- Validator EmailAddress can validate an array of email
- Remotely Scrape Page and Get most Relevant title or Description for Images with XPath
- CodeIgniter active record query only returning the first entry in the table
- Sort array of objects by one property
- How do i make a form with an image and text
- Why does my PHP ternary operator return "three" instead of "two" in versions < 5.3?
- request IP in Laravel application not correct
- main form is not returnning to home page
- PHP valid url, including subdomains and also subpath
- PHP Curl following redirects
- file_get_contents in PHP not working
- Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in
- Make preg_match() match all occurrences in text
- Append text with a newline in a Windows environment with file_put_contents()
- Get all <span> texts containing non-zero dollar amounts from an HTML string
- Automatically change product tag on stock change in WooCommerce
- Zend Service Manager - Service not found exception when trying to use phpdebugbar
- 10001 paypal internal error: timeout processing request Express Checkout
- Create Magento Backend Field ReadOnly
- Vtiger 7.2 query operations to REST API returning 500 errors
- Outputting required field indicator for symfony forms
- Displaying CSV file content in Yii Framework's CGridView
- Magento - How do I programmatically add tags to an existing product?
- Add a query param to all urls generated from routes automatically
- Cakephp: choose which data to save after login
- Using Rollbar with Lumen 5.7
- Class 'Input' not found
- Wordpress - multiple WP Query objects into one?