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

Как я могу заключить каждое 3-е <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();

Мне нужна такая же логика с Кентико.


person Nelson    schedule 28.05.2019    source источник
comment
Вы хотите использовать код jQuery в теле письма? Не рекомендуется использовать Javascript в своих электронных письмах. Пожалуйста, обратитесь к разделу Отправка html-сообщения со сценариями JQuery или Поддерживается ли JavaScript в сообщении электронной почты? вопросов. Или не могли бы вы прояснить свой вопрос? Поскольку не имеет смысла, что у вас есть и чего вы хотите достичь.   -  person Dmitry Bastron    schedule 28.05.2019
comment
Я не хочу использовать jQuery. Я только что добавил, что хочу такую ​​же логику jQuery в синтаксисе Kentico.   -  person Nelson    schedule 29.05.2019


Ответы (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>
person Rui    schedule 28.05.2019
comment
Пакет благодарностей Руи, не могли бы вы поделиться точным URL-адресом виджета Sample? поскольку я не могу найти это - person Nelson; 29.05.2019
comment
У него нет URL-адреса, он виртуально находится в приложении Email Marketing ›Виджеты электронной почты. Если у вас нет образца сайта, я вставлю приведенный ниже код. - person Rui; 30.05.2019