Although the Porsche Design System does not rely on browser cookies, a blocking overlay is shown asking the user to
activate browser cookies in case those are disabled completely.
Therefore, we provide a ready to use partial in all @porsche-design-system/components-{js|angular|react|vue} packages
which needs to be injected before the closing </body> of your index.html.Force display of cookies fallback
OptionDescriptionTypeDefaultcdnDecides from which CDN the resources are loaded.'auto' | 'cn''auto'formatDefines the output format of the partial. By default, it returns a html string. For jsx it returns a jsx element. For sha256 it returns a SHA-256 hash of the innerHTML to use in a Content Security Policy (CSP).'html' | 'jsx' | 'sha256''html'
When using jsx in the format option, it is necessary to have react/jsx-runtime as a dependency in the project
included.
Project integration differs based on the project setup.
The following showcases the most common ways.
prev
next
<!-- index.html -->
<body><!--PLACEHOLDER_COOKIES_FALLBACK_SCRIPT--></body>
<!-- package.json (tested on macOS, the script may need to be adjusted depending on the operating system used) -->
<!-- make sure to adjust the path to the index.html file -->
"scripts": {
"prestart": "yarn replace",
"replace": "placeholder='<!--PLACEHOLDER_COOKIES_FALLBACK_SCRIPT-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getCookiesFallbackScript())') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html" <!-- Alternative: Force using China CDN -->
"replace": "placeholder='<!--PLACEHOLDER_COOKIES_FALLBACK_SCRIPT-->' && partial=$placeholder$(node -e 'console.log(require(\"@porsche-design-system/components-js/partials\").getCookiesFallbackScript({ cdn: \"cn\" }))') && regex=$placeholder'.*' && sed -i '' -E -e \"s^$regex^$partial^\" index.html"}
Output
The result of this partial looks like this:
<script>!function(){if(!(window.navigator||navigator).cookieEnabled){const o=document.createElement("script");o.src="https://cdn.ui.porsche.com/porsche-design-system/fallbacks/cookies.a9ad23a.js",document.body.appendChild(o)}}();
</script>
// Alternative: Force using China CDN
<script>!function(){if(!(window.navigator||navigator).cookieEnabled){const o=document.createElement("script");o.src="https://cdn.ui.porsche.cn/porsche-design-system/fallbacks/cookies.a9ad23a.js",document.body.appendChild(o)}}();
</script>
As soon as the Cookies Fallback script initializes, it looks for the obligatory lang attribute defined in the
html tag. Support is given for the following formats, e.g.:
lang="en"lang="en_US"lang="en-US"
If none of these languages can be found, it will fall back to en.
There always might be a case where something goes wrong. Here are some possible answers:Q: Why does the translation not get recognized automatically?
A: Mostly this is a result of false order of script loading and setting translation key by the application. It's
required that the lang attribute in the html tag is defined with the correct value before the Cookies
Fallback script gets initialized.
A: The translation key is not part of the provided keys (see "Translations")
A: The translation key has not the correct format (see "Translations")Q: Why are there no implementation guidelines for my JS framework?
A: Implementing a third party script can be done in many ways regarding the setup of your application. So there
isn't a solely true way to integrate it in a specific framework. Just one rule of thumb: It should be initialized
as late as possible.
