cookies consent on shopify section - quick

cookies-consent-shopify-section

{% comment %}
below is a rough starting section for cookies consent as a shopify block
modify as required
using cookieconsent.js with few options
suits most use cases
expand with settings as required after clarifying with clients on spec
{% endcomment %}


{% if section.settings.show_cookies %}
<!-- Cookie Consent -->
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
  window.addEventListener("load", function(){
    window.cookieconsent.initialise({
      "palette": {
        "popup": {
          "background": "#ebe9e6"
        },
        "button": {
          "background": "#b1282d"
        },
      },
      content: {
        header: 'Cookies used on the website!',
        message: '{{ section.settings.title }}',
        dismiss: '{{ section.settings.button_text }}',
        allow: 'Allow cookies',
        deny: 'Decline',
        link: '{{ section.settings.more_text }}',
        href: '{{ section.settings.more_url }}',
        close: '&#x274c;',
        policy: 'Cookie Policy',
        target: '_blank',

      },
      "position": "bottom-right"
    })});
</script>
<script>
  function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  }
</script>
{% endif %}
{% schema %}
  {
    "name": "Cookies consent",
    "settings": [
      {
        "id": "show_cookies",
        "type": "checkbox",
        "label": "Show cookies consent?",
        "default": true
      },
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "This website uses cookies to ensure you get the best experience on our website."
      },
		{
        "type": "text",
        "id": "button_text",
        "label": "consent text",
        "default": "Got it!"
      },
	{
        "type": "text",
        "id": "more_text",
        "label": "More link text",
        "default": "Learn More"
      },
{
        "type": "url",
        "id": "more_url",
        "label": "More info link url"
      }

]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}