How to put placeholders for dynamic contents in html email?

Question

I have a fiddle (basically an html email) which I have replicated by following a particular design.

In the html email, there are some dynamic contents in which I want to put placeholder for time being as it will change for different customers.

The snippets of html code from the fiddle where I am using dynamic contents are:

<tr>
   <td>
      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="font-size:20px; padding-right: 23%;">
         <tr>
            <td style="padding-bottom: 3%;text-align:right;">type:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">availability check request</td>
         </tr>
         <tr>
            <td style="padding-bottom: 3%;text-align:right;">estimated total:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">$250.00</td>
         </tr>
         <tr>
            <td style="padding-bottom: 3%;text-align:right;">what</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">Radio</td>
         </tr>
         <tr>
            <td style="padding-bottom: 3%;text-align:right;">how many</td>
            <td style="padding-bottom: 3%;padding-left: 10%;">2</td>
         </tr>
         <tr>
            <td style="padding-bottom: 3%;text-align:right;">when:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;word-wrap: break-word;
               width: 300px;">March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
         </tr>
         <tr>
            <td style="padding-bottom: 3%;text-align:right;">who:</td>
            <td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">Mike</td>
         </tr>
      </table>
   </td>
</tr>

Problem Statement:

I am wondering how I can put a placeholder in the html code above where I am using dynamic contents such as $250.00, Radio, 2, March 28/18 @ 7:00pm to March 30/18 @ 7:00pm

Answer 1

One route you could take is to use a template engine. With this solution, you would replace each of the items that you want to replace with a common tag. In the example I included, this tag is just {{...}}.

Once you do this, you would provide your newly created template to the templating engine. The engine will then process your template by replacing each of the tags with the associated data.

/* It was a little hard to read with all of the inline CSS */

table {
  font-size: 20px;
  padding-right: 23%;
}

table tr td {
  padding-bottom: 3%;
}

table tr td:first-child {
  text-align: right;
}

table tr td:last-child {
  padding-left: 10%;
}

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td>type:</td>
    <td>{{type}}</td>
  </tr>
  <tr>
    <td>estimated total:</td>
    <td>${{total}}</td>
  </tr>
  <tr>
    <td>what</td>
    <td>{{what}}</td>
  </tr>
  <tr>
    <td>how many</td>
    <td>{{count}}</td>
  </tr>
  <tr>
    <td>when:</td>
    <td style="word-wrap: break-word;
               width: 300px;">{{date_from}} to {{date_to}}</td>
  </tr>
  <tr>
    <td>who:</td>
    <td style="color:#FF8D58;">{{name}}</td>
  </tr>
</table>

Then, if you were to provide the following data to the template...

let data = [
    {
        id: 123, // A "key" for the user to have a way to reference the data
        name: "Mike",
        type: "availability check request",
        total: 250.00,
        what: "Radio",
        count: 2,
        date_from: new Date(3-28-2018),
        date_to: new Date(3-30-2018)
    }
];

... the table similar to the one you provided would result after processing the template.

This is obviously very generalized and can't be applied to every scenario, but should answer your question. Feel free to update your post, or comment, with more information and I will try to update to match your example.

---

Edit:

In order to achieve the same with Laravel Blade, we will have to create a [FILE NAME].blade.php file. This will be the file that contains our template. Laravel has quite a bit of documentation relating to syntax on their Templates page. This should be a rough translation of the previous template.

<table cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td>type:</td>
    <td>{{ $type }}</td>
  </tr>
  <tr>
    <td>estimated total:</td>
    <td>${{ $total }}</td>
  </tr>
  <tr>
    <td>what</td>
    <td>{{ $what }}</td>
  </tr>
  <tr>
    <td>how many</td>
    <td>{{ $count }}</td>
  </tr>
  <tr>
    <td>when:</td>
    <td style="word-wrap: break-word;
               width: 300px;">{{ date("F j/s @ g:ia", $dateFrom) }} to {{ date("F j/s @ g:ia", $dateTo) }}</td>
  </tr>
  <tr>
    <td>who:</td>
    <td style="color:#FF8D58;">{{ $name }}</td>
  </tr>
</table>

The {{ date("F j/s @ g:ia", $date) }} function takes a given timestamp and formats it to the given format. The documentation can be found here, but simply:

• F: March 28/18 @ 7:00pm
• j: March 28/18 @ 7:00pm
• s: March 28/18 @ 7:00pm
• g: March 28/18 @ 7:00pm
• i: March 28/18 @ 7:00pm
• a: March 28/18 @ 7:00pm