Hello, my team and I are stuck in the process of subscribing a recipient to 1 or more newsletter services in ACC.
Context:
We have an array called 'Categories' in context variable that contains 5 values (all of them are services), and we will need to iterate through it in order to dynamically render them in the landing page as checkbox options.
In our subscription page, we are running the next script in the HTML file (pageLoader is a function that allow us to access context variables and executes in the body of the HTML code as explained in a previous question https://experienceleaguecommunities.adobe.com/t5/adobe-campaign-classic-questions/web-app-accessing-...)
Script
We use the 'noSpaceCategory' value in order to match the internal newsletter's name in ACC, so the main difference between 'noSpaceCategory' and categories[i] is just one allows having more than one word and the other does not.
HTML Body
We have 2 important things here:
Rendered Page:
Problem:
We can dynamically render the content with the for loop opening the Sandbox URL with Chrome, but none of the options actually works after clicking 'I subscribe' except for the "Magic checkbox option". That checkbox is the only one that actually subscribe the recipient in the newsletter specified in the line.
We made sure that the internal newsletter services names are the correct, and we don't have a clue about why is not working.
What did we try:
We could not find a way of converting the string into HTML code.
Everything works just fine, but the thing here is that doing it this way we are not able to dynamically render more newsletter categories in case the 'Categories' array changes.
We have been trying to look for a better way to do this, but we can not avoid the 'Categories' array.
Can anyone help us on this taking a look at our logic?
Thank you.
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
Hello, Manoj!
We finally managed to solve the problem yesterday after doing something interesting. We were taking a look at the generated code in ACC for the web page and we realised that the subscription actually was made by searching the service name in the context. This is were services should be added when we want to add a subscription:
The path for accessing this services in Recipient is 'ctx -> Recipient -> svc'.
This 'svc' is added by default when using a Subscription in web pages for ACC, so it is only necessary to add as many as we want there, and the form will handle the innerText for subscribing (1 will subscribe and 0 will not)
How can we dynamically add new services to the Recipient services path?
This is how we managed to add them based in our array:
function addCheckboxFromArray(array) {
for (var i = 0; i < array.length; ++i) {
if (array[i]) {
var noSpaceCategory = deleteSpaces(array[i]); //This only deletes any spaces from the string
var htmlString = `
<div class="agree">
<input name="agree${i}" id="agree${i}" type="checkbox" class="checkbox-listen"
data-nl-ismandatory="false" data-nl-bindto="service" data-nl-servicelabel="academy_newsletter_${noSpaceCategory}"
data-nl-servicename="academy_newsletter_${noSpaceCategory}" data-nl-checkboxbehavior="subscription"
data-noSpaceCategory="${noSpaceCategory}" />
<label style="display: inline;" for="agree${i}" data-nl-localizable="true">
${array[i]}
</label>
</div>
`;
checkboxes.innerHTML += htmlString;
document.controller.setValue(`/ctx/recipient/svc/academy_newsletter_${noSpaceCategory}`, 0, `agree${i}`);
}
}
var checkboxListenElements = document.querySelectorAll('.checkbox-listen');
checkboxListenElements.forEach(function (checkbox, index) {
checkbox.addEventListener('change', function () {
var isChecked = checkbox.checked ? 1 : 0;
var currentNoSpaceCategory = checkbox.getAttribute('data-noSpaceCategory');
document.controller.setValue(`/ctx/recipient/svc/academy_newsletter_${currentNoSpaceCategory}`, isChecked, `agree${index}`);
});
});
}
(We used modern JS to run the script because we were using Chrome. ACC does not run this in 'Preview' mode)
Basically, we use JS to add the checkboxes dynamically with the array and we do two important things here:
This is an example of how a checkbox selection should look like in both page and recipient services:
If services are set properly in the context, ACC handles the subscription as expected when form is submitted.
Thank you.
Hello @alejandroluzuriaga
I see you are using JavaScript to render the checkboxes. It is a client-side code.
Did you try using the server-side code? Something like:
<%
for each(var cat in categories) {
%>
<input type="checkbox" value="<%= cat.@internalName %>"> <%= cat.@label%>
<%
}
%>
Views
Replies
Total Likes
Hello @_Manoj_Kumar_,
I hope you are having a great day.
I am part of @alejandroluzuriaga's Team. We are executing the code from the server side as you suggested. Sadly, we are having the same issue. The code renders the array dynamically but it doesn't subscribe the recipient to the newsletter. Do you have any other suggestion for this issue?
Thanks in advance.
Views
Replies
Total Likes
Hello @angeles_arcia
Could you please share the code you are using for this? I will try to troubleshoot it.
Views
Replies
Total Likes
Hello, Manoj!
We finally managed to solve the problem yesterday after doing something interesting. We were taking a look at the generated code in ACC for the web page and we realised that the subscription actually was made by searching the service name in the context. This is were services should be added when we want to add a subscription:
The path for accessing this services in Recipient is 'ctx -> Recipient -> svc'.
This 'svc' is added by default when using a Subscription in web pages for ACC, so it is only necessary to add as many as we want there, and the form will handle the innerText for subscribing (1 will subscribe and 0 will not)
How can we dynamically add new services to the Recipient services path?
This is how we managed to add them based in our array:
function addCheckboxFromArray(array) {
for (var i = 0; i < array.length; ++i) {
if (array[i]) {
var noSpaceCategory = deleteSpaces(array[i]); //This only deletes any spaces from the string
var htmlString = `
<div class="agree">
<input name="agree${i}" id="agree${i}" type="checkbox" class="checkbox-listen"
data-nl-ismandatory="false" data-nl-bindto="service" data-nl-servicelabel="academy_newsletter_${noSpaceCategory}"
data-nl-servicename="academy_newsletter_${noSpaceCategory}" data-nl-checkboxbehavior="subscription"
data-noSpaceCategory="${noSpaceCategory}" />
<label style="display: inline;" for="agree${i}" data-nl-localizable="true">
${array[i]}
</label>
</div>
`;
checkboxes.innerHTML += htmlString;
document.controller.setValue(`/ctx/recipient/svc/academy_newsletter_${noSpaceCategory}`, 0, `agree${i}`);
}
}
var checkboxListenElements = document.querySelectorAll('.checkbox-listen');
checkboxListenElements.forEach(function (checkbox, index) {
checkbox.addEventListener('change', function () {
var isChecked = checkbox.checked ? 1 : 0;
var currentNoSpaceCategory = checkbox.getAttribute('data-noSpaceCategory');
document.controller.setValue(`/ctx/recipient/svc/academy_newsletter_${currentNoSpaceCategory}`, isChecked, `agree${index}`);
});
});
}
(We used modern JS to run the script because we were using Chrome. ACC does not run this in 'Preview' mode)
Basically, we use JS to add the checkboxes dynamically with the array and we do two important things here:
This is an example of how a checkbox selection should look like in both page and recipient services:
If services are set properly in the context, ACC handles the subscription as expected when form is submitted.
Thank you.
Hello @alejandroluzuriaga
I am glad you found the solution.
You can always use the enable-debug option in the web app to check the path and all context variables.
Views
Replies
Total Likes
Views
Like
Replies