Hi,
I have been having a little bit of difficulty in order to get dynamic data in the loop. Let me explain.
The idea is to print images using <tr><td>. Example: if there are 4 (even) images, then first two will be in a row and the remaining two will be in the second row.
If there are 5 (odd) images, then first two will be in a row, the next two will be in the second row, and the 5th image will be place at the center on the third row.
I check for images based on the store-stock data.
So, for image1, there will be a checker. Lets call it chk1. If there is stock for image1, then chk1=1. Similarly for image2, if there is stock, then chk2=1.
I have got 6 images in total. Therefore, I have 6 checkers too. I add all the checkers and add it to a variable called as DispItemCount. The logic behind this is that, if DispItemCount=6, that means all the images are there. If DispItemCount=5, then only 5 images are there but we do not know which one is not there. In order to solve this issues I am using a for loop and checking for DispItemCount and chk[i].
Here is the code:
<% for(int i=1, j=1; i<= targetData.dispItemCnt; i++) { %>
<!-- If targetData.dispItemCnt == i and if it is odd, then the last image must be printed in the middle.
Example, if targetData.dispItemCnt=5, then the 5th product image but be in the center. The rest (4 items) will be arramged in a row. -->
<% if (targetData.dispItemCnt==i && targetData.dispItemCnt % 2==1 ) { %>
<tr>
<td align="center" valign="top"
style=" padding: 40px 0px 35px; font-size: 0px; background-color: #ffffff;">
<div class="stack-column pb20 nopad"
style=" margin :0px; width: 100%; vertical-align: top; display: inline-block; min-width: 150px; max-width: 350px;">
<a href="https://www.onitsukatiger.com/<%= targetData.link1 %>&utm_campaign=<%= targetData.utmCampaign %>&utm_content=<%= targetData.paramDate %>_<%= message.delivery_id %>_product1_<%= targetData.paramCountry %>&utm_medium=email&utm_source=ac"
target="_blank">
<table role="presentation" style="width: 100%;" border="0"
cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 0px; border-image: none;">
<table role="presentation" style="width: 100%;"
border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle">
<img class="center-on-narrow nlui-widget"
style="background: #dddddd; width: auto; color: #555555; line-height: 20px; font-family: sans-serif; font-size: 15px; width: 250px; max-width: 100%;"
alt="product1"
src="img\Mexico.png"
border="0"
unselectable="on" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div align="center" valign="middle"
style="color: black; font-family: 'Manrope',sans-serif, Arial, Helvetica; font-weight:bold; font-size: 15px;">
<%= targetData.name1 %>
</div>
</a>
</div>
</td>
</tr>
<% } %>
<!-- End of first if -->
<!-- If j is a odd number, then we will print the item image on the left. We check if chk[i] is not zero. If it is zero, that means that there is no stock.
If chk[i]==0, then we will surely no print the item and we will not increment j. j is only incremented if the stock is there. -->
<% else if(j%2==1) {
if (targetData.chk[i]!=0) { %>
<tr>
<td align="left" valign="top"
style=" padding: 40px 0px 35px; font-size: 0px; background-color: #ffffff;">
<div class="stack-column pb20 nopad"
style=" margin :0px; width: 100%; vertical-align: top; display: inline-block; min-width: 150px; max-width: 350px;">
<a href="https://www.onitsukatiger.com/<%= targetData.link1 %>&utm_campaign=<%= targetData.utmCampaign %>&utm_content=<%= targetData.paramDate %>_<%= message.delivery_id %>_product1_<%= targetData.paramCountry %>&utm_medium=email&utm_source=ac"
target="_blank">
<table role="presentation" style="width: 100%;" border="0"
cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 0px; border-image: none;">
<table role="presentation" style="width: 100%;"
border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle">
<img class="center-on-narrow nlui-widget"
style="background: #dddddd; width: auto; color: #555555; line-height: 20px; font-family: sans-serif; font-size: 15px; width: 250px; max-width: 100%;"
alt="product1"
src="img\Mexico.png"
border="0"
unselectable="on" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div align="center" valign="middle"
style="color: black; font-family: 'Manrope',sans-serif, Arial, Helvetica; font-weight:bold; font-size: 15px;">
<%= targetData.name1 %>
</div>
</a>
</div>
</td>
</tr>
<% j++; } %>
<% } %>
<!-- End of else if -->
<!-- If j is even, then we repeat the checks and will print the item on the right. -->
<% else {
if (targetData.chk[i]!=0) { %>
<tr>
<td align="right" valign="top"
style=" padding: 40px 0px 35px; font-size: 0px; background-color: #ffffff;">
<div class="stack-column pb20 nopad"
style=" margin :0px; width: 100%; vertical-align: top; display: inline-block; min-width: 150px; max-width: 350px;">
<a href="https://www.onitsukatiger.com/<%= targetData.link1 %>&utm_campaign=<%= targetData.utmCampaign %>&utm_content=<%= targetData.paramDate %>_<%= message.delivery_id %>_product1_<%= targetData.paramCountry %>&utm_medium=email&utm_source=ac"
target="_blank">
<table role="presentation" style="width: 100%;" border="0"
cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 0px; border-image: none;">
<table role="presentation" style="width: 100%;"
border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="middle">
<img class="center-on-narrow nlui-widget"
style="background: #dddddd; width: auto; color: #555555; line-height: 20px; font-family: sans-serif; font-size: 15px; width: 250px; max-width: 100%;"
alt="product1"
src="img\Mexico.png"
border="0"
unselectable="on" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div align="center" valign="middle"
style="color: black; font-family: 'Manrope',sans-serif, Arial, Helvetica; font-weight:bold; font-size: 15px;">
<%= targetData.name1 %>
</div>
</a>
</div>
</td>
</tr>
<% j++; } %>
<% } %>
<!-- End of else -->
<% } %>
What I want to know is how to loop the images and names. That is, generally we five it as targetData.image[i] to get the images. But that is not possible in this case.
Sorry for the long explanation. Kindly check and help me figure it out.
Solved! Go to Solution.
Views
Replies
Total Likes
Can you just make it static and display the rows/columns if theres a value on the index? something like below.
<table border="1" cellspacing="0" cellpadding="0">
<col width="258">
<col width="69">
<tr>
<% if(targetData.dispItemCnt[0]){%><td>yourimage1</td><$}%>
<% if(targetData.dispItemCnt[1]){%><td>yourimage2</td><$}%>
</tr>
<tr>
<% if(targetData.dispItemCnt[2]){%><td>yourimage3</td><$}%>
<% if(targetData.dispItemCnt[3]){%><td>yourimage4</td><%}%>
</tr>
<tr>
<% if(targetData.dispItemCnt[4]){%> <td colspan="2">yourimage5</td><%}%>
</tr>
</table>
Views
Replies
Total Likes
Can you just make it static and display the rows/columns if theres a value on the index? something like below.
<table border="1" cellspacing="0" cellpadding="0">
<col width="258">
<col width="69">
<tr>
<% if(targetData.dispItemCnt[0]){%><td>yourimage1</td><$}%>
<% if(targetData.dispItemCnt[1]){%><td>yourimage2</td><$}%>
</tr>
<tr>
<% if(targetData.dispItemCnt[2]){%><td>yourimage3</td><$}%>
<% if(targetData.dispItemCnt[3]){%><td>yourimage4</td><%}%>
</tr>
<tr>
<% if(targetData.dispItemCnt[4]){%> <td colspan="2">yourimage5</td><%}%>
</tr>
</table>
Views
Replies
Total Likes
Hi @revathi05,
Was @david--garcia's suggestion helpful to resolve your query? In case it was helpful, then kindly choose it as the 'Correct Reply'. If not and you still need more help, then do let us know.
Views
Replies
Total Likes
Views
Likes
Replies