CookieManager

Purpose

The CookieManager component renders the cookie consent banner and cookie preference UI.

It supports:

A simple banner view (title, description, primary actions)

A detailed settings view with vertical tabs:

Info

Required

Dynamic categories (from settings blocks)

Consent actions:

Accept all cookies

Reject all cookies

Accept preferences only (save selected categories)

Consent expiration/versioning:

If consent version changes, the banner is shown again

Google Consent Mode update via gtag("consent", "update", ...)

Inputs (model contract)

Model shape (storefront example)

{
  "name": "CookieManager",
  "view": "Default",
  "section": "SectionFooter",
  "settings": {
    "daysEffective": 30,
    "blocks": [
      {
        "title": "Sample title",
        "content": "Sample content",
        "toggle": {
          "cookieCategory": "analytics",
          "isEnabled": true,
          "isReadOnly": false
        }
      },
      ...
    ],
    "consentVersion": "Sample consent version",
    "id": "Component Id",
    "section": "SectionFooter",
    "type": "NoirCookieManager",
    "name": "CookieManager",
    "configuredInContentApi": true,
    "view": "Default",
    "displayName": "",
    "cssClass": ""
  },
  "translations": {
    "cookieCardTitle": "Sample translation",
    "cookieCardDescription": "Sample translation",
    "cookieSettings": "Sample translation",
    "...": "..."
  }
}

Required fields

settings.id
Used for wrapper id: comp-{{ id }}

settings.daysEffective (number)
Used to compute the consent expiration date (today + daysEffective).

settings.blocks[] (array)
Defines the dynamic cookie categories shown in the settings tabs.

Each block may include:

title (string)

content (string, optional)

toggle object with:

cookieCategory (string, e.g. analytics, advertising)

isEnabled (boolean)

isReadOnly (boolean)

Optional fields

settings.cssClass
Applied to wrapper only when non-empty and not (UNDEFINED).

settings.consentVersion (string)
Used to determine whether previous consent is still valid.
If missing/changed, the banner is shown again.

JavaScript

Global object

The component exposes a global object:

It’s initialized from Liquid via Alpine:

x-data='cookiemanagerdefault.initComponent(daysEffective, blocks, consentVersion, currentTab)'

initComponent(...) returns Alpine state + actions for:

detecting whether consent is already set (and still valid)

persisting consent server-side via servicesreusabledefault.setShopranosCookie(...)

updating Google Consent Mode via gtag("consent", "update", ...)

initComponent

Factory that returns Alpine state + handlers for cookie consent (banner/details UI, persistence via servicesreusabledefault.setShopranosCookie(...), and Google Consent Mode update).

init

Runs on Alpine mount and decides whether to display the banner based on the _shopranos cookie and consent version.

setExpirationDate

Computes the consent expiration date (now + daysEffective) and returns it as a timestamp string.

acceptPreferencesCookies

Saves the currently selected cookie categories as consent, persists it via setShopranosCookie(...), updates Google consent, and hides the banner.

acceptAllCookies

Enables all non-readonly categories, persists consent, updates Google consent, and hides the banner.

rejectAllCookies

Disables all non-readonly categories, persists minimal consent (required only), updates Google consent, and hides the banner.

getCookieConsentTypes

Reads the _shopranos cookie and returns the consent types as a dot-split array.

getCookieManagerConsentTypes

Builds the consent types array from the current toggle state (always includes required).

updateGoogleConsent

If gtag is not a function:

logs console.error("gtag function not found.") and returns

Creates default denied consent state:

ad_user_data, ad_personalization, ad_storage, analytics_storage = "denied"

Grants:

analytics_storage if consent includes "analytics"

all ad-related fields if consent includes "advertising"

Calls:

gtag("consent", "update", consentState)

This is Google Consent Mode v2 style fields (ad_user_data, ad_personalization, etc.). Make sure your GTM/gtag setup is compatible.

This function is intentionally “best effort”: consent is still persisted even if gtag is missing.

getCookie

Basic cookie reader:

splits document.cookie on ; <name>=

returns the cookie value or null

This is fine for simple cookie values. If the cookie can be URL-encoded, decode it with decodeURIComponent(...) when needed.

Global Alpine stores (used by CookieManager)

Alpine.store("toast")

Used to display errors when persisting consent fails.

Common pattern:

Alpine.store("toast").removeAll();
Alpine.store("toast").add(message, "ic-warning", "error", true);

Services / API calls

CookieManager persists consent via the services layer:

servicesreusabledefault.setShopranosCookie(value, expirationDate)

This posts to the backend (/api/cookies) so consent is stored server-side as well.

Dependencies

Alpine.js

Alpine.store("toast")

servicesreusabledefault.setShopranosCookie(...)

gtag (optional; if missing, consent update logs an error)

Notes

Consent is stored in a cookie named _shopranos using a dot-separated format:

required.analytics.advertising.version-<consentVersion>

If consentVersion changes, the component forces the banner to show again (re-consent).

If gtag isn’t available, Google Consent Mode won’t update (the component will still persist consent).

Extras

Template behavior (Liquid + Alpine)

The component initializes via:

x-data='cookiemanagerdefault.initComponent(daysEffective, blocks, consentVersion, currentTab)'

Banner vs details view

showCookieBanner controls whether the UI is visible.

showCookiesDetails toggles between:

the simple banner view

the detailed settings view (tabs)

Tabs

The detailed view includes base tabs:

info

required

…and additional tabs generated from settings.blocks[] where toggle.cookieCategory exists.

CookieManager

Purpose#

Inputs (model contract)#

Model shape (storefront example)#

Required fields#

Optional fields#

JavaScript#

Global object#

initComponent#

init#

setExpirationDate#

acceptPreferencesCookies#

acceptAllCookies#

rejectAllCookies#

getCookieConsentTypes#

getCookieManagerConsentTypes#

updateGoogleConsent#

getCookie#

Global Alpine stores (used by CookieManager)#

Alpine.store("toast")#

Services / API calls#

Dependencies#

Notes#

Extras#

Template behavior (Liquid + Alpine)#

Banner vs details view#

Tabs#