Expand my Community achievements bar.

SOLVED

Multiple CSS classes in event configuration in AEP launch and Data collection

Avatar

Level 3

Hi,

I want to configure my event, is there any way to specify multiple CSS classes?, i want the event to fire on the condition that the HTML elements that are clicked should have class A AND class B AND Class C. please refer to the screen shot. 

I want my event to fire when the element iam clicking on has class "align-L2-content" AND  "pl-1" AND "hyber-link".

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @ASP_Corp 

You can use a custom event type with the following code.

document.addEventListener('click', function(event) {
    var element = event.target;
    
    if (element.classList.contains('align-L2-content') && 
        element.classList.contains('pl-1') && 
        element.classList.contains('hyber-link')) {
        
        // Trigger your event here
        trigger()
    }
});

This code if the element which is getting click contains all three classes or not (you modify the code as per your additional requirements)

View solution in original post

3 Replies

Avatar

Correct answer by
Community Advisor

Hi @ASP_Corp 

You can use a custom event type with the following code.

document.addEventListener('click', function(event) {
    var element = event.target;
    
    if (element.classList.contains('align-L2-content') && 
        element.classList.contains('pl-1') && 
        element.classList.contains('hyber-link')) {
        
        // Trigger your event here
        trigger()
    }
});

This code if the element which is getting click contains all three classes or not (you modify the code as per your additional requirements)

Avatar

Level 3

@Ankit_Chaudhary , thank you. I was looking for a fix on the UI, rather than on the custom code, just curious, does the Class property in my screen shot, does it not take a comma seperated values of multiple CSS classes?

Avatar

Community Advisor

@ASP_Corp maybe not the comma seperated values but you can use a regex in the UI, however i fell like using a custom code will give more flexiblity for this use case but you can try using a regex as well if it work well your requirments.