Merge pull request sendgrid#69 from sendgrid/dynamic-templates

adding dynamic templates
harvindar · May 11, 2018 · f4c80ac · f4c80ac
2 parents 762c303 + 316e958
commit f4c80ac
Show file tree

Hide file tree

Showing 14 changed files with 2,176 additions and 0 deletions.
diff --git a/dynamic-templates/README.md b/dynamic-templates/README.md
@@ -0,0 +1,29 @@
+Welcome to dynamic template examples! For more information about how to send with a dynamic template, check out [the documentation](https://sendgrid.com/docs/User_Guide/Transactional_Templates/Using_handlebars.html)
+
+## Using these examples
+
+Each folder contains one HTML file and one or more examples of JSON data. Paste the HTML and JSON data into your account for easy use. Use the HTML in the CODE section, and use the JSON in the TEST DATA section.
+
+## Basic Examples
+
+These examples make use of the basic helpers. Use these to get started with handlebars quickly.
+
+### Transactional request
+
+Use this example for transactional email - like password resets or account activations.
+
+### Different Languages
+
+Use this example if you want to have one email template that dynamically updates based on the language of the recipient. This template shows how you can have a single email with content in multiple languages.
+
+### Newsletter
+
+Use this example to create a newsletter. It automatically creates the correct formatting for each story you want to share.
+
+### Receipt
+
+This is an example receipt. It can automatically adjust based on the number of items bought. It also has a place for the customers delivery address.
+
+### Special Sale
+
+This is a sales email. It is best for advertising groups of items that are for sale rather than individual items.
diff --git a/dynamic-templates/different-languages/different_languages.html b/dynamic-templates/different-languages/different_languages.html
@@ -0,0 +1,342 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /><!--[if !mso]><!-->
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /><!--<![endif]-->
+    <!--[if (gte mso 9)|(IE)]>
+    <xml>
+    <o:OfficeDocumentSettings>
+    <o:AllowPNG/>
+    <o:PixelsPerInch>96</o:PixelsPerInch>
+    </o:OfficeDocumentSettings>
+    </xml>
+    <![endif]-->
+    <!--[if (gte mso 9)|(IE)]>
+    <style type="text/css">
+      body {width: 600px;margin: 0 auto;}
+      table {border-collapse: collapse;}
+      table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}
+      img {-ms-interpolation-mode: bicubic;}
+    </style>
+    <![endif]-->
+
+    <style type="text/css">
+      body, p, div {
+        font-family: arial;
+        font-size: 14px;
+      }
+      body {
+        color: #000000;
+      }
+      body a {
+        color: #1188E6;
+        text-decoration: none;
+      }
+      p { margin: 0; padding: 0; }
+      table.wrapper {
+        width:100% !important;
+        table-layout: fixed;
+        -webkit-font-smoothing: antialiased;
+        -webkit-text-size-adjust: 100%;
+        -moz-text-size-adjust: 100%;
+        -ms-text-size-adjust: 100%;
+      }
+      img.max-width {
+        max-width: 100% !important;
+      }
+      .column.of-2 {
+        width: 50%;
+      }
+      .column.of-3 {
+        width: 33.333%;
+      }
+      .column.of-4 {
+        width: 25%;
+      }
+      @media screen and (max-width:480px) {
+        .preheader .rightColumnContent,
+        .footer .rightColumnContent {
+            text-align: left !important;
+        }
+        .preheader .rightColumnContent div,
+        .preheader .rightColumnContent span,
+        .footer .rightColumnContent div,
+        .footer .rightColumnContent span {
+          text-align: left !important;
+        }
+        .preheader .rightColumnContent,
+        .preheader .leftColumnContent {
+          font-size: 80% !important;
+          padding: 5px 0;
+        }
+        table.wrapper-mobile {
+          width: 100% !important;
+          table-layout: fixed;
+        }
+        img.max-width {
+          height: auto !important;
+          max-width: 480px !important;
+        }
+        a.bulletproof-button {
+          display: block !important;
+          width: auto !important;
+          font-size: 80%;
+          padding-left: 0 !important;
+          padding-right: 0 !important;
+        }
+        .columns {
+          width: 100% !important;
+        }
+        .column {
+          display: block !important;
+          width: 100% !important;
+          padding-left: 0 !important;
+          padding-right: 0 !important;
+          margin-left: 0 !important;
+          margin-right: 0 !important;
+        }
+        .total_spacer {
+          padding:0px 0px 0px 0px;
+        }
+      }
+    </style>
+    <!--user entered Head Start-->
+
+     <!--End Head user entered-->
+  </head>
+  <body>
+    <center class="wrapper" data-link-color="#1188E6" data-body-style="font-size: 14px; font-family: arial; color: #000000; background-color: #ebebeb;">
+      <div class="webkit">
+        <table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#ebebeb">
+          <tr>
+            <td valign="top" bgcolor="#ebebeb" width="100%">
+              <table width="100%" role="content-container" class="outer" align="center" cellpadding="0" cellspacing="0" border="0">
+                <tr>
+                  <td width="100%">
+                    <table width="100%" cellpadding="0" cellspacing="0" border="0">
+                      <tr>
+                        <td>
+                          <!--[if mso]>
+                          <center>
+                          <table><tr><td width="600">
+                          <![endif]-->
+                          <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width:600px;" align="center">
+                            <tr>
+                              <td role="modules-container" style="padding: 0px 0px 0px 0px; color: #000000; text-align: left;" bgcolor="#ffffff" width="100%" align="left">
+
+    <table class="module preheader preheader-hide" role="module" data-type="preheader" border="0" cellpadding="0" cellspacing="0" width="100%"
+           style="display: none !important; mso-hide: all; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">
+      <tr>
+        <td role="module-content">
+          <p></p>
+        </td>
+      </tr>
+    </table>
+
+    <table class="wrapper" role="module" data-type="image" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
+      <tr>
+        <td style="font-size:6px;line-height:10px;padding:0px 0px 0px 0px;" valign="top" align="center">
+          <img class="max-width" border="0" style="display:block;color:#000000;text-decoration:none;font-family:Helvetica, arial, sans-serif;font-size:16px;max-width:100% !important;width:100%;height:auto !important;" src="https://marketing-image-production.s3.amazonaws.com/uploads/b09553df6918fe296ecfc240db655a184ff3a1317ee2d54e13d532e60177715894449dc25615184d98cf1c480c7935c7953cf6eeef5742bfdb6a66aecb5eabee.png" alt="" width="600">
+        </td>
+      </tr>
+    </table>
+
+{{#if english}}
+    <table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
+      <tr>
+        <td style="padding:30px 45px 30px 45px;line-height:22px;text-align:inherit;"
+            height="100%"
+            valign="top"
+            bgcolor="">
+            <div style="text-align: center;"><span style="color:#333333;">
+              <p>This content can be presented in multiple languages. This current example is in English language.</p>
+              <p>&nbsp;</p>
+              <p>How much wood could a woodchuck chuck</p>
+              <p>If a woodchuck could chuck wood?</p>
+              <p>As much wood as a woodchuck could chuck,</p>
+              <p>If a woodchuck could chuck wood.</p>
+              </span></div>
+        </td>
+      </tr>
+    </table>
+{{else if spanish}}    
+    <table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
+      <tr>
+        <td style="padding:30px 45px 30px 45px;line-height:22px;text-align:inherit;"
+            height="100%"
+            valign="top"
+            bgcolor="">
+            <div style="text-align: center;"><span style="color:#333333;">
+              <p>Este contenido puede presentarse en varios idiomas. Este ejemplo actual está en lenguaje Spanish.</p>
+              <p>&nbsp;</p>
+              <p>¿Cuánta madera podría hacer una marmota</p>
+              <p>Si una marmota podría tirar madera?</p>
+              <p>Tanta madera como una marmota podría arrojar,</p>
+              <p>Si una marmota pudiera tirar madera.</p>
+              </span></div>
+        </td>
+      </tr>
+    </table>
+{{else if french}}
+    <table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
+      <tr>
+        <td style="padding:30px 45px 30px 45px;line-height:22px;text-align:inherit;"
+            height="100%"
+            valign="top"
+            bgcolor="">
+            <div style="text-align: center;"><span style="color:#333333;">
+              <p>Ce contenu peut être présenté dans plusieurs langues. Cet exemple actuel est en langage French.</p>
+              <p>&nbsp;</p>
+              <p>Quelle quantité de bois peut avoir un mandrin de marmotte</p>
+              <p>Si une marmotte pouvait jeter du bois?</p>
+              <p>Autant de bois qu'une marmotte pourrait jeter,</p>
+              <p>Si une marmotte pouvait jeter du bois.</p>
+              </span></div>
+        </td>
+      </tr>
+    </table>
+{{/if}}
+
+    <table class="module"
+           role="module"
+           data-type="divider"
+           border="0"
+           cellpadding="0"
+           cellspacing="0"
+           width="100%"
+           style="table-layout: fixed;">
+      <tr>
+        <td style="padding:0px 0px 0px 0px;"
+            role="module-content"
+            height="100%"
+            valign="top"
+            bgcolor="">
+          <table border="0"
+                 cellpadding="0"
+                 cellspacing="0"
+                 align="center"
+                 width="100%"
+                 height="5px"
+                 style="line-height:5px; font-size:5px;">
+            <tr>
+              <td
+                style="padding: 0px 0px 5px 0px;"
+                bgcolor="#ebebeb"></td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+
+
+    <table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
+      <tr>
+        <td style="padding:30px 20px 0px 20px;line-height:22px;text-align:inherit;background-color:#F5F5F5;"
+            height="100%"
+            valign="top"
+            bgcolor="#F5F5F5">
+            <div style="text-align: center;"><span style="color:#7a7a7a;"><span style="font-size:11px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt elementum sem.</span></span></div>
+        </td>
+      </tr>
+    </table>
+
+    <table class="module" role="module" data-type="social" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
+      <tbody>
+        <tr>
+          <td valign="top" style="padding:10px 0px 30px 0px;font-size:6px;line-height:10px;background-color:#F5F5F5;">
+            <table align="center">
+              <tbody>
+                <tr>
+                  <td style="padding: 0px 5px;">
+        <a role="social-icon-link"  href="facebook.com" target="_blank" alt="Facebook"
+          data-nolink="false"
+          title="Facebook "
+          style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:inline-block;background-color:#3B579D;">
+          <img role="social-icon" alt="Facebook" title="Facebook "
+            height="30"
+            width="30"
+            style="height: 30px, width: 30px"
+            src="https://marketing-image-production.s3.amazonaws.com/social/white/facebook.png" />
+        </a>
+      </td>
+                  <td style="padding: 0px 5px;">
+        <a role="social-icon-link"  href="twitter.com" target="_blank" alt="Twitter"
+          data-nolink="false"
+          title="Twitter "
+          style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:inline-block;background-color:#7AC4F7;">
+          <img role="social-icon" alt="Twitter" title="Twitter "
+            height="30"
+            width="30"
+            style="height: 30px, width: 30px"
+            src="https://marketing-image-production.s3.amazonaws.com/social/white/twitter.png" />
+        </a>
+      </td>
+                  <td style="padding: 0px 5px;">
+        <a role="social-icon-link"  href="instagram.com" target="_blank" alt="Instagram"
+          data-nolink="false"
+          title="Instagram "
+          style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:inline-block;background-color:#7F4B30;">
+          <img role="social-icon" alt="Instagram" title="Instagram "
+            height="30"
+            width="30"
+            style="height: 30px, width: 30px"
+            src="https://marketing-image-production.s3.amazonaws.com/social/white/instagram.png" />
+        </a>
+      </td>
+                  <td style="padding: 0px 5px;">
+        <a role="social-icon-link"  href="google.com" target="_blank" alt="Google"
+          data-nolink="false"
+          title="Google "
+          style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:inline-block;background-color:#D44132;">
+          <img role="social-icon" alt="Google" title="Google "
+            height="30"
+            width="30"
+            style="height: 30px, width: 30px"
+            src="https://marketing-image-production.s3.amazonaws.com/social/white/google-plus.png" />
+        </a>
+      </td>
+                  <td style="padding: 0px 5px;">
+        <a role="social-icon-link"  href="pinterest.com" target="_blank" alt="Pinterest"
+          data-nolink="false"
+          title="Pinterest "
+          style="-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:inline-block;background-color:#CB2027;">
+          <img role="social-icon" alt="Pinterest" title="Pinterest "
+            height="30"
+            width="30"
+            style="height: 30px, width: 30px"
+            src="https://marketing-image-production.s3.amazonaws.com/social/white/pinterest.png" />
+        </a>
+      </td>
+
+                </tr>
+              </tbody>
+            </table>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+  <div data-role="module-unsubscribe" class="module unsubscribe-css__unsubscribe___2CDlR" role="module" data-type="unsubscribe" style="background-color:#ebebeb;color:#7a7a7a;font-size:11px;line-height:20px;padding:30px 0px 30px 0px;text-align:center"><div class="Unsubscribe--addressLine"><p class="Unsubscribe--senderName" style="font-family:;font-size:11px;line-height:20px">[Sender_Name]</p><p style="font-family:;font-size:11px;line-height:20px"><span class="Unsubscribe--senderAddress">[Sender_Address]</span>, <span class="Unsubscribe--senderCity">[Sender_City]</span>, <span class="Unsubscribe--senderState">[Sender_State]</span> <span class="Unsubscribe--senderZip">[Sender_Zip]</span> </p></div><p style="font-family:;font-size:11px;line-height:20px"><a class="Unsubscribe--unsubscribeLink" href="<%asm_global_unsubscribe_raw_url%>" style="color:#2277ee">Unsubscribe</a> - <a class="Unsubscribe--unsubscribePreferences" href="[Unsubscribe_Preferences]" style="color:#2277ee">Unsubscribe Preferences</a></p></div>
+
+
+                              </td>
+                            </tr>
+                          </table>
+                          <!--[if mso]>
+                          </td></tr></table>
+                          </center>
+                          <![endif]-->
+                        </td>
+                      </tr>
+                    </table>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+      </div>
+    </center>
+  </body>
+</html>
diff --git a/dynamic-templates/different-languages/different_languages_data_english.json b/dynamic-templates/different-languages/different_languages_data_english.json
@@ -0,0 +1,3 @@
+{
+	"english":true
+}
diff --git a/dynamic-templates/different-languages/different_languages_data_french.json b/dynamic-templates/different-languages/different_languages_data_french.json
@@ -0,0 +1,3 @@
+{
+	"french":true
+}
diff --git a/dynamic-templates/different-languages/different_languages_data_spanish.json b/dynamic-templates/different-languages/different_languages_data_spanish.json
@@ -0,0 +1,3 @@
+{
+	"spanish":true
+}