Custom Event Handling for Specific Buttons

Introduction

This document provides detailed instructions for Web357 subscribers on how to implement custom event handling for specific buttons within the Cookies Policy Notification Bar plugin. The objective is to customize the behavior when a user clicks on the "Decline" button, such that instead of the default action, a modal window opens, and the user is navigated to a specific cookie category.

Purpose

The custom script is designed to override the default event handlers associated with the "Decline" and "More Info" buttons. By implementing this script, clicking on these buttons will:

• Open a modal window.
• Navigate directly to a designated cookie category within that modal.

JavaScript Code Implementation

Here is the JavaScript code required to implement this functionality. This script should be added to your web pages where the Cookies Policy Notification Bar is active.

<script>
window.addEventListener('load', function() {
    // List of button IDs for which custom behavior is required
    var buttons = [
        document.getElementById('cpnb-decline-btn'),
        document.getElementById('cpnb-decline-btn-m-info'),
    ];

    // Loop through each button and assign a new event handler
    buttons.forEach(function(button) {
        if (button) {
            button.addEventListener('click', function(event) {
                cpnb_m_openModal();  // Function to open the modal window
                cpnb_m_changeModalCategory('cookie_categories_group2');  // Function to change the category displayed in the modal
                event.stopImmediatePropagation();  // Prevent other event handlers from executing
                return false;  // Prevent the default button action
            }, true);  // The event handler is added in the capturing phase to intercept the event early
        }
    });
});
</script>

Explanation of Code Components

• Event Listener: The window.addEventListener('load', ...) ensures that the script runs only after the entire page has loaded, which helps in accessing all DOM elements safely.
• Button Selection: The script starts by selecting the buttons via their IDs — 'cpnb-decline-btn' and 'cpnb-decline-btn-m-info'. Ensure these IDs match those in your HTML.
• Event Handling: For each button, a new event listener is attached. This listener does the following:
  • Opens a modal through cpnb_m_openModal().
  • Changes the visible category in the modal to a specific category ('cookie_categories_group2') using cpnb_m_changeModalCategory().
  • Uses event.stopImmediatePropagation() to prevent any other event handlers attached to these buttons from executing.
  • Returns false to stop the default action of the buttons.
• Capturing Phase: The true parameter in addEventListener specifies that the event should be captured during the capturing phase of event flow. This helps in handling the event before any potentially conflicting default handlers execute.

Customization Reminder

• Modal Category ID: The function cpnb_m_changeModalCategory('cookie_categories_group2') includes a placeholder category ID. Do not forget to customize this ID to match the specific category as set in your plugin settings. Categories are typically labeled as cookie_categories_group# (replace # with 1, 2, 3, etc., depending on your category order in the plugin settings).

Deployment

To deploy this script:

1. Ensure that the function names cpnb_m_openModal() and cpnb_m_changeModalCategory() correspond to actual functions defined in your JavaScript that are capable of opening a modal and changing categories, respectively.
2. Include this script in the HTML of the page where the Cookies Policy Notification Bar is active, preferably just before the closing </body> tag to ensure all elements are loaded before the script executes.

Conclusion

This customization enhances the functionality of the Web357 Cookies Policy Notification Bar by allowing specific interactions tailored to the needs of the site and improving the user experience by directing them immediately to relevant content.