Expand my Community achievements bar.

SOLVED

Replacing document.write() in content blocks

Avatar

Level 1

At our company, some mailings use content blocks with document.write calls to personalize salutations, like

 

 

<% if( context.profile.salutation != "" && context.profile.lastName != "") { %>
<span>Hi </span><% document.write(context.profile.firstName);
%> <% document.write(context.profile.lastName);
%><span>,</span>
<%} else if (context.profile.firstName != "") {%>
<span>Hi </span><%
document.write(context.profile.firstName);
%><span>,</span>
<%} else {%>
<span>Hallo,</span>
<%}%>

 

 

The big benefit of these content blocks is that not only do they seem to work fine across Campaign mailings, Campaign landing pages and AEM newsletters in  Campaign, they're also fairly easy to use for staff that isn't all that tech savvy and would presumably throw hissy fits if they had to work with dynamic content in Campaign Standard.

However, given that the use of document.write() is widely discouraged, I'm trying to figure out a viable alternative for doing this personalization via content blocks. Unfortunately, beyond an idea using innerhtml that didn't pan out, I haven't been able to come up with anything.

Would anyone here happen to have any ideas/recommendations?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@TP_AV , It's not necesssary to use document.write() to print the personalization values. Rather you can call the personalization context variable in the content block and use that in the template to display. Sharing an example here.

<% 

  var total = 0;

  for (var i = 0; i < context.rtEvent.ctx.products.length; i++) { 

%>

 

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<tbody class="mcnCaptionBlockOuter">

<tr>

<td class="mcnCaptionBlockInner" valign="top" style="padding: 9px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<table border="0" cellpadding="0" cellspacing="0" class="mcnCaptionRightContentOuter" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<tbody>

<tr>

<td valign="top" class="mcnCaptionRightContentInner" style="padding: 0 9px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionRightImageContentContainer" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<tbody>

<tr>

<td class="mcnCaptionRightImageContent" valign="top" style="mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><img alt="<%= context.rtEvent.ctx.products[i].name %>" src="<%= context.rtEvent.ctx.products[i].image %>" width="169" style="max-width: 169px; border: 0; height: auto; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; vertical-align: bottom;" class="mcnImage" /></td>

</tr>

</tbody>

</table>

<table class="mcnCaptionRightTextContentContainer" align="right" border="0" cellpadding="0" cellspacing="0" width="264" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<tbody>

<tr>

<td valign="top" class="mcnTextContent" style="text-align: center; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; word-break: break-word; color: #202020; font-family: Helvetica; font-size: 16px; line-height: 150%;">

<div style="text-align: center;"><%= context.rtEvent.ctx.products[i].name %><br /> <br /> $<%= context.rtEvent.ctx.products[i].price %><br /> <br /> <em><%= context.rtEvent.ctx.products[i].description %></em></div>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

 

<% 

  total += parseFloat(context.rtEvent.ctx.products[i].price);

  }

%>

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock" style="min-width: 100%; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<tbody class="mcnTextBlockOuter">

<tr>

<td valign="top" class="mcnTextBlockInner" style="padding-top: 9px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><!--[if mso]>

<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">

<tr>

<![endif]--> <!--[if mso]>

<td valign="top" width="600" style="width:600px;">

<![endif]-->

<table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 100%; min-width: 100%; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" width="100%" class="mcnTextContentContainer">

<tbody>

<tr>

<td valign="top" class="mcnTextContent" style="padding-top: 0; padding-right: 18px; padding-bottom: 9px; padding-left: 18px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; word-break: break-word; color: #202020; font-family: Helvetica; font-size: 16px; line-height: 150%; text-align: left;">

<div style="text-align: right;"><strong>TOTAL: $<%= total %></strong></div>

</td>

</tr>

</tbody>

</table>

<!--[if mso]>

</td>

<![endif]--> <!--[if mso]>

</tr>

</table>

<![endif]--></td>

</tr>

</tbody>

</table>

Thanks, Sathees

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

@TP_AV , It's not necesssary to use document.write() to print the personalization values. Rather you can call the personalization context variable in the content block and use that in the template to display. Sharing an example here.

<% 

  var total = 0;

  for (var i = 0; i < context.rtEvent.ctx.products.length; i++) { 

%>

 

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<tbody class="mcnCaptionBlockOuter">

<tr>

<td class="mcnCaptionBlockInner" valign="top" style="padding: 9px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<table border="0" cellpadding="0" cellspacing="0" class="mcnCaptionRightContentOuter" width="100%" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<tbody>

<tr>

<td valign="top" class="mcnCaptionRightContentInner" style="padding: 0 9px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionRightImageContentContainer" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<tbody>

<tr>

<td class="mcnCaptionRightImageContent" valign="top" style="mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><img alt="<%= context.rtEvent.ctx.products[i].name %>" src="<%= context.rtEvent.ctx.products[i].image %>" width="169" style="max-width: 169px; border: 0; height: auto; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; vertical-align: bottom;" class="mcnImage" /></td>

</tr>

</tbody>

</table>

<table class="mcnCaptionRightTextContentContainer" align="right" border="0" cellpadding="0" cellspacing="0" width="264" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<tbody>

<tr>

<td valign="top" class="mcnTextContent" style="text-align: center; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; word-break: break-word; color: #202020; font-family: Helvetica; font-size: 16px; line-height: 150%;">

<div style="text-align: center;"><%= context.rtEvent.ctx.products[i].name %><br /> <br /> $<%= context.rtEvent.ctx.products[i].price %><br /> <br /> <em><%= context.rtEvent.ctx.products[i].description %></em></div>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</tbody>

</table>

 

<% 

  total += parseFloat(context.rtEvent.ctx.products[i].price);

  }

%>

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnTextBlock" style="min-width: 100%; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">

<tbody class="mcnTextBlockOuter">

<tr>

<td valign="top" class="mcnTextBlockInner" style="padding-top: 9px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"><!--[if mso]>

<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">

<tr>

<![endif]--> <!--[if mso]>

<td valign="top" width="600" style="width:600px;">

<![endif]-->

<table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width: 100%; min-width: 100%; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;" width="100%" class="mcnTextContentContainer">

<tbody>

<tr>

<td valign="top" class="mcnTextContent" style="padding-top: 0; padding-right: 18px; padding-bottom: 9px; padding-left: 18px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; word-break: break-word; color: #202020; font-family: Helvetica; font-size: 16px; line-height: 150%; text-align: left;">

<div style="text-align: right;"><strong>TOTAL: $<%= total %></strong></div>

</td>

</tr>

</tbody>

</table>

<!--[if mso]>

</td>

<![endif]--> <!--[if mso]>

</tr>

</table>

<![endif]--></td>

</tr>

</tbody>

</table>

Thanks, Sathees

Avatar

Level 1

So basically just replace all instances of

<% document.write(context.whatever.variable); %>

with

<%= context.whatever.variable %>

 

EDIT: After more extensive testing, seems to work perfectly for a block shared across Campaign mailings, Campaign landing pages and AEM newsletters.