Expand my Community achievements bar.

Announcing the launch of new sub-community for Campaign Web UI to cater specifically to the needs of Campaign Web UI users!
SOLVED

Personlisation within Javascript

Avatar

Level 2

Hi all,

Struggling to get this one to work, hoping someone here can assist.

I have a personlisation block with some java-script in it, i only want the block to display if the dates are valid:

<%

//declare start and end date for block

var startDate1 = '2019-08-01'; // start date for block1 - following format YYYY-MM-DD

var expiryDate1 = '2019-08-31'; // end date for block1 - following format YYYY-MM-DD

var today = new Date();

expiryDate1 = new Date(expiryDate1);

startDate1 = new Date(startDate1);

var htmlBlock1 =

<table class="flex" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="width:100%; min-width:100%; max-width:600px; mso-cellspacing: 0px; mso-padding-alt: 0px 0px 0px 0px">

  <tr>

    <td class="flex" align="center" style="Margin: 0;padding-left: 0;padding-right: 0;padding-top: 0px;padding-bottom: 0px;" valign="middle" bgcolor="#000000">

      <table class="flex" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="width:100%; min-width:100%; mso-cellspacing: 0px; mso-padding-alt: 0px 0px 0px 0px">

        <tr>

          <td align="center" style="padding:0; Margin:0"><a style="text-decoration: none;font-weight: bold;font-size: 18px;color: #000001" target="_blank" href=""><img class="flex" src="" alt="Say it with a personalised gift card. Buy a gift card" style="border: none;display: block;height: auto;width: 100%;max-width: 600px;" width="600" border="0" /></a><br/><br/>           

          </td>

        </tr>

      </table>

    </td>

  </tr>

</table>

if(startDate1 <= today && expiryDate1 >= today ) {

  document.write(htmlBlock1)

    

} else {

};

%>

This works fine without any issues however, i want to put an IF statement into the html variable that will change based on the targetData coming into the delivery. for example:

var htmlBlock1 =

<% if ( targetData.christmas == 1 ) { %>

<table class="flex" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="width:100%; min-width:100%; max-width:600px; mso-cellspacing: 0px; mso-padding-alt: 0px 0px 0px 0px">

  <tr>

    <td class="flex" align="center" style="Margin: 0;padding-left: 0;padding-right: 0;padding-top: 0px;padding-bottom: 0px;" valign="middle" bgcolor="#000000">

      <table class="flex" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="width:100%; min-width:100%; mso-cellspacing: 0px; mso-padding-alt: 0px 0px 0px 0px">

        <tr>

          <td align="center" style="padding:0; Margin:0"><a style="text-decoration: none;font-weight: bold;font-size: 18px;color: #000001" target="_blank" href=""><img class="flex" src="" alt="Say it with a personalised gift card. Buy a gift card" style="border: none;display: block;height: auto;width: 100%;max-width: 600px;" width="600" border="0" /></a><br/><br/>           

          </td>

        </tr>

      </table>

    </td>

  </tr>

</table>

<% } %>

when i do this, the delivery fails:

Error while compiling script 'content htmlContent' line ...: illegal XML character

I believe this is because the opening and closing tags (<% %>) is breaking my javascript as that is also within <% %>.

Is this possible? what can i do to make it work?

Thanks

Nick

1 Accepted Solution

Avatar

Correct answer by
Level 7

Hi Nick,

If I understand your requirement correctly, your var htmlBlock1 depends upon ( targetData.christmas == 1 ) condition.

You can try below in your delivery:

<%

var htmlBlock1 = ' ' ;

if ( targetData.christmas == 1 )

{

var htmlBlock1 = <table class="flex" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="width:100%; min-width:100%; max-width:600px; mso-cellspacing: 0px; mso-padding-alt: 0px 0px 0px 0px">

  <tr>

    <td class="flex" align="center" style="Margin: 0;padding-left: 0;padding-right: 0;padding-top: 0px;padding-bottom: 0px;" valign="middle" bgcolor="#000000">

      <table class="flex" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="width:100%; min-width:100%; mso-cellspacing: 0px; mso-padding-alt: 0px 0px 0px 0px">

        <tr>

          <td align="center" style="padding:0; Margin:0"><a style="text-decoration: none;font-weight: bold;font-size: 18px;color: #000001" target="_blank" href=""><img class="flex" src="" alt="Say it with a personalised gift card. Buy a gift card" style="border: none;display: block;height: auto;width: 100%;max-width: 600px;" width="600" border="0" /></a><br/><br/>          

          </td>

        </tr>

      </table>

    </td>

  </tr>

</table>

}

%>

-- HTML Content --

You can call this variable in the HTML content using <%= htmlBlock1 %>

Hope this helps.

Thanks,

Anita

View solution in original post

1 Reply

Avatar

Correct answer by
Level 7

Hi Nick,

If I understand your requirement correctly, your var htmlBlock1 depends upon ( targetData.christmas == 1 ) condition.

You can try below in your delivery:

<%

var htmlBlock1 = ' ' ;

if ( targetData.christmas == 1 )

{

var htmlBlock1 = <table class="flex" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="width:100%; min-width:100%; max-width:600px; mso-cellspacing: 0px; mso-padding-alt: 0px 0px 0px 0px">

  <tr>

    <td class="flex" align="center" style="Margin: 0;padding-left: 0;padding-right: 0;padding-top: 0px;padding-bottom: 0px;" valign="middle" bgcolor="#000000">

      <table class="flex" cellspacing="0" cellpadding="0" border="0" align="center" width="600" style="width:100%; min-width:100%; mso-cellspacing: 0px; mso-padding-alt: 0px 0px 0px 0px">

        <tr>

          <td align="center" style="padding:0; Margin:0"><a style="text-decoration: none;font-weight: bold;font-size: 18px;color: #000001" target="_blank" href=""><img class="flex" src="" alt="Say it with a personalised gift card. Buy a gift card" style="border: none;display: block;height: auto;width: 100%;max-width: 600px;" width="600" border="0" /></a><br/><br/>          

          </td>

        </tr>

      </table>

    </td>

  </tr>

</table>

}

%>

-- HTML Content --

You can call this variable in the HTML content using <%= htmlBlock1 %>

Hope this helps.

Thanks,

Anita