With TCF enabled, the cookie policy page shows:
– generic checkboxes (categories)
– specific vendor-specific checkboxes

There is 3 issues:
– I cannot set any checkbox. A JavaScript error occurs. Reason: “e.target” is accessed, but “e” is undefined. See patch below to fix it.
– After fixing the first issue, another error shows up that: “Failed to execute ‘querySelectorAll’ on ‘Document’: ‘[data-purpose_consent_id=1]’ is not a valid selector.” See 2nd patch below to fix it.
– Now I can set checkboxes (categories & vendors), BUT I fail to unset the category checkboxes. There is no JS error because of that.

I’m using the multisite version 6.0.14 on my website.

Patches:

Index: web/wp-content/plugins/complianz-gdpr-premium-multisite/pro/tcf/src/index.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
UTF-8
===================================================================
diff –git a/web/wp-content/plugins/complianz-gdpr-premium-multisite/pro/tcf/src/index.js b/web/wp-content/plugins/complianz-gdpr-premium-multisite/pro/tcf/src/index.js
— a/web/wp-content/plugins/complianz-gdpr-premium-multisite/pro/tcf/src/index.js
+++ b/web/wp-content/plugins/complianz-gdpr-premium-multisite/pro/tcf/src/index.js (date 1643316746235)
@@ -515,13 +515,13 @@
}

//add event listener
– addEvent(“click”, ‘.cmplz-tcf-‘ + type + ‘-input’, function () {
+ addEvent(“click”, ‘.cmplz-tcf-‘ + type + ‘-input’, function (e) {
let obj = e.target;

const typeId = obj.getAttribute(‘data-‘+type + ‘_id’);
if (obj.checked) {
//set all of this id to checked
– document.querySelectorAll(‘[data-‘ + type + ‘_id=’ + typeId + ‘]’).forEach(obj => {
+ document.querySelectorAll(‘[data-‘ + type + ‘_id=”‘ + typeId + ‘”]’).forEach(obj => {
obj.checked = true;
});
if (type === ‘purpose_consent’) {
@@ -536,7 +536,7 @@
cmplzSetTypeByVendor(type, typeId);
} else {
//set all of this id to unchecked
– document.querySelectorAll(‘[data-‘ + type + ‘_id=’ + typeId + ‘]’).forEach(obj => {
+ document.querySelectorAll(‘[data-‘ + type + ‘_id=”‘ + typeId + ‘”]’).forEach(obj => {
obj.checked = true;
});
if (type === ‘purpose_consent’) {
@@ -693,7 +693,7 @@
}
}

– addEvent(“click”, ‘.cmplz-tcf-legitimate-interest-input’, function () {
+ addEvent(“click”, ‘.cmplz-tcf-legitimate-interest-input’, function (e) {
let obj = e.target;
const vendorId = obj.getAttribute(‘data-vendor_id’);
if ( obj.checked ) {
@@ -710,7 +710,7 @@
cmplz_set_cookie(‘banner-status’, ‘dismissed’);
});

– addEvent(“click”, ‘.cmplz-tcf-consent-input’, function () {
+ addEvent(“click”, ‘.cmplz-tcf-consent-input’, function (e) {
let obj = e.target;
const vendorId = obj.getAttribute(‘data-vendor_id’);
if ( obj.checked ) {
@@ -727,7 +727,7 @@
cmplz_set_cookie(‘banner-status’, ‘dismissed’);
});

– addEvent(“click”, ‘.cmplz-tcf-vendor-input’, function () {
+ addEvent(“click”, ‘.cmplz-tcf-vendor-input’, function (e) {
let obj = e.target;
const vendorId = obj.getAttribute(‘data-vendor_id’);
let container = obj.closest(‘.cmplz-tcf-vendor-container’);

Index: web/wp-content/plugins/complianz-gdpr-premium-multisite/pro/tcf/src/index.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
UTF-8
===================================================================
diff –git a/web/wp-content/plugins/complianz-gdpr-premium-multisite/pro/tcf/src/index.js b/web/wp-content/plugins/complianz-gdpr-premium-multisite/pro/tcf/src/index.js
— a/web/wp-content/plugins/complianz-gdpr-premium-multisite/pro/tcf/src/index.js
+++ b/web/wp-content/plugins/complianz-gdpr-premium-multisite/pro/tcf/src/index.js (date 1643316746235)
@@ -521,7 +521,7 @@
const typeId = obj.getAttribute(‘data-‘+type + ‘_id’);
if (obj.checked) {
//set all of this id to checked
– document.querySelectorAll(‘[data-‘ + type + ‘_id=’ + typeId + ‘]’).forEach(obj => {
+ document.querySelectorAll(‘[data-‘ + type + ‘_id=”‘ + typeId + ‘”]’).forEach(obj => {
obj.checked = true;
});
if (type === ‘purpose_consent’) {
@@ -536,7 +536,7 @@
cmplzSetTypeByVendor(type, typeId);
} else {
//set all of this id to unchecked
– document.querySelectorAll(‘[data-‘ + type + ‘_id=’ + typeId + ‘]’).forEach(obj => {
+ document.querySelectorAll(‘[data-‘ + type + ‘_id=”‘ + typeId + ‘”]’).forEach(obj => {
obj.checked = true;
});
if (type === ‘purpose_consent’) {