A puha sütifal

Puha és hagyományos sütifal

A hagyományos sütifal csak két lehetőséget ad a látogatónak: elhagyja a webhelyet, vagy elfogadja a harmadik féltől származó sütiket. A GDPR és több más adatvédelmi szabály ezt tiltja.

A puha sütifal egy harmadik lehetőséget ad: a látogató elutasíthatja a sütiket, és úgy folytathatja a böngészést. Mindkét fajta fal elfedi az oldalt, amíg a látogató nem választ. A legtöbb sütifal a sütiszabályzat elolvasását is megakadályozza a hozzájárulás előtt. A Complianz fala ezt nem teszi: a sütiszabályzat oldalán másként viselkedik, hogy a szabályzatot rendesen el lehessen olvasni.

Bekapcsolás

1. Nyisd meg a Complianz → Consent Banner oldalt.
2. Lépj az Appearance fülre.
3. Kapcsold be a Show as soft cookie wall beállítást.
4. Mentsd a változtatást.

A beállítás minden sablonnal elérhető. A Consent Banner oldal Értesítések paneljében is megjelenik egy Soft cookie wall tájékoztató, amely a témáról szól.

https://minta-bolt.hu/wp-admin/admin.php?page=complianz

A képen az Appearance fül látszik, a jobb oldali panelben a Soft cookie wall értesítéssel.

A fal hátterének módosítása

A sütifal háttérszínét és átlátszóságát egyéni CSS-sel állíthatod, a Custom CSS fülön (lásd Hozzájárulási sáv). A háttér színét rgba() értékkel adod meg: az első három szám a piros, a zöld és a kék összetevő, a negyedik (a, alfa) az átlátszóság. Az 1 teljesen fedő, a 0 teljesen átlátszó szín. Az rgba a HEX-színkódhoz (például #2daee1) hasonló, de a színt kiegészíti egy átlátszósági értékkel is.

Az alapértelmezett átlátszóság 0,7. A gyártó példájában ezt 0,5-re csökkentették, a színt pedig lilára (#693187) cserélték, így a fal halványabb és színes lett.

A sablon további formázásához használd az egyéni CSS-t is a Hozzájárulási sáv fejezet szerint.

Elmosás a sötét réteg helyett

Az alap puha sütifal sötét réteget tesz az oldal fölé, hogy a sávra irányítsa a figyelmet. Ha ennek helyett az oldal tartalmát szeretnéd elmosni, amíg a látogató nem választ, egyetlen CSS-szabály elég a Custom CSS fülön:

.cmplz-soft-cookiewall {
  backdrop-filter: blur(10px);
}

A 10px az elmosás erőssége; nagyobb érték erősebb elmosást ad.

Görgetés tiltása a sáv megjelenése alatt

A görgetést is letilthatod, amíg a látogató a sávot el nem fogadja vagy el nem utasítja. Ehhez PHP-kód kell, amely egy osztályt tesz a body elemre, és CSS, ami ezzel az osztállyal letiltja a görgetést. Javasolt MU-pluginba tenni (lásd Kész sávváltozatok és kapcsolók MU-pluginnal):

<?php
// A sáv állapotának figyelése: amíg nincs döntés, a body kapja a cmplz-noscroll osztályt.
function cmplz_noscroll_js() {
  ob_start(); ?>
  <script>
    document.addEventListener("cmplz_banner_status", function(consentData) {
      var status = consentData.detail;
      if ( status === 'dismissed' ) {
        document.querySelector('body').classList.remove('cmplz-noscroll');
      } else {
        document.querySelector('body').classList.add('cmplz-noscroll');
      }
    });

    document.addEventListener("cmplz_cookie_warning_loaded", function() {
      if ( cmplz_get_banner_status()!=='dismissed' ) {
        document.querySelector('body').classList.add('cmplz-noscroll');
      }
    });
  </script>
  <?php
  $script = ob_get_clean();
  $script = str_replace(array('<script>', '</script>'), '', $script);
  wp_add_inline_script( 'cmplz-cookiebanner', $script);
}
add_action( 'wp_enqueue_scripts', 'cmplz_noscroll_js', PHP_INT_MAX );

// A görgetés tiltása a sáv CSS-ébe írva.
function cmplz_noscroll_css() {
  ?>
  .cmplz-noscroll {
    margin: 0;
    height: 100vh;
    overflow-y: hidden;
  }
  <?php
}
add_action( 'cmplz_banner_css', 'cmplz_noscroll_css' );

A kód a cmplz_banner_status és a cmplz_cookie_warning_loaded eseményre figyel: ha a sáv betöltődött és még nincs döntés, a body megkapja a cmplz-noscroll osztályt, a döntés után az osztály lekerül. A sáv CSS-ének újragenerálásához futtasd le a Wizard → Finish → Finish lépést, és ürítsd a gyorsítótárat.