Passing Data from Landing Page to Sub Pages in AJO

[DanSpigs1]

I am trying to set up a Landing Page to manage a set of subscriptions, and would like to have a subpage on confirm that shows a message "Thank you, you have opted out of (Subscription X)".  How do I pass a value for each of the check boxes from the Landing Page to a Sub Page?

Looking at the documentation here, Create a landing page | Adobe Journey Optimizer it references an Additional Data section that sounds like it would do this, but I don't see that section available when I create a landing page.  What is the best way to go about passing this data through?

Thanks in advance.

[_Manoj_Kumar_]

Hello @DanSpigs1 

In your Primary Page, Add a HTML Content below your form and add this code:

<script>
        // Initialize an empty array to store selected labels
        let selectedLabels = [];

        // Function to update local storage
        function updateLocalStorage() {
            const labelString = selectedLabels.join(', ');
            localStorage.setItem('selectedLabels', labelString);
        }

        // Function to handle checkbox changes
        function handleCheckboxChange(event) {
            const checkbox = event.target;
            const label = checkbox.closest('.spectrum-Checkbox').querySelector('.spectrum-Checkbox-label').textContent;

            if (checkbox.checked) {
                // Add label if checkbox is checked
                selectedLabels.push(label);
            } else {
                // Remove label if checkbox is unchecked
                selectedLabels = selectedLabels.filter(item => item !== label);
            }

            // Update local storage
            updateLocalStorage();
        }

        // Attach event listeners to all checkboxes
        document.querySelectorAll('.spectrum-Checkbox-input').forEach(checkbox => {
            checkbox.addEventListener('change', handleCheckboxChange);
        });

        // Load initial state from local storage
        window.addEventListener('load', () => {
            const storedLabels = localStorage.getItem('selectedLabels');
            if (storedLabels) {
                selectedLabels = storedLabels.split(', ');               
            }
        });
    </script>

now in the sub page, 

Add the HTML content and add this code.

Thank you, you have opted out of <div id="mySubscriptionLists"></div>

<script>
   window.addEventListener('load', () => {
            const storedLabels = localStorage.getItem('selectedLabels');
            if (storedLabels) {
                selectedLabels = storedLabels.split(', ');          
              document.getElementById("mySubscriptionLists").innerText=storedLabels;
            }
        });
</script>

[DanSpigs1]

Thank you very much for this, one additional question.  In testing this looks like it logs any change to a check box, so if someone opted into a new option, rather than opting out, it still logs it.  Is there a way to differentiate between a check and an uncheck and log those separately?

Thanks!

[_Manoj_Kumar_]

Hello @DanSpigs1  You can modify this function to log them seperately:

 function handleCheckboxChange(event) {
            const checkbox = event.target;
            const label = checkbox.closest('.spectrum-Checkbox').querySelector('.spectrum-Checkbox-label').textContent;

            if (checkbox.checked) {
                // Add label if checkbox is checked
                selectedLabels.push(label);
            } else {
                // Remove label if checkbox is unchecked
                selectedLabels = selectedLabels.filter(item => item !== label);
            }

            // Update local storage
            updateLocalStorage();
        }

[DanSpigs1]

Hi, thanks for replying. Can you please elaborate on what changes need to be made?
Use case: We want the all the options to appear serially. Also, right now, all the previous selections are also being stored in the array and getting displayed on the sub landing page.

[_Manoj_Kumar_]

Hello @DanSpigs1  You will have to clear the local storage when the primary page is initially loaded.

Depending on what you want to achieve when checkbox is selected/un-selected, you can update the this code:

 if (checkbox.checked) {
                // Add label if checkbox is checked
                selectedLabels.push(label);
            } else {
                // Remove label if checkbox is unchecked
                selectedLabels = selectedLabels.filter(item => item !== label);
            }