Я пытаюсь настроить пользовательские уведомления для подтверждений заказов и пытаюсь найти в документации, как убедиться, что каждая строка в строке таблицы данных связана с этой строкой.Что это за поля данных строки заказа по сравнению с обычными полями данных заказа на продажу?
Я использую MJML для создания более стилизованных уведомлений, обращенных к клиенту.
Я просмотрел документацию, Google и сообщения в блогах.
<mjml>
<mj-head>
<mj-style>
@media all and (max-width: 599px) {
.container600 {
width: 100% !important;
}
.smarttable {
border: 0;
}
.smarttable thead {
display:none;
border: none;
clip: rect(0 0 0 0);
height: 0px;
margin: 0px;
overflow: hidden;
padding: 0;
max-width:0px;
max-height:0px;
}
.smarttable tr {
display: block;
width:90%;
margin:20px auto;
}
.smarttable td {
border-bottom: 1px solid #000;
display: block;
font-size: 14px;
text-align: right;
}
.smarttable td:before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
}
</mj-style>
<mj-attributes>
<mj-text align="left" font-family="sans-serif" color="#000" font-size="14px" line-height="23px" />
<mj-section background-color="#fff" padding="0px" />
</mj-attributes>
</mj-head>
<mj-body background-color="#ededed">
<mj-section>
<mj-column>
<mj-image width="300px" align="center" src="http://go.pardot.com/l/45492/2019-04-05/72zfh7/45492/214936/splitheader_01.jpg" />
</mj-column>
<mj-column>
<mj-image width="300px" align="center" src="http://go.pardot.com/l/45492/2019-04-05/72zfh9/45492/214938/splitheader_02.jpg" />
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-text>
John Smith,<br></br>
Your order <a href="google.com" target="_blank" style="color:#429df1">#((Document.OrderNbr))</a> contains one or more backordered items. Most backorders are filled and shipped out within five business days. We apologize for the inconvenience.
</mj-text>
</mj-column>
</mj-section>
<mj-section> <mj-column>
<mj-button font-family="Helvetica" background-color="#f45e43" color="white" align="left" padding="0px 25px" href="">
VIEW ORDER DETAILS
</mj-button>
</mj-column>
</mj-section>
<mj-section><mj-column>
<mj-spacer height="15px" />
</mj-column>
</mj-section>
<mj-section> <mj-column>
<mj-text><h1 style="color:#fff;font-size:18px;background-color:#033047; padding:5px">BACKORDER NOTIFICATION</h1></mj-text>
</mj-column></mj-section>
<!-- First column -->
<mj-section> <mj-column>
<mj-text><h2 style="color:#033047;font-size:16px;">ORDER DETAILS</h2></mj-text>
<mj-text>Customer #: ((Document.CustomerOrderNbr))<br>
Order #: <a href="google.com" target="_blank" style="color:#429df1">((Document.OrderNbr))</a><br>
Purchase Order #: ((Document.InvoiceNbr))<br>
Order Date: ((Document.OrderDate))</br>
Shipping Method: ((Document.ShipVia.CarrierID))<br>
Estimated Shipping Date: ((Document.ShipDate))</br>
</mj-text></mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-divider border-width="1px" border-style="solid" border-color="black" />
<mj-text>
<table width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tr>
<td style="padding:5px;">
<table class="smarttable" width="100%" cellpadding="0" cellspacing="0" style="min-width:100%;"><thead>
<tr><th scope="col" style="padding:5px; font-family: Arial,sans-serif; font-size: 14px; line-height:10px;line-height:15px;color:#033047;text-align:left;background-color:#ededed">ITEM</th>
<th scope="col" style="padding:5px; font-family: Arial,sans-serif; font-size: 14px; line-height:10px;line-height:15px;color:#033047;text-align:left;background-color:#ededed">SKU</th>
<th scope="col" style="padding:5px; font-family: Arial,sans-serif; font-size: 14px; line-height:10px;line-height:15px;color:#033047;text-align:left;background-color:#ededed">QTY</th>
<th scope="col" style="padding:5px; font-family: Arial,sans-serif; font-size: 14px; line-height:10px;line-height:15px;color:#033047;text-align:left;background-color:#ededed">PRICE EACH</th>
<th scope="col" style="padding:5px; font-family: Arial,sans-serif; font-size: 14px; line-height:10px;line-height:15px;color:#033047;text-align:left;background-color:#ededed">ITEM TOTAL</th>
</tr>
</thead>
<tbody>
<tr><td data-label="ITEM" valign="top" style="padding:5px; font-family: Arial,sans-serif; font-size: 12px; line-height:20px;">((Document.OrderDesc))</td>
<td data-label="SKU" valign="top" style="padding:5px; font-family: Arial,sans-serif; font-size: 12px; line-height:20px;">((Transactions.InventoryID.InventoryCD))</td>
<td data-label="QTY" valign="top" style="padding:5px; font-family: Arial,sans-serif; font-size: 12px; line-height:20px;">((Transactions.OrderQty))</td>
<td data-label="PRICE EACH" valign="top" style="padding:5px; font-family: Arial,sans-serif; font-size: 12px; line-height:20px;">((Transactions.CuryUnitPrice))</td>
<td data-label="ITEM TOTAL" valign="top" style="padding:5px; font-family: Arial,sans-serif; font-size: 12px; line-height:20px;">((Transactions.CuryExtPrice))</td>
</tr></tbody></table></td></tr></table>
</mj-text>
<mj-divider border-width="1px" border-style="solid" border-color="black" />
</mj-column>
</mj-section>
<mj-section>
<mj-column>
<mj-text>
<h3 style="color:#033047;font-size:20px; padding-top:25px">SUPPORT & ASSISTANCE</h3></mj-text>
<mj-text>Feel free to contact us if you need further asisstance.<br></br>
Phone: 1-888-637-3898<br>
Email: <a href="mailto:info@graphicproducts.com" target="_blank" style="color:#429df1">info@graphicproducts.com</a></br>
Website: <a href="GraphicProducts.com" target="_blank" style="color:#429df1">GraphicProducts.com</a><br></br>
</mj-text>
</mj-column></mj-section>
<mj-text align="center"><br>Copyright © 2019, All rights reserved.<br>
Graphic Products, Inc., 9825 SW Sunshine Ct. Beaverton, OR 97005, United States
<br>
View our <a href="https://www.graphicproducts.com/privacy/" target="_blank" style="color:#000">privacy policy</a>
</mj-text>
</mj-body>
</mjml>
Мне просто нужно убедиться, что строки связаны, когда это применимо, и элемент, имеющий описание рядом с ним, а затем общее значение, относится к общему итогу таблицы.