95 lines
4 KiB
Markdown
95 lines
4 KiB
Markdown
# Web Cookie Notice
|
|
|
|
<div style="text-align: center;">
|
|
|
|
<!-- Link for icons : https://github.com/Ileriayo/markdown-badges -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
## 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](https://docs.gitlab.com/ee/user/packages/npm_registry/)
|
|
|
|
## 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`](./examples/laravel/cn-cookies.blade.php) dans le dossier `resources/view/vendor/`
|
|
- [`standard.blade.php`](./examples/laravel/templates/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`](./examples/wordpress/cn-cookies.php) dans le dossier `resources/view/vendor/`
|
|
- [`standard.php`](./examples/wordpress/templates/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`](./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.
|