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"
Fluid/HTML¶
Include the cObject in your Page Layout
<f:cObject typoscriptObjectPath="lib.elements.supi" />
Tip
Best Practice
Add the cObject Part at the very end of the Page.
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/
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.
Tip
Best Practice
Remove the Default CSS/JS implementations and integrate it into Your frontend workflow/ pipeline. All SCSS/TypeScript Sources are available in the EXT:supi folder.
Settings¶
Name |
Default Value |
Type |
|---|---|---|
1 |
bool |
|
1 |
bool |
|
0 |
bool |
|
1 |
bool |
|
1 |
bool |
|
1 |
bool |
|
0 |
bool |
|
default |
string |
|
1 |
int |
|
0 |
bool |
|
0 |
bool |
|
0 |
bool |
|
0 |
bool |
|
be_user_login |
string |
|
string |
||
30 |
int |
|
7 |
int |
|
1 |
int |
|
array |
||
array |
||
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
}
}
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
}