javascript - 如何在 Kentico 中为电子邮件模板每三个表格单元格包装一行？

Question

如何使用 Kentico 电子邮件模板包装每 3<td>次<tr>？

我在 jQuery 中编写了以下代码，但不知道如何在 Kentico 中编写此循环逻辑。

var td = $("#myTable tr td");           // Getting all td
td.each(function(i) {                   // Looping the td
  if (i % 3 == 0) {                     // Splitting td as multiple of 3
    td.slice(i, i + 3).wrapAll('<tr/>') // Wrapping it inside tr
  }
}).parent('tr').unwrap();

我想要使​​用 Kentico 的相同逻辑。

标签： javascriptkenticoemail-templates

Answer 1

您是否尝试将 JS 替换为可用于电子邮件模板或电子邮件小部件的 Kentico 宏？

如果是这样，并且您拥有 Kentico 11+，那么您可以转到电子邮件营销应用程序 > 电子邮件小部件并打开“最新文章”示例小部件并查看逻辑是如何工作的。

这是示例小部件的 HTML/宏

{% /*
The Latest articles email widget dynamically obtains four latest articles from the Dancing Goat demo site at the time when the email issue is generated.
It achieves so by using macros that access pages with the given attributes.
*/ @%}

{% 
  articles = Documents["/Articles"]
               .CultureVersions["en-US"]
               .Children
                 .ClassNames("dancinggoat.article")
                 .OrderBy("DocumentPublishFrom DESC")
                 .TopN(4)
                 .WithAllData; 
return; 
#%}

<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
<td align="center" valign="top" width="500">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:500px;">

{%
  i = 0;
  isFirstItemInRow = false;
  foreach (article in articles) { 
%}

{% 
    isFirstItemInRow = (Modulo(i, 2) == 0);
    articleUrl = UTMContent == String.Empty ? article.RelativeURL : article.RelativeURL + "?utm_content=" + UTMContent;
    articleTeaserUrl = GetAttachmentUrlByGUID(article.ArticleTeaser, "teaser", "teaser");
    articleLinkText = LinkText == String.Empty ? "Continue reading" : LinkText;
    return; 
%}

{%  if (isFirstItemInRow)  { %}
  <tr>
    <td align="center" valign="top" style="font-size:0; padding: 10px 0 15px 0" class="padding">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="500">
<tr>
<![endif]-->
{% } /* END if */ #%}

<!--[if (gte mso 9)|(IE)]>
<td align="left" valign="top" width="240">
<![endif]-->
      <div style="display:inline-block; margin: 0 -2px; max-width:50%; min-width:240px; vertical-align:top; width:100%;" class="wrapper">
        <table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="{% isFirstItemInRow ? "max-width:240px;" : "max-width:240px; float:right;" %}" class="wrapper">
          <tr>
            <td align="center" valign="top">
              <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <td style="padding: 20px 0 30px 0;">
                    <table cellpadding="0" cellspacing="0" border="0" width="100%">
                      <tr>
                        <td align="center" valign="middle"><a href="{% articleUrl #%}" target="_blank"><img src="{% articleTeaserUrl #%}" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Fluid images" border="0" class="img-max"></a></td>
                      </tr>
                      <tr>
                        <td align="center" style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #333333; font-size: 20px;">{% article.ArticleTitle #%}</td>
                      </tr>
                      <tr>
                        <td align="center" style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;">{% article.ArticleSummary #%}</td>
                      </tr>
                      <tr>
                        <td align="center" style="padding: 5px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 14px; line-height: 20px;"><a href="{% articleUrl #%}" target="_blank" style="color: #256F9C; text-decoration: none;">{% articleLinkText #%} &rarr;</a></td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>

            </td>
          </tr>
        </table>
      </div>
<!--[if (gte mso 9)|(IE)]>
</td>
<![endif]-->

{%  if (isFirstItemInRow)  { %}
<!--[if (gte mso 9)|(IE)]>
<td width="20" style="font-size: 1px;">&nbsp;</td>
<![endif]-->
{% } /* END if */ #%}      


{%  if (!isFirstItemInRow)  { %}
<!--[if (gte mso 9)|(IE)]>
</tr>
</table>
<![endif]-->                                    
</td>
</tr>
{% } /* END if */ #%} 

{% i++; return; %} 
{% } /* END foreach */ #%} 

</table>