Integration

Setup

You need to integrate the shipped TypoScript (e.g. in your theme Extension) and add a cObject into your Page Template/Layout

TypoScript

Include the shipped TypoScript File into your Theme TypoScript Setup:

@import "EXT:supi/Configuration/TypoScript/setup.typoscript"
Copied!

Fluid/HTML

Include the cObject in your Page Layout

<f:cObject typoscriptObjectPath="lib.elements.supi" />
Copied!

Configuration

Template and Views

The Template, Partials and Layout Root Paths. You can override them or add own Paths, if You need.

templateRootPaths.10 = EXT:your-theme/Resources/Private/Templates/
partialRootPaths.10 = EXT:your-theme/Resources/Private/Partials/
layoutRootPaths.10 = EXT:your-theme/Resources/Private/Layouts/
Copied!

Page Settings

page.includeJS.supi

Property
page.includeJS.supi
Description
Includes the main JavaScript file into Your TYPO3 instance.

page.includeCSS.supi

Property
page.includeCSS.supi
Description
Includes the main CSS file into Your TYPO3 instance.

SUPI_JS object

Services like Matomo or Google Analytics might require to insert an inline script into the page's source code. To prevent the Content Security Policy from blocking these inline scripts, this extension adds hashes for each script on the fly.

Have a look into the TypoScript setup in setup.typoscript, where the key page.headerData.31337 defines two SUPI_JS objects, which can be overwritten in your own TypoScript.

Settings

Name Default Value Type
enabled 1 bool
hideOverlayOnButtonCe 1 bool
hideAutoEssential 0 bool
detailed 1 bool
perItemDetail 1 bool
perItemSelect 1 bool
showBigSwitch 0 bool
theme default string
position 1 int
enableYoutubeOnce 0 bool
enableSimpleMapsOnce 0 bool
essentialIncludesYoutube 0 bool
essentialIncludesMaps 0 bool
debugClass be_user_login string
cookieDomain   string
cookieTTL.all 30 int
cookieTTL.reduced 7 int
gdpr.uid 1 int
elements   array
button   array
spotify   array

enabled

Property
enabled
Data type
bool
Default
1
Description
Enable or Disable the Banner. This could be useful in some cases

hideOverlayOnButtonCe

Property
hideOverlayOnButtonCe
Data type
bool
Default
1
Description
Hides the overlay if the cookie button CE is visible (mostly used on the dataprotection page)

hideAutoEssential

Property
hideAutoEssential
Data type
bool
Default
0
Description
Hide the "Functional Cookies only" button
Images
Notes
@TODO: we might remove this due to DARK PATTERN behaviour

detailed

Property
detailed
Data type
bool
Default
1
Description
Enables or disables detailed view
Notes
@TODO: we need to discuss this. we might remove this or at least do not show the individual btn config

perItemDetail

Property
perItemDetail
Data type
bool
Default
1
Description
Enables or disables detailed view for each item
Notes
@TODO: we need to discuss this. we might remove this due to GDPR regulations

perItemSelect

Property
perItemSelect
Data type
bool
Default
1
Description
Enable select per item

showBigSwitch

Property
showBigSwitch
Data type
bool
Default
0
Description
Enable big switch-to-detail in overview if detail is active. works only with hideAutoEssential
Notes
@TODO: we need to discuss this. we might remove this due to GDPR regulations - DARK PATTERN

theme

Property
theme
Data type
string
Default
default
Description
Theming Name
Notes
@TODO: IMHO we can remove this and build a simple but useful theme - most websites are styling all over but the main theme is always the same

position

Property
position
Data type
int
Default
1
Description
Position of the Cookie Banner (0   Bottom-Left, 1   Center-Center)
Notes
@TODO: IMHO we can remove this and build a simple but useful theme - most websites are styling all over but the main theme is always the same

enableYoutubeOnce

Property
enableYoutubeOnce
Data type
bool
Default
0
Description
Set to 1 to enable the load-once button for youtube elements
Images
Notes
@TODO: refactor youtube element

enableSimpleMapsOnce

Property
enableSimpleMapsOnce
Data type
bool
Default
0
Description
Set to 1 to enable the load-once button for Google Maps elements
Images
Notes
@TODO: add translations and propper style

essentialIncludesYoutube

Property
essentialIncludesYoutube
Data type
bool
Default
0
Description
Youtube is enabled by essential
Notes
@TODO: we need to discuss this. due to GDPR regulations this might not be OK!

essentialIncludesMaps

Property
essentialIncludesMaps
Data type
bool
Default
0
Description
Google Maps is enabled by essential
Notes
@TODO: we need to discuss this. due to GDPR regulations this might not be OK!

debugClass

Property
debugClass
Data type
string

Default

Description
A CSS-Classname on the HTML-Body, that is needed, to output console.log() debug messages. Usually you have to set a addictional body-class via TypoScript reference: page.bodyTagCObject.

cookieDomain

Property
cookieDomain
Data type
string

Default

Description
Set a Domain Name for the Cookie Settings

cookieTTL.all

Property
cookieTTL.all
Data type
int
Default
30
Description
cookie time to live (in days) for allow all cookies

cookieTTL.reduced

Property
cookieTTL.reduced
Data type
int
Default
7
Description
cookie time to live (in days) for selected/ essential cookies

gdpr.uid

Property
gdpr.uid
Data type
int
Default
1
Description
page uid for the gdpr page
Image

elements

Property
elements
Data type
array

Default

Description
The configuration of all elements visible and usable in the EXT:supi banner
Example
see elements for a detailed description // @TODO: how to add a subpage in rst in the pagetree?

button

Property
button
Data type
array
Default
LLL Strings
Description
Text/ Translations of all Buttons visible in the Banner. Use LLL Strings to output translated strings
Example
button {
   allow {
       label = LLL:EXT:supi/Resources/Private/Language/locallang.xlf:banner.button.allow.label
       text = LLL:EXT:supi/Resources/Private/Language/locallang.xlf:banner.button.allow.text
   }
}
Copied!

spotify

Property
spotify
Data type
array
Default
Spotify Player attributes
Description
Configure the Spotify integration like url, player attributes and more
Example
spotify {
    url = https://open.spotify.com/embed/playlist/{id}
    playerAttr {
        width = 100%
        height = 380
        allowfullscreen = allowfullscreen
        allow = autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture
        style = border-radius:12px
    }
    enableDescription = LLL:EXT:supi/Resources/Private/Language/locallang.xlf:ce.spotify.enable.description
    enableToggle = LLL:EXT:supi/Resources/Private/Language/locallang.xlf:ce.spotify.enable.toggle
}
Copied!