Ultima modifica:
Come creare un banner per i Cookie e Privacy su bootstrap 5
Visto che non ho trovato molti video in merito online ho dovuto effettuare delle ricerche approfondite sul argomento, infatti, oggi giorno tutti utilizzano dei servizi a pagamento per generare automaticamente i propri banner per segnalare alla propria utenza i cookie e le info sulla privacy, come scritto nel GDPR dell'Unione Europea, per questo motivo tutti i tutorial in italiano parlano di servizi più che dell'aspetto della programmazione, per questo motivo ho deciso di fare un video io, per quanto comunque ho scelto di fare un video dedicato all'argomento.
1 Codice e funzionamento
Allora, ho utilizzato un così detto modal che consente di creare un popup in modo semplice e veloce, onestamente è il metodo più semplice sotto bootstrap.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<!-- Button trigger modal -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#cookiePopup">
Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="cookiePopup" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="staticBackdropLabel">Cookie e privacy</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body align-items-center align-self-center text-center"> <!-- compo in cui sono presenti le info -->
<p>Questo sito utilizza cookies per personalizzare i contenuti, in caso di declino, non saranno disponibili alcune funzionalità.</p>
</div>
<div class="modal-footer">
<a class=" align-items-center" href="#">Scopri di più<i class="fa fa-angle-right ml-2"></i></a> <!-- in questo campo bisogna sostituire il # con il link della propria pagina che rimanda alle info sulla privacy -->
<button type="button" id="accetta" class="btn btn-dark btn-primary" data-bs-dismiss="modal" onclick="document.cookie='accettato=rifiuto'">Non acconsento</button>
<button type="button" id="accetta" class="btn btn-dark btn-secondary" data-bs-dismiss="modal" onclick="document.cookie='accettato=visto'">Accetta</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.3.slim.js" integrity="sha256-DKU1CmJ8kBuEwumaLuh9Tl/6ZB6jzGOBV/5YpNE2BWc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
if(document.cookie.indexOf('accettato') >=0){ // caso in cui l'utente ha accettato i cookie.
} else {
$('#cookiePopup').modal('show'); // apre il cookie banner automaticamente appena apre la pagina
}
});
</script>
</body>
</html>1.1 Video dedicato
Vedi: https://www.youtube.com/watch?v=rp3FY9jfWYo
