Web Cookie Notice

Exemples :

Voir dans le dossier examples pour Laravel et Wordpress.

Étape 1 : implémentation

Ajouter le package avec npm

• https://lab.s-web.fr/ldc-web/projets/laravel-base-project/-/snippets/8

• npm i @ldc-web/cookie-notice --save-dev

  Lien doc Gitlab

Browser

• Pour inclure directement dans le navigateur, les fichiers compilés sont dans dist/browser.

Laravel

• Ajouter dans le projet, les fichiers au bon endroit :

  • cn-cookies.blade.php dans le dossier resources/view/vendor/
  • standard.blade.php dans le dossier resources/view/vendor/cookie-notice-templates

• Inclure dans le layout général @include('vendor.cn-cookies'). Cela doit être avant le stack('scripts')

• !! Ne pas oublier de modifier les configurations dans le blade vendor.cn-cookies.

• Ensuite inclure les éléments style et script

  • SCSS

    @import "~@ldc-web/cookie-notice";
    // ou
    @import "~@ldc-web/cookie-notice/dist/css/cookie-notice-standard.css";
    // ou
    @import "~@ldc-web/cookie-notice/src/scss/themes/standard";
    

  • TS/JS

    // Dans fo.ts
    import type CookieNotice from "@ldc-web/cookie-notice";
    window.CookieNotice = CookieNotice;
    
    // Dans index.d.ts
    ...
    import CookieNotice from "@ldc-web/cookie-notice";
    
    declare global {
        ...
    
        interface Window {
            CookieNotice: typeof CookieNotice;
            ...
        }
    }
    

Wordpress

• Ajouter dans le projet, les fichiers au bon endroit :

  • cn-cookies.php dans le dossier resources/view/vendor/
  • standard.php dans le dossier resources/view/vendor/cookie-notice-templates
  • Inclure dans le footer général <?php include('resources/views/vendor/cn-cookies.php'); ?>.

• !! Ne pas oublier de modifier les configurations dans le fichier resources/views/vendor/cn-cookies.

• Ensuite inclure les éléments style et script

  • SCSS

    @import '../../node_modules/@ldc-web/cookie-notice';
    

    OU

  • CSS

    inclure directement le fichier compilé cookie-cn.css présent dans dist/browser dans le fichier css du projet

  • JS

    ajouter directement le fichier compilé cookie-cn.js présent dans dist/browser dans le fichier js du projet

Étape 2 : customisation

• Couleurs : Pour l'instant les variables SASS sont personalisables. Elle se trouvent ici node_modules/@ldc-web/cookie-notice/src/scss/variables.scss

Étape 3 : finalisation

• Ajouter un bouton Gestion des cookies dans le footer et lui attribuer la classe cn-cookie-link.
• Si des vidéos sont présentes, attribuer aux <div> la classe cn-youtube pour Youtube, et/ou cn-vimeo pour Viméo.