Liqiud basics
Modules
API
Mailer
Cookies
On this page
Overview
The purpose of the cookie module is to present and handle the approving of cookies for people visiting WM3 websites. The developer version of the cookie module can be found here.
The components needed for the cookie module is as following:
| Template | Type | Description |
| cookie_banner | Include | Template structure for the cookie module |
| cookie-banner | Stylesheet (.sass) | The styling for the cookie module |
| cookies-eu-banner | JavaScript (.js) | Script for handling chosen cookies |
| on-cookies-response | JavaScript (.js) | Script for the presentation of chosen cookies |
Types of cookies
As of this moment, there are three variants of cookies for WM3.
- WM3-cookies (prefix _wm_)
- HL Design-cookies (prefix _hld_)
- Third part cookies
These are divided into the categories "Neccessary" and "Optional". Cookies used by WM3 and HL Design are seen as necessary cookies, whereas all third part cookies are seen as optional. WM3 cookies are cookies that are built in, by and for WM3. HL Design cookies are cookies that are created through the template module.
Usage
In order to use the cookie module you have to add the files stated in the table above into your webproject. You can find these files here. For this to work, don't forget to add the cookie_banner.inc at the end of the footer.inc, right before the closing tag.
</body>
...
{% include 'cookie_banner' %}
</html>
Add your own cookie
Cookies who are added through WM3 should be named with the prefix _wm_ and classed as necessary. Cookies who are added through the template module and meets the requirements below should be named with the prefic _hld_. These cookies won't show up in the cookie module since they are seen as necessary cookies. Keep in mind that this only refers to cookies with these requirements:
- Only used within the same website.
- Is not allowed to store personal information or user information of registered users to be shared with a third party.
- Is not allowed to store personal information or user information of unregistered users to be shared with any party including the company behind the website.
Read more about how you add a cookie for sharing information with other parties in the section Add a third party cookie.
Example of how to add a HL Design cookie
<script>
if (saveSomethingForLater) {
localStorage.setItem('_hld_somethings_cookie_name', 'cookie_value');
}
</script>
Add a third party cookie
The majority of third party cookies have a code snippet that you can implement in the header or footer of the webpage. In order for the cookie module to recognise this code snippet it has to be wrapped around the tag <cookie-wrapper>. The tag should include the attribute for, and the value needs to be the same name of the third party cookie. The value stated in the for attribute will be the name that is represented in the cookie module and used to fetch the information about the cookie (read more). The snippet needs to be commented out in the HTML by using <!-- ... -->. It's important to note that you can not use liquids built in comment tags ({% comment %} ... {% endcomment %}).
Example 1 of how to add a third party cookie
<cookie-wrapper for='facebook'>
<!--
<script>
console.log('Facebook pixel added');
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '12345'); // Insert your pixel ID here.
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" src="https://www.facebook.com/tr?
id=12345&ev=PageView&noscript=1" /></noscript>
-->
</cookie-wrapper>
Example 2 of how to add a third party cookie
<cookie-wrapper for='godisgruvan_statistik'>
<!--
<script>
var data = {
email: '{{ customer.email }}',
time: new Date().toLocaleString()
};
localStorage.setItem('godisgruvan_statistik', JSON.stringify(data));
</script>
-->
</cookie-wrapper>
...
<script>
if (localStorage.getItem('godisgruvan_statistik')) {
var data = JSON.parse(localStorage.getItem('godisgruvan_statistik'));
$ajax({
url: 'https://third_party.api.com',
visitor: data.email,
time: data.time
});
}
</script>
Add a description
In the moment, the text of cookie infomation is fetched from https://cookies.wm3.se/. To add information text for a third party cookie you create a new page. The webpage's URL needs to correspond to the value placed in the for attribute in the <cookie-wrapper> (read more). Create the third party cookie page as a child/subpage to the already existing page "Cookies".
Add a description for another language
In order to add cookie information text in another language you need to go to the webpage
https://cookies.wm3.se/ and change it to the desired locale/language. If the locale/language is missing, you add it like usual in Settings > General. When a new language is added, the same menu structure as the other languages must be followed.
If there is information text missing in the particular language, the default should be the English version of the text until the correct translation is added.
Updated: 2020-12-28
