Cookie Manager

Documentation: CookieManager Component

The CookieManager Component is a Vue.js component designed to handle cookie consent and settings on a website. It provides users with options to accept or reject cookies and customize their preferences via a modal interface.

Overview

The CookieManager Component includes:

Cookie Consent Banner: Displays a banner prompting users to accept or reject cookies.

Cookie Settings Modal: A modal dialog where users can manage their cookie preferences in detail.

Model Documentation

The CookieManager Component uses a model object to control its behavior and appearance. Here's a breakdown of the properties used in the model:

Model Structure

The model object should include the following properties:

id: String
A unique identifier for the component. This is used for the component’s id attribute and for targeting the component with JavaScript.

expirationDate: Date
The date when the cookie consent will expire. This is used to determine how long the consent preferences are valid.

blocks: Array
An array of cookie blocks, where each block represents a category of cookies with its details.

Example Model

Here is an example of the model object:

{
  "id": "cookie-manager",
  "expirationDate": "2024-12-31T23:59:59Z",
  "blocks": [
    {
      "title": "Analytics Cookies",
      "toggle": {
        "isEnabled": false,
        "cookieCategory": "analytics",
        "isReadOnly": false
      },
      "rows": [
        {
          "columnNames": [
            { "title": "Name", "description": "Google Analytics" },
            { "title": "Domain", "description": "example.com" },
            { "title": "Usage", "description": "Analytics" },
            { "title": "Expiration", "description": "2 years" }
          ]
        }
      ]
    }
  ]
}

Component Structure

The component is implemented using Vue.js features:

HTML Template: Defines the structure and appearance of the cookie consent banner and settings modal.

JavaScript Logic: Manages data initialization, methods, and lifecycle hooks.

HTML Template

The HTML template handles the rendering of the cookie banner and settings modal. It uses Vue.js directives to dynamically generate the content based on the model data:

JavaScript

The JavaScript section manages data initialization, methods, and lifecycle hooks:

Explanation

Props:

model: The component receives a model object as a prop, containing configuration and data used for rendering the cookie consent banner and settings modal.

Data:

showCookieBanner: Controls the visibility of the cookie consent banner.

necessaryCookieNames: Array of names for necessary cookies, used for validation and display.

Methods:

initializeCookieConsent(): Initializes the component based on existing cookie consent data.

enableScriptsFromConsentTypes(consentTypes): Enables scripts based on the user's consent preferences.

cookieTableIsNotEmpty(block): Checks if the cookie table for a given block contains rows.

cookieTableHeadersNotEmpty(): Checks if the cookie table headers are defined and not empty.

handleCookieSave(): Handles saving the user's cookie preferences from the settings modal.

HandleCookieRejectAll(): Handles rejecting all cookies and hides the consent banner.

HandleCookieSaveAll(): Handles accepting all cookies and hides the consent banner.

Mounted Lifecycle Hook:

mounted(): Initializes the cookie consent state when the component is mounted.

Steps to Create Your Own CookieManager Component

Define the Vue Component:

Use Vue.component() or app.component() to register the component.

Create the Template:

Structure the HTML to include a cookie banner and a settings modal.

Use Vue.js directives (v-if, v-for, :class, etc.) for dynamic rendering.

Implement JavaScript Logic:

Define props for the model object.

Initialize data and implement methods for managing cookie consent and preferences.

Use lifecycle hooks to handle initialization and state management.

Feel free to adjust the documentation based on your component’s specific needs and functionalities!

Documentation: CookieManager Component#

Overview#

Model Documentation#

Model Structure#

Example Model#

Component Structure#

HTML Template#

JavaScript#

Explanation#

Steps to Create Your Own CookieManager Component#