订单确认通知中表格行关联配置问题（基于MJML）

Got it, let's fix this table row association issue you're having. The core problem here is that you're only rendering a single table row for your order transactions—you need to loop through each line item in your order data so each product's details are tied to its own row, and totals align correctly.

Key Issues in Your Current Code #

• You’re using a static single <tr> in the table body, so all transaction data will either overwrite each other or display incorrectly instead of mapping to individual rows.
• The ((Document.OrderDesc)) variable is tied to the overall order, not the specific line item—you should use the transaction-level description field instead.

Step-by-Step Fix #

1. Add a Loop for Transaction Rows
   Most email template engines (like the one you’re using with ((...)) syntax) support looping through collections of data. You’ll need to wrap your table row in a loop that iterates over each Transactions item in your order data. The exact syntax depends on your template system, but a common pattern looks like this (adjust if your engine uses different tags):

   {{#each Transactions}}
   <!-- Your table row goes here -->
   {{/each}}
   

2. Fix Line Item Variables
   Replace the order-level ((Document.OrderDesc)) with the transaction-level ((Transactions.OrderDesc)) (or whatever your system names the line item description field) to ensure each row shows the correct product details.

3. Verify Total Alignment
   If you need to display an order grand total later, use an order-level variable like ((Document.CuryOrderTotal)) (instead of summing line items manually) to ensure it matches the sum of all ((Transactions.CuryExtPrice)) values.

Modified MJML Code (Focus on Table Section) #

Here’s the updated table part of your MJML, with the loop and corrected variables highlighted:

<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: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: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: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: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:15px;color:#033047;text-align:left;background-color:#ededed">ITEM TOTAL</th>
                </tr>
              </thead>
              <tbody>
                <!-- Loop through each transaction line item -->
                {{#each Transactions}}
                <tr>
                  <td data-label="ITEM" valign="top" style="padding:5px; font-family: Arial,sans-serif; font-size: 12px; line-height:20px;">((Transactions.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>
                {{/each}}
              </tbody>
            </table>
          </td>
        </tr>
      </table>
    </mj-text>
    <mj-divider border-width="1px" border-style="solid" border-color="black" />
  </mj-column>
</mj-section>

Important Notes #

• Double-check your template engine’s exact loop syntax: If {{#each}} doesn’t work, it might use something like <% foreach (var tran in Transactions) { %> or {{loop Transactions}}—refer to your platform’s documentation for the right tags.
• Test with a multi-item order to confirm each row displays the correct product, quantity, and total, and that the grand total (if you add it later) matches the sum of line items.

内容的提问来源于stack exchange，提问作者Erin Peck