phplaravellaravel-5sparkpostlaravel-mail

Views "With" method in a Laravel 5.5 Mailable


I have a mailable I am trying to send out, but for some reason, the one and only variable presented in the email is holding it up. Sparkpost won't send it if the {{$doorNumberDest}} is present (will explain later in the post), but without it, it sends fine.

So I have my controller:

public function sendDriverNotificationEmail(Request $request){
            $emailDriver = $request->emailDriver;
            $doorNumber = $request->doorNumber;
            Mail::to($emailDriver)->send(new arrivalDriverNotify($emailDriver, $doorNumber));   
    }

This leads to my mail class "arrivalDriverNotify" - at this point, all variable have been successfully continued on into this mail class.

Now my mail class:

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Contracts\Queue\ShouldQueue;

class arrivalDriverNotify extends Mailable
{
    use Queueable, SerializesModels;

    /**
     * Create a new message instance.
     *
     * @return void
     */
    public $emailDriver, $doorNumber;

    public function __construct($emailDriver, $doorNumber)
    {
        $this->doorNumber = $doorNumber;
        $this->email = $emailDriver;
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->from('office@cmxtrucking.com')
                    ->cc('office@cmxtrucking.com')
                    ->subject('CMX Dispatch - Driver Open for Details - Pull to Door '. $this->doorNumber)
                    ->view('emails.arrivals.driverNotify')
                    ->with([
                                'doorNumberDest' => $this->doorNumber,
                            ]);
    }
}

Now, the odd part here is that in my subject, as a test, I have included the $this->doorNumber to see if the value is still be passed along, and after I sent it, it worked, the door number (12) was in the subject like, but as you can see I have a with statement after my view in the mail class.

For whatever reason, I can't send the email through Sparkpost if it has this line:

<p>
                                    CMX DISPATCH - We're ready for you. Please back into Dock Door {{$doorNumberDest}} with your doors open. Please come to the office with any questions.
                                    <br>
                                    Cheers

but if I remove the {{$doorNumberDest}}, it sends fine, just without the variable...

Below is my full template, just in case there might be something there.

Full email template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
/* -------------------------------------
    GLOBAL
------------------------------------- */
* {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  font-size: 14px;
}

img {
  max-width: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  width: 100% !important;
  height: 100%;
  line-height: 1.6;
}

/* Let's make sure all tables have defaults */
table td {
  vertical-align: top;
}

/* -------------------------------------
    BODY & CONTAINER
------------------------------------- */
body {
  background-color: #f6f6f6;
}

.body-wrap {
  background-color: #f6f6f6;
  width: 100%;
}

.container {
  display: block !important;
  max-width: 600px !important;
  margin: 0 auto !important;
  /* makes it centered */
  clear: both !important;
}

.content {
  max-width: 600px;
  margin: 0 auto;
  display: block;
  padding: 20px;
}

/* -------------------------------------
    HEADER, FOOTER, MAIN
------------------------------------- */
.main {
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 3px;
}

.content-wrap {
  padding: 20px;
}

.content-block {
  padding: 0 0 20px;
}

.header {
  width: 100%;
  margin-bottom: 20px;
}

.footer {
  width: 100%;
  clear: both;
  color: #999;
  padding: 20px;
}
.footer a {
  color: #999;
}
.footer p, .footer a, .footer unsubscribe, .footer td {
  font-size: 12px;
}

/* -------------------------------------
    GRID AND COLUMNS
------------------------------------- */
.column-left {
  float: left;
  width: 50%;
}

.column-right {
  float: left;
  width: 50%;
}

/* -------------------------------------
    TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: #000;
  margin: 40px 0 0;
  line-height: 1.2;
  font-weight: 400;
}

h1 {
  font-size: 32px;
  font-weight: 500;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 18px;
}

h4 {
  font-size: 14px;
  font-weight: 600;
}

p, ul, ol {
  margin-bottom: 10px;
  font-weight: normal;
}
p li, ul li, ol li {
  margin-left: 5px;
  list-style-position: inside;
}

/* -------------------------------------
    LINKS & BUTTONS
------------------------------------- */
a {
  color: #348eda;
  text-decoration: underline;
}

.btn-primary {
  text-decoration: none;
  color: #FFF;
  background-color: #348eda;
  border: solid #348eda;
  border-width: 10px 20px;
  line-height: 2;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  border-radius: 5px;
  text-transform: capitalize;
}

/* -------------------------------------
    OTHER STYLES THAT MIGHT BE USEFUL
------------------------------------- */
.last {
  margin-bottom: 0;
}

.first {
  margin-top: 0;
}

.padding {
  padding: 10px 0;
}

.aligncenter {
  text-align: center;
}

.alignright {
  text-align: right;
}

.alignleft {
  text-align: left;
}

.clear {
  clear: both;
}

/* -------------------------------------
    Alerts
------------------------------------- */
.alert {
  font-size: 16px;
  color: #fff;
  font-weight: 500;
  padding: 20px;
  text-align: center;
  border-radius: 3px 3px 0 0;
}
.alert a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
}
.alert.alert-warning {
  background: #247aa9;
}
.alert.alert-bad {
  background: #d0021b;
}
.alert.alert-good {
  background: #68b90f;
}

/* -------------------------------------
    INVOICE
------------------------------------- */
.invoice {
  margin: 40px auto;
  text-align: left;
  width: 80%;
}
.invoice td {
  padding: 5px 0;
}
.invoice .invoice-items {
  width: 100%;
}
.invoice .invoice-items td {
  border-top: #eee 1px solid;
}
.invoice .invoice-items .total td {
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
  font-weight: 700;
}

/* -------------------------------------
    RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
@media only screen and (max-width: 640px) {
  h1, h2, h3, h4 {
    font-weight: 600 !important;
    margin: 20px 0 5px !important;
  }

  h1 {
    font-size: 22px !important;
  }

  h2 {
    font-size: 18px !important;
  }

  h3 {
    font-size: 16px !important;
  }

  .container {
    width: 100% !important;
  }

  .content, .content-wrapper {
    padding: 10px !important;
  }

  .invoice {
    width: 100% !important;
  }
}

</style>
    </head>

<body>

<table class="body-wrap">
    <tr>
        <td></td>
        <td class="container" width="600">
            <div class="content">
                <table class="main" width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="alert alert-warning">
                            <img width="200px" src="https://www.cmxtrucking.com/wp-content/uploads/2017/11/CMXlogoNew.png">
                        </td>
                    </tr>
                    <tr>
                        <td class="content-wrap">
                            <div class="contentEditable" align='center'>
                                  <p>
                                    CMX DISPATCH - We're ready for you. Please back into Dock Door {{$doorNumberDest}} with your doors open. Please come to the office with any questions.
                                    <br>
                                    Cheers,
                                    <br>
                                    <span style='color:#222222;'>Colorado Motor Express Dispatch</span>
                                  </p>
                                </div>
                        </td>
                    </tr>
                </table>
                <div class="footer">
                    <table width="100%">
                        <tr>
                            <td class="aligncenter content-block"><a>Unsubscribe</a> from these alerts.</td>
                        </tr>
                    </table>
                </div></div>
        </td>
        <td></td>
    </tr>
</table>

</body>
</html>

Solution

  • Files need to be saved as .blade.php to make use of the Blade Templating Engine {{ }}, {!! !!}, @..., etc etc.

    Rename

    resources/view/emails/arrivals/driverNotify.php
    

    To

    resources/view/emails/arrivals/driverNotify.blade.php