Accept default (i.e. pre-selected) categories buttons the first dialog

[melker]

Discussed in #720

^{Originally posted by melker August 16, 2024}
We have some categories:

necessary: { readOnly: true, enabled: true },
catA: { enabled: true },
catB: { enabled: false },

In the first dialog, the consentModal we want to have the buttons:
Only necessary -> necessary
Accept expected -> necessary & catA, note: NOT catB
And then we have the option to manually select categories, but that we have solved in the text.

How do configure to get the "Accept expected"-button in the first dialog. I.e. get the ones having "enabled: true" in the settings.

In cookie consent v2 we could configure consent_modal like this:

                        primary_btn: {
                            text: 'I accept default',
                            role: 'accept_selected'
                        },

PS catB are some odd things where we need to make the visitors explicitly accept those in another dialog. We already have that logic.

[melker]

Is this possible to do in version 3? How?

[orestbida]

Hi @melker,

sadly each button in v3 has a fixed role, unlike v2 which had primary/secondary buttons with configurable roles.

The only way to achieve this is via custom js; you could modify the button and replace it with a clone that has a custom listener:

onModalReady: ({modalName, modal}) => {
    if (modalName == 'consentModal') {
        const acceptAllBtn = modal.querySelector('button[data-role="all"]');
        const acceptSelectionBtn = acceptAllBtn.cloneNode(true);
        acceptSelectionBtn.addEventListener('click', () => {
            CookieConsent.acceptCategory();
            CookieConsent.hide();
        });
        acceptAllBtn.replaceWith(acceptSelectionBtn);
    }
}

Note that this button will no longer be translated dynamically (via CookieConsent.setLanguage('<lang>')), since the inital internal reference is no longer there.

[melker]

Thanks @orestbida! It works well.

For completeness if someone else want the same: I added a list of the few wanted categories in the call to acceptCategory
CookieConsent.acceptCategory(['catA', 'someotherdefaultcat']);

Just a question out of curiosity: Would it not be enough to replace the click handler on the button instead of replacing the button?

[orestbida]

Where would you place this option in the configuration?

[melker]

@orestbida Sorry but I don't understand context of the question.

Are you asking me where I would like an option for this (accept only-pre-selected) or was it just a follow up on my curiosity-question?

[orestbida]

Would it not be enough to replace the click handler on the button instead of replacing the button?

My bad, I misinterpreted your question.

I am not aware of a way to replace/remove existing event listeners, that's why I had to clone it (new instance object, without events).

[melker]

I am not aware of a way to replace/remove existing event listeners, that's why I had to clone it (new instance object, without events).

Oh.... it seems I have not had to solve the problem of removing unknown listeners, as I can remember now. It seems you are correct, yes.

Thanks again, and thanks for making cookieconsent! The problem is solved so I will close this issue, but maybe it is worth mentioning your code as example in the documentation on how to solve this issue, but that is completely up to you if you thinks other may want to do the same thing.