shop.config, the HTML source code of the layer, a link to reopen it, and the supplementary CSS. The design example takes into account the CJEU ruling of October 1, 2019, according to which a pre-checked checkbox does not constitute valid consent.
You can try out the layer and configuration in the sample shop v8s-demoshop.websale.biz.
Guide: Consent to data processing (cookies) · Reference: shop.config, AgreementCookies section
The four building blocks
The layer consists of four parts that belong together. If you leave one of them out, the whole thing doesn’t work.The example requires Bootstrap 4.1.3 and jQuery 3.4.1. It also needs the WEBSALE module
ws-module-agreementcookies, which provides the two functions ws_agreementcookies_set and ws_agreement_updatecheckboxes. This is the only WS module that requires just jQuery and not the base component.The arrow icon on the expander comes from Font Awesome. Use a different icon there if your shop doesn’t include Font Awesome.Building block 1: The AgreementCookies section
The example defines ten services and combines them into three groups: convenience features, shop optimizations, and social media with marketing. All ten are set toOptIn with the preselection unchecked, so no checkbox is pre-checked.
+WEBSALEService, the other eight don’t. With +WEBSALEService, you tell the shop that the entry represents a built-in WEBSALE feature. The shop then disables this feature itself if the visitor doesn’t consent. The eight entries without this line are purely declarations to the visitor; you have to disable the third-party services yourself in the template.
The order of the groups in the layer comes from the order of the <+ConsentGroupInfo> blocks, not from the order of the services. Groups that have no <+ConsentGroupInfo> end up at the end.
Building block 2: The HTML layer
In its collapsed state, the layer shows only the explanation, one checkbox for everything, and the save button. Only the “Details” expander reveals the groups with their individual services.HTML layer based on Bootstrap 4.1.3
HTML layer based on Bootstrap 4.1.3
How the layer is structured
The outer wrapper determines whether the layer is visible at all:display: none omitted and the layer becomes visible. That’s why a simple show() is enough for the link further below.
The group loop doesn’t run via a dedicated loop tag, but via the dynamic loop:
~AC-ConsentGroupList~ returns all group IDs as a comma-separated list in the order from shop.config. DC-DynamicLoop1 splits this list, and AC-ConsentGroup switches to the matching group on each iteration. Within it, {@AC-Entry(…)} loops over the services of exactly this group.
The three levels of checkboxes are built the same way. Each one gets its classes from a _CheckboxClass tag and its check mark from a _CheckboxIsChecked tag, and each one calls ws_agreement_updatecheckboxes() on click. This function keeps the three levels in sync: if the visitor checks a group, all services in it are checked as well.
Building block 3: Link to reopen
The visitor must be able to withdraw their consent at any time. To do this, place a link that shows the layer again, for example on the privacy page.For this to work, the layer from building block 2 must be on the same page. So include it in all templates via an include, not just in the start page.
Building block 4: Custom CSS
These rules come in addition to the standard Bootstrap classes. They pin the layer to the bottom of the screen and, from the Bootstrap breakpoint width upward, limit it to 500 pixels.isFixed class itself. It makes the expanded layer use the full screen and become scrollable when there are many services. #cookieDetailToggler.open > i.fa flips the arrow on the expander.
The
cursorPointer class from the HTML example isn’t included in this CSS. Add it yourself, otherwise the visitor won’t see a pointer cursor on the expander:The layer gets
z-index: 9999999. Check that no other element of your shop sits on top of it, especially sticky headers and cart previews.What the example doesn’t show
The example uses only part of the section’s capabilities. The following points are added here; the detailed description belongs on the reference page forshop.config.
Other values for Allow and Type
With both opt-out variants, consent is considered given as long as the visitor doesn’t make a decision. With
OptIn, it’s the other way around.
Other WEBSALE services
In addition toCookieBasket and WelcomeCookie from the example, the shop knows four more built-in services that it disables itself when consent is missing.
An entry can have multiple
+WEBSALEService lines if one checkbox should cover several built-in services.
Other entries per service
Two pitfalls in the configuration
The preselection from
Preselection only applies as long as there is no decision for the service yet. As soon as the visitor has saved once, their decision counts, and a later change to Preselection doesn’t change that.