Как обернуть каждую третью ячейку таблицы строкой в ​​Kentico для шаблона электронной почты? - PullRequest
Новая
       63

Как обернуть каждую третью ячейку таблицы строкой в ​​Kentico для шаблона электронной почты?

1 голос
/ 28 мая 2019

Как я могу обернуть каждую третью <td> <tr>, используя шаблон электронной почты Kentico?

Я написал следующий код в 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.

1 Ответ

0 голосов
/ 28 мая 2019

Вы пытаетесь заменить JS на Kentico Macro, который можно использовать в шаблоне электронной почты или виджете электронной почты?

Если это так, и у вас есть Kentico 11+, то вы можете перейти в приложение Email-маркетинга> Электронная почтавиджетов и откройте образец виджета «Последняя статья» и посмотрите, как работает логика.

Вот 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>
...