Criar template de e-mail

<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<style type="text/css">body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin: 0; color: #333; background: #fff; }
  .container { max-width: 210mm; min-height: 297mm; margin: 10mm auto; padding: 20px; border: 1px solid #ddd; background: #fff; box-sizing: border-box; }
  /* ← linha do cabeçalho agora laranja (mesma cor das seções) */
  .header { text-align: center; border-bottom: 3px solid #e67e22; padding-bottom: 10px; margin-bottom: 20px; }
  .header img { max-height: 50px; }
  .info-grid { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 15px; }
  .info-grid p { margin: 0; flex: 1 1 45%; }
  h2 { color: #0056b3; border-bottom: 2px solid #e67e22; padding-bottom: 5px; margin: 25px 0 10px 0; }
  h2 span { color: #e67e22; }
  table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
  th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
  th { background: #f2f2f2; color: #0056b3; width: 30%; }
  .status { font-weight: bold; color: #c00; }
  @media print {
    @page { size: A4; margin: 10mm; }
    body, .container { margin: 0; padding: 0; border: none; }
    h2 { page-break-before: avoid; }
    a:after { content: none !important; }
    a { color: inherit !important; text-decoration: none !important; }
    a[href=""], a[href="#"], a[href^="javascript:"] { pointer-events: none; }
  }
</style>
<div class="container">
  <!-- LOGO -->
  <div class="header">
    <img src="https://d35c20njphnpo7.cloudfront.net/Custom/content/themes/Base/Imagens/logo-linxcommerce_3.png?nocache">
  </div>
  <!-- DADOS DO PEDIDO -->

  <div class="info-grid">
    <p><strong>Pedido:</strong> {{Order.OrderNumber}}</p>

    <p><strong>Data do pedido:</strong> {{Order.CreatedDate}}</p>

    <p><strong>Situação:</strong> <span class="status">{{Order.Status}}</span></p>

    <p><strong>Canal:</strong> {{Order.WebSiteName}}</p>

    <p><strong>Valor Total:</strong> R$ {{Order.Total}}</p>
  </div>

  <hr><!-- CLIENTE -->
  <h2><span>Cliente</span></h2>

  <div class="info-grid">
    {{#if Customer.TradingName}}
    <p><strong>Razão Social:</strong> {{Customer.TradingName}}</p>
    {{/if}}{{#if (or Customer.Name Customer.Surname)}}

    <p><strong>Nome:</strong> {{Customer.Name}} {{#if Customer.Surname}}{{Customer.Surname}}{{/if}}</p>
    {{/if}}{{#if (or Customer.Cnpj Customer.Cpf)}}

    <p><strong>Documento:</strong> {{#if Customer.Cnpj}}{{Customer.Cnpj}}{{else}}{{Customer.Cpf}}{{/if}}</p>
    {{/if}}{{#if Customer.Email}}

    <p><strong>E-mail:</strong> {{Customer.Email}}</p>
    {{/if}}{{#if Customer.Contact.Phone}}

    <p><strong>Telefone:</strong> {{Customer.Contact.Phone}}</p>
    {{/if}}{{#if Customer.Contact.CellPhone}}

    <p><strong>Celular:</strong> {{Customer.Contact.CellPhone}}</p>
    {{/if}}
  </div>

  <hr><!-- PRODUTOS -->
  <h2><span>Produtos</span></h2>
  {% include Emails/inc/order %}

  <hr><!-- TOTAIS -->
  <h2><span>Totais do Pedido</span></h2>

  <table>
    <tbody>
      <tr>
        <th><span style="color:#000000;">Subtotal</span></th>
        <td><span style="color:#000000;">R$ </span>{{Order.SubTotal}}</td>
      </tr>
      <tr>
        <th><span style="color:#000000;">Desconto</span></th>
        <td><span style="color:#000000;">R$ </span>{{Order.DiscountAmount}}</td>
      </tr>
      <tr>
        <th><span style="color:#000000;">Valor da Entrega</span></th>
        <td><span style="color:#000000;">R$ </span>{{Order.DeliveryAmount}}</td>
      </tr>
      <tr>
        <th><span style="color:#000000;"><strong>Total</strong></span></th>
        <td><strong>R$ {{Order.Total}}</strong></td>
      </tr>
    </tbody>
  </table>

  <hr><!-- PAGAMENTO -->
  <h2><span>Resumo do Pagamento</span></h2>

  <table>{{#if Order.PaymentMethods.[0]}}
    <tbody>
      <tr>
        <th><span style="color:#000000;">Meio de pagamento</span></th>
        <td>{{Order.PaymentMethods.[0].Description}}({{Order.PaymentMethods.[0].Alias}}) {{#if (gt Order.PaymentMethods.[0].Installments 1)}}<br>
        <small>{{Order.PaymentMethods.[0].Installments}}x de R$ {{Order.PaymentMethods.[0].InstallmentAmount}}</small>{{/if}}</td>
      </tr>
    </tbody>
    {{/if}}
  </table>

  <hr><!-- DADOS DE ENTREGA -->
  <h2><span>Dados de Entrega</span></h2>

  <div class="info-grid">
    {{#if Order.DeliveryAddress.Name}}
    <p><strong>Nome Endereço:</strong> {{Order.DeliveryAddress.Name}}</p>
    {{/if}}{{#if Order.DeliveryAddress.PostalCode}}

    <p><strong>CEP:</strong> {{Order.DeliveryAddress.PostalCode}}</p>
    {{/if}}{{#if Order.DeliveryAddress.AddressLine}}

    <p><strong>Endereço:</strong> {{Order.DeliveryAddress.AddressLine}}</p>
    {{/if}}{{#if Order.DeliveryAddress.Number}}

    <p><strong>Número:</strong> {{Order.DeliveryAddress.Number}}</p>
    {{/if}}{{#if Order.DeliveryAddress.AddressNotes}}

    <p><strong>Complemento:</strong> {{Order.DeliveryAddress.AddressNotes}}</p>
    {{/if}}{{#if Order.DeliveryAddress.Neighbourhood}}

    <p><strong>Bairro:</strong> {{Order.DeliveryAddress.Neighbourhood}}</p>
    {{/if}}{{#if Order.DeliveryAddress.City}}

    <p><strong>Cidade:</strong> {{Order.DeliveryAddress.City}}</p>
    {{/if}}{{#if Order.DeliveryAddress.State}}

    <p><strong>Estado:</strong> {{Order.DeliveryAddress.State}}</p>
    {{/if}}{{#if Order.DeliveryAddress.Landmark}}

    <p><strong>Ponto de referência:</strong> {{Order.DeliveryAddress.Landmark}}</p>
    {{/if}}{{#if Order.DeliveryAddress.ContactName}}

    <p><strong>Recebedor (a):</strong> {{Order.DeliveryAddress.ContactName}}</p>
    {{/if}}
  </div>

  <hr><!-- ENVIO -->
  <h2><span>Envio</span></h2>

  <table>{{#if Order.DeliveryMethods.[0]}}
    <tbody>
      <tr>
        <th><span style="color:#000000;">Método de entrega</span></th>
        <td>{{Order.DeliveryMethods.[0].MethodName}}</td>
      </tr>
      {{#if Order.DeliveryMethods.[0].EstimatedUnit}}
      <tr>
        <th><span style="color:#000000;">Prazo estimado</span></th>
        <td>{{Order.DeliveryMethods.[0].EstimatedUnit}}</td>
      </tr>
      {{/if}}
    </tbody>
    {{/if}}
  </table>

  <hr><!-- REPRESENTANTE -->{{#if Order.SalesRepresentative.Name}}
  <h2><span>Representante de Vendas</span></h2>

  <div class="info-grid">
    <p><strong>Nome:</strong> {{Order.SalesRepresentative.Name}}</p>
    {{#if Order.SalesRepresentative.Email}}

    <p><strong>E-mail:</strong> {{Order.SalesRepresentative.Email}}</p>
    {{/if}}
  </div>

  <hr>{{/if}}
</div>