Replacing document.write() in content blocks

[TP_AV]

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?

[SatheeskannaK · Accepted solution]

@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>

[TP_AV]

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.