The cookie settings JavaScript is a lightweight script designed to support SiteBuilder Layouts which modify a cookie in order to store the user's cookie preferences.
Here we'll explain how you can use the features of this script while modifying a layout.
After the user first sets their preferences, these preferences will be stored in a cookie with the name: sg-cookie-policy-settings which will expire after a year.
The Liquid will ensure the script is only loaded once on the page.
Use the data-sg-cookie data attribute to set an element as a control that will modify the settings. The value of the data-attribute will be the value of the preferences cookie when set. Theoretically you can set it to any string, but normally you'll want to differentiate between a simple set of choices.
Since the script is loaded asynchronously, the controls won't have event listeners attached immediately. Meanwhile the user may be eager to access the rest of the site and may try to dismiss the popup as soon as possible. Therefore, we recommend you start the controls with styling which indicates that they are disabled. You can then use the data-sg-cookie-btn-enabled data-attribute to store classes which you would like to use to style the button once it is enabled. The script will replace the value of the class attribute with the value of the data-attribute when the script is ready.
Note in this example above, we also use Liquid context.cookies.sg-cookie-policy-settings to set a default checked value to the radio currently active on page load.
Since this uses data-attributes, we don't have a callback function on success. Instead we set a custom event on the document:
Accessing event.details will let you know the current state of the preferences, however, you could of course use JS to check the cookies directly.
The script does not actually remove google analytics cookies which are already set. Layouts will disable any analytics script wrapped inside their Liquid logic. If you do wish to delete analytics cookies directly, we recommend you do this in a function called after the success event.