[Feat]: Disabling the category from configuration?

[darkWolf-PR]

Description

Would it be possible to disable categories by either switch or removing category from the "categories:" ? What I mean is: I have a configurable framework for websites, where user can set-up Google GA/AW/Facebook etc. codes(few important ones), also with possibility to make website with different languages.

So I thought that I will have prepared translation texts with all needed categories (necessary, analytics, marketing) as external translation files and by changing the "categories:" part of config, it will be possible to use only the needed category. For example when someone sets only G-xxxxxx tag, he will only have "analytics" category.

Sadly, this doesn´t work-and I´m not sure, if it´s a feature or bug - but when I have 3 categories in translation file and only 2 in configuration, script shows 2 categories with switch and only the lower-text part of the accordeon for the category, that is not set up.
As it does not show the switch part with category, maybe it´s actually a bug?

Screenshot:

Proposed solution

In case it´s a bug-just block showing the unused category description.

In case it´s not a bug - make the script check the categories when displaying them or maybe a param to turn category on/off, like:

            analytics: {
                active: true,
                enabled: false,

So when the "active" is false, it does not show it.

Additional details

No response

[Orest Bida]

This is not a bug, you can have as many blocks as you want and by default they are treated as normal blocks of text, unless you specify the linkedCategory attribute.

There is no easy way to achieve this; you need a good dose of JS to make it work and it's not possible from within the config. itself.

There are 2 approaches:

1. have a default full config (but you need to dynamically remove the non selected categories/sections)
2. have a default basic config with no categories/translations (but you need to dynamically add the categories/sections)

Here is an example using the second approach:

const categories = {
    necessary: {
        enabled: true,
        readOnly: true
    },
    analytics: {},
    ads: {}
}

const translations = {
    en: {
        consentModal: {
            title: '...',
            description: '...',
            acceptAllBtn: '...',
            acceptNecessaryBtn: '...',
            showPreferencesBtn: '...',
        },
        preferencesModal: {
            title: '...',
            acceptAllBtn: '...',
            acceptNecessaryBtn: '...',
            savePreferencesBtn: '...',
            sections: []
        }
    },
    de: {
        consentModal: {
            title: '... de',
            description: '... de',
            acceptAllBtn: '... de',
            acceptNecessaryBtn: '... de',
            showPreferencesBtn: '... de',
        },
        preferencesModal: {
            title: '...de',
            acceptAllBtn: '...de',
            acceptNecessaryBtn: '...de ',
            savePreferencesBtn: '...de',
            sections: []
        }
    }
}

const sections = {
    en: {
        firstSection: {
            title: 'What are cookies',
            description: '...',
        },
        necessary: {
            title: 'Necessary cookies',
            description: '...',
            linkedCategory: 'necessary'
        },
        analytics: {
            title: 'Analytics cookies',
            description: '...',
            linkedCategory: 'analytics'
        },
        ads: {
            title: 'Advertisement cookies',
            description: '...',
            linkedCategory: 'ads'
        },
        lastSection: {
            title: 'More information',
            description: `If you need more information on ... `
        }
    },
    de: {
        firstSection: {
            title: 'What are cookies de',
            description: '...',
        },
        necessary: {
            title: 'Necessary cookies de',
            description: '...',
            linkedCategory: 'necessary'
        },
        analytics: {
            title: 'Analytics cookies de',
            description: '...',
            linkedCategory: 'analytics'
        },
        ads: {
            title: 'Advertisement cookies de',
            description: '...',
            linkedCategory: 'ads'
        },
        lastSection: {
            title: 'More information de',
            description: `If you need more information on ... `
        }
    }
}

/**
 * @param {import('../../types').CookieConsentConfig} config
 * @param {string} category
 */
const addCategory = (config, category) => {
    config.categories[category] = categories[category];
}

/**
 * @param {import('../../types').CookieConsentConfig} config
 * @param {string} lang
 */
const addTranslation = (config, lang) => {
    config.language.translations[lang] = translations[lang];
}

/**
 * @param {import('../../types').CookieConsentConfig} config
 * @param {string} lang
 * @param {string} section
 */
const addSection = (config, lang, section) => {
    config.language.translations[lang].preferencesModal.sections.push(sections[lang][section]);
}

/**
 * @param {import('../../types').CookieConsentConfig} config
 * @param {string} lang
 */
const setDefaultLang = (config, lang) => {
    config.language.default = lang;
}

/**
 * @param {Object} configParams
 * @param {import('../../types').CookieConsentConfig} configParams.config
 * @param {string[]} configParams.languages
 * @param {string[]} configParams.categories
 * @param {string} [configParams.defaultLanguage]
 */
const buildConfig = ({config, languages, categories, defaultLanguage = 'en'}) => {
    for (const lang of languages) {
        addTranslation(config, lang);
        addSection(config, lang, 'firstSection');
        for (const category of categories) {
            // Add both the category and its related section
            addCategory(config, category);
            addSection(config, lang, category);
        }
        addSection(config, lang, 'lastSection');
    }
    setDefaultLang(config, defaultLanguage);
}

/**
 * @type {import("../../types").CookieConsentConfig}
 */
const dynamicConfig = {
    categories: {},

    language: {
        translations: {}
    }
}

buildConfig({
    config: dynamicConfig,
    categories: ['necessary', 'analytics'],
    languages: ['en', 'de'],
    defaultLanguage: 'en'
});

CookieConsent.run(dynamicConfig);