J’ai un petit souci sur mon bandeau informatif des cookies.
Tout s’affiche correctement sur ordinateur mais j’ai des doubles boutons sur mobiles et tablettes (tests sur iOS), je ne trouve pas comment les supprimer.
Je n'ai pas mis le html car c'est du JS, je te mets le code si tu veux mais c'est assez long..
(function($) {
$.fn.ihavecookies = function(options, event) {
var $element = $(this);
// Définir les valeurs par défaut
var settings = $.extend({
cookieTypes: [
{
type: 'Préférences',
value: 'preferences',
description: 'Cookies liés aux préférences de votre site, par ex. mémoriser votre nom d utilisateur, les couleurs du site, etc.'
},
{
type: 'Statiqtiques',
value: 'analytics',
description: 'Cookies liés aux visites du site, aux types de navigateurs, etc.'
},
{
type: 'Marketing',
value: 'marketing',
description: 'Cookies liés au marketing, par ex. newsletters, réseaux sociaux, etc.'
}
],
title: 'Vous aimez les cookies ?',
message: 'Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site Web...',
link: '#cookies',
delay: 2000,
expires: 30,
moreInfoLabel: 'En savoir plus',
acceptBtnLabel: 'Accepter',
advancedBtnLabel: 'Personnaliser',
cookieTypesTitle: 'SÉLECTIONNEZ LES COOKIES QUE VOUS VOULEZ ACCEPTER',
fixedCookieTypeLabel:'Necessary',
fixedCookieTypeDesc: 'Ceux-ci sont essentiels au bon fonctionnement du site Web.',
onAccept: function(){},
uncheckBoxes: false
}, options);
var myCookie = getCookie('cookieControl');
var myCookiePrefs = getCookie('cookieControlPrefs');
if (!myCookie || !myCookiePrefs || event == 'reinit') {
// Supprime toutes les instances du message cookie pour qu'il ne soit pas dupliqué
$('#gdpr-cookie-message').remove();
// Cochez la case du type de cookie 'nécessaire' qui ne peut pas être décochée
var cookieTypes = '<li><input type="checkbox" name="gdpr[]" value="necessary" checked="checked" disabled="disabled"> <label title="' + settings.fixedCookieTypeDesc + '">' + settings.fixedCookieTypeLabel + '</label></li>';
// Générer la liste des cases à cocher des types de cookies
preferences = JSON.parse(myCookiePrefs);
$.each(settings.cookieTypes, function(index, field) {
if (field.type !== '' && field.value !== '') {
var cookieTypeDescription = '';
if (field.description !== false) {
cookieTypeDescription = ' title="' + field.description + '"';
}
cookieTypes += '<li><input type="checkbox" id="gdpr-cookietype-' + field.value + '" name="gdpr[]" value="' + field.value + '" data-auto="on"> <label for="gdpr-cookietype-' + field.value + '"' + cookieTypeDescription + '>' + field.type + '</label></li>';
}
});
// Afficher le message de cookie sur la page
var cookieMessage = '<div id="gdpr-cookie-message"><h4>' + settings.title + '</h4><p>' + settings.message + ' <a href="' + settings.link + '">' + settings.moreInfoLabel + '</a><div id="gdpr-cookie-types" style="display:none;"><h5>' + settings.cookieTypesTitle + '</h5><ul>' + cookieTypes + '</ul></div><p><button class=button2 id="gdpr-cookie-accept" type="button">' + settings.acceptBtnLabel + '</button><button class=button2 id="gdpr-cookie-advanced" type="button">' + settings.advancedBtnLabel + '</button></p></div>';
setTimeout(function(){
$($element).append(cookieMessage);
$('#gdpr-cookie-message').hide().fadeIn('slow', function(){
// En cas de réinitialisation, ouvrez la section avancée du message
// et revérifiez toutes les options précédemment sélectionnées.
if (event == 'reinit') {
$('#gdpr-cookie-advanced').trigger('click');
$.each(preferences, function(index, field) {
$('input#gdpr-cookietype-' + field).prop('checked', true);
});
}
});
}, settings.delay);
// Lorsque vous cliquez sur le bouton d'acceptation, déposez le cookie
$('body').on('click','#gdpr-cookie-accept', function(){
// Set cookie
dropCookie(true, settings.expires);
// Si 'data-auto' est défini sur ON, cochez toutes les cases car
// l'utilisateur n'a pas cliqué sur le bouton de personnalisation des cookies
$('input[name="gdpr[]"][data-auto="on"]').prop('checked', true);
// Enregistrer les préférences de cookies des utilisateurs (dans un cookie!)
var prefs = [];
$.each($('input[name="gdpr[]"]').serializeArray(), function(i, field){
prefs.push(field.value);
});
setCookie('cookieControlPrefs', encodeURIComponent(JSON.stringify(prefs)), 365);
// Exécuter la fonction de rappel
settings.onAccept.call(this);
});
// Activer / désactiver les options de cookies avancées
$('body').on('click', '#gdpr-cookie-advanced', function(){
// Décochez toutes les cases à l'exception de la désactivée «nécessaire»
// one et définissez 'data-auto' sur OFF pour tous. L'utilisateur peut maintenant
// sélectionnez les cookies qu'ils souhaitent accepter.
$('input[name="gdpr[]"]:not(:disabled)').attr('data-auto', 'off').prop('checked', false);
$('#gdpr-cookie-types').slideDown('fast', function(){
$('#gdpr-cookie-advanced').prop('disabled', true);
});
});
} else {
var cookieVal = true;
if (myCookie == 'false') {
cookieVal = false;
}
dropCookie(cookieVal, settings.expires);
}
// Décochez toutes les cases au chargement de la page
if (settings.uncheckBoxes === true) {
$('input[type="checkbox"].ihavecookies').prop('checked', false);
}
};
// Méthode pour obtenir la valeur du cookie
$.fn.ihavecookies.cookie = function() {
var preferences = getCookie('cookieControlPrefs');
return JSON.parse(preferences);
};
// Méthode pour vérifier si la préférence de cookie de l'utilisateur existe
$.fn.ihavecookies.preference = function(cookieTypeValue) {
var control = getCookie('cookieControl');
var preferences = getCookie('cookieControlPrefs');
preferences = JSON.parse(preferences);
if (control === false) {
return false;
}
if (preferences === false || preferences.indexOf(cookieTypeValue) === -1) {
return false;
}
return true;
};
// Fonction pour déposer le cookie avec une valeur booléenne de true.
var dropCookie = function(value, expiryDays) {
setCookie('cookieControl', value, expiryDays);
$('#gdpr-cookie-message').fadeOut('fast', function() {
$(this).remove();
});
};
// Définit le cookie avec «nom» et la valeur «valeur» pour «jours_expiration».
var setCookie = function(name, value, expiry_days) {
var d = new Date();
d.setTime(d.getTime() + (expiry_days*24*60*60*1000));
var expires = "expires=" + d.toUTCString();
document.cookie = name + "=" + value + ";" + expires + ";path=/";
return getCookie(name);
};
// Obtient le cookie appelé «nom».
var getCookie = function(name) {
var cookie_name = name + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(cookie_name) === 0) {
return c.substring(cookie_name.length, c.length);
}
}
return false;
};
}(jQuery));
var options = {
title: '🍪 Vous aimez les cookies ?',
message: 'Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site Web...',
delay: 4000,
expires: 1,
link: '#cookies',
onAccept: function(){
var myPreferences = $.fn.ihavecookies.cookie();
console.log('Les préférences suivantes ont été enregistrées ...');
console.log(myPreferences);
},
uncheckBoxes: true,
acceptBtnLabel: 'Accepter',
moreInfoLabel: 'En savoir plus',
cookieTypesTitle: 'SÉLECTIONNEZ LES COOKIES QUE VOUS SOUHAITEZ ACCEPTER',
fixedCookieTypeLabel: 'Essentiels',
fixedCookieTypeDesc: 'Cookies essentiels au bon fonctionnement du site Web.'
}
$(document).ready(function() {
$('body').ihavecookies(options);
if ($.fn.ihavecookies.preference('marketing') === true) {
console.log('Cela devrait fonctionner car le marketing est accepté.');
}
$('#ihavecookiesBtn').on('click', function(){
$('body').ihavecookies(options, 'reinit');
});
});
Pas d'aide concernant le code par MP, le forum est là pour ça :)