Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

The 4th edition of the Campaign Community Lens newsletter is out now!
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
Community Advisor

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
Community Advisor

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