Implemented: Cookie Consent In E-Commerce

ecommerce/config/EcommerceUiLabels.xml

@@ -789,6 +789,21 @@
         <value xml:lang="zh">继续步骤</value>
         <value xml:lang="zh-TW">繼續步驟</value>
     </property>
+    <property key="EcommerceCookieConsentTitle">
+        <value xml:lang="en">This website uses cookies</value>
+    </property>
+    <property key="EcommerceCookieConsentMessage">
+        <value xml:lang="en">We use cookies to provide our services. By using this website, you agree to this.</value>
+    </property>
+    <property key="EcommerceCookieConsentMoreLinkLabel">
+        <value xml:lang="en">More</value>
+    </property>
+    <property key="EcommerceCookieConsentAcceptButtonLabel">
+        <value xml:lang="en">Accept</value>
+    </property>
+    <property key="EcommerceCookieConsentAdvancedButtonLabel">
+        <value xml:lang="en">Customize</value>
+    </property>
     <property key="EcommerceDataResourceId">
         <value xml:lang="da">Dataresurse ID</value>
         <value xml:lang="de">Datenressource ID</value>

ecommerce/data/DemoWebSitePublishPointData.xml

@@ -98,4 +98,24 @@ under the License.
         contentName="Store Policies 2" description="Store Policies 2 Description" mimeTypeId="text/html" localeString="en_US" createdDate="2001-05-13 12:00:00.000" createdByUserLogin="admin"/>
     <ContentAssoc contentId="WebStoreCONTENT" contentIdTo="STORE_POLICIES2" mapKey="policies2" contentAssocTypeId="SUB_CONTENT"
         fromDate="2001-05-13 12:00:00.000" createdDate="2001-05-13 12:00:00.000" createdByUserLogin="admin"/>
+
+    <DataResource dataResourceId="COOKIE_POLICY" dataResourceTypeId="ELECTRONIC_TEXT" mimeTypeId="text/html" localeString="en_US" isPublic="Y" dataResourceName="Store Policies"/>
+    <ElectronicText dataResourceId="COOKIE_POLICY">
+        <textData><![CDATA[
+            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+            <p>
+                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
+                Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
+                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+            </p>
+        ]]></textData>
+    </ElectronicText>
+    <Content contentId="COOKIE_POLICY" contentTypeId="DOCUMENT" ownerContentId="WebStoreCONTENT" dataResourceId="COOKIE_POLICY"
+            contentName="Cookie Policy" description="Cookie Policy Description" mimeTypeId="text/html" localeString="en_US" createdDate="2001-05-13 12:00:00.000" createdByUserLogin="admin"/>
+    <ContentAssoc contentId="WebStoreCONTENT" contentIdTo="COOKIE_POLICY" mapKey="cookiePolicy" contentAssocTypeId="SUB_CONTENT"
+                fromDate="2001-05-13 12:00:00.000" createdDate="2001-05-13 12:00:00.000" createdByUserLogin="admin"/>
 </entity-engine-xml>

ecommerce/template/includes/Header.ftl

@@ -16,6 +16,21 @@ KIND, either express or implied.  See the License for the
 specific language governing permissions and limitations
 under the License.
 -->
+<script>
+$(document).ready(function() {
+  if (jQuery.fn.bsgdprcookies !== undefined) {
+    jQuery('body').bsgdprcookies({
+        title: '${uiLabelMap.EcommerceCookieConsentTitle}',
+        message: '${uiLabelMap.EcommerceCookieConsentMessage}',
+        moreLink: '/ecommerce/control/CookiePolicy',
+        moreLinkLabel: ' ${uiLabelMap.EcommerceCookieConsentMoreLinkLabel}',
+        acceptButtonLabel: '${uiLabelMap.EcommerceCookieConsentAcceptButtonLabel}',
+        advancedButtonLabel: '${uiLabelMap.EcommerceCookieConsentAdvancedButtonLabel}',
+        allowAdvancedOptions: false
+    });
+  }
+});
+</script>
 <div class="container-fluid">
   <div class="row align-items-center">
     <div class="col">

ecommerce/webapp/ecommerce/WEB-INF/controller.xml

@@ -125,6 +125,11 @@ under the License.
     <request-map uri="main"><security https="false" auth="false"/><response name="success" type="view" value="main" save-current-view="true"/></request-map>
     <request-map uri="policies"><security https="false" auth="false"/><response name="success" type="view" value="policies"/></request-map>
 
+    <request-map uri="CookiePolicy">
+        <security https="false" auth="false"/>
+        <response name="success" type="view" value="CookiePolicy"/>
+    </request-map>
+
     <!-- Session Setting Requests -->
     <request-map uri="setSessionLocale">
         <security https="false" auth="false"/>
@@ -1862,6 +1867,7 @@ under the License.
     <view-map name="error" page="/error/error.jsp"/>
     <view-map name="main" type="screen" page="component://ecommerce/widget/CommonScreens.xml#main"/>
     <view-map name="policies" type="screen" page="component://ecommerce/widget/CommonScreens.xml#policies"/>
+    <view-map name="CookiePolicy" type="screen" page="component://ecommerce/widget/CommonScreens.xml#CookiePolicy"/>
     <view-map name="login" type="screen" page="component://ecommerce/widget/CommonScreens.xml#login"/>
     <view-map name="requirePasswordChange" type="screen" page="component://ecommerce/widget/CommonScreens.xml#requirePasswordChange"/>
 

ecommerce/webapp/ecommerce/js/bsgdprcookies/.gitignore

@@ -0,0 +1 @@
+jquery-3.3.1.min.js

ecommerce/webapp/ecommerce/js/bsgdprcookies/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Aleksander Woźnica
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

ecommerce/webapp/ecommerce/js/bsgdprcookies/README.MD

@@ -0,0 +1,139 @@
+# bsgdprcookies by Aleksander Woźnica
+A jQuery based plugin that shows bootstrap modal with cookie info. It is GDPR/RODO compatible. The plugin shows the message on the users first visit and then every 30 days (by default). 
+
+Here is a demo page hosted by [jqueryscript.net](https://www.jqueryscript.net/demo/GDPR-Cookie-Consent-Bootstrap-4-bsgdprcookies/)
+
+You can choose between two options:
+* Simple (message with accept button)
+
+![simple_screenshot](https://user-images.githubusercontent.com/33174446/43984662-3e155618-9d02-11e8-8e89-288c3fb27779.png)
+* Advanced (message, customize and accept button)
+
+![advanced_screenshot](https://user-images.githubusercontent.com/33174446/43984678-4c82dfe0-9d02-11e8-8330-979f46bbd00c.png)
+
+## Usage
+1. Include Bootstrap 
+> Here is how: https://getbootstrap.com/docs/4.1/getting-started/introduction/
+2. Include plugin script __(must be after jQuery)__
+```html
+<script src="jquery.bs.gdpr.cookies.js"></script>
+```
+3. Initialise __bsgdprcookies__
+```javascript
+// Example with default settings
+$(document).ready(function() {
+    $('body').bsgdprcookies();
+});
+```
+```javascript
+// Example with custom settings
+var settings = {
+    message: '(...)',
+    messageMaxHeightPercent: 30,
+    delay: 1000,
+    OnAccept : function() {
+        console.log('Yay! User accepted your cookies window!');
+    }
+}
+
+$(document).ready(function() {
+    $('body').bsgdprcookies(settings);
+});
+```
+
+If you want to give the user possibility to choose again, add html button: 
+```html
+<button id="cookiesBtn" role="button">Choose!</button>
+```
+and javascript code:
+```javascript
+//(...)
+$('#cookiesBtn').on('click', function(){
+    $('body').bsgdprcookies(settings, 'reinit');
+});
+```
+
+More examples can be found in the repository.
+
+## Settings
+Setting | Default Value | Description
+------ | ------------- | -----------
+id | 'bs-gdpr-cookies-modal' | id of the modal
+class | empty | additional modal classes
+title | 'Cookies & Privacy Policy' | modal title
+backdrop | 'static' |  A click area for dismissing shown modals when clicking outside the modal
+message | 'Your cookie message...' | Message
+messageScrollBar | false | Attach vertical scroll to the message (requires to specify messageMaxHeightPercent)
+messageMaxHeightPercent | 25 | Max message height in %
+delay | 1500 | Delay before showing modal (in ms)
+expireDays | 30 | Days to show the accept modal again
+moreLinkActive | true | Adds more link at the end of the message
+moreLinkLabel | 'More informations..' | More link text
+moreLinkNewTab | true | Open new tab when user clicks more link
+moreLink | 'privacy-policy.php' | More link 
+acceptButtonLabel | 'Accept' | Accept button text
+allowAdvancedOptions | false | Activate advanced options (customize button)
+advancedTitle | 'Select which cookies you want to accept' | Text above advanced options checkboxes
+advancedAutoOpenDelay | 1000 | Time (in ms) to automatically show customize options (when "reinit" is set)
+advancedButtonLabel | 'Customize' | Customize button text
+OnAccept | function() {} | Specify what to do after acceptance
+advancedCookiesToSelect | | see below
+
+## How to set custom cookies to select (__advancedCookiesToSelect__)
+
+Setting | Description
+------- | -----------
+name | Custom cookie name
+title | Checkbox label
+description | Description displayed when hovering
+isFixed | If __true__ the option will always be selected
+
+```javascript
+// Default values
+advancedCookiesToSelect: [
+    {
+        name: 'necessary',
+        title: 'Necessary',
+        description: 'Required for the site to work properly',
+        isFixed: true
+    },
+    {
+        name: 'preferences',
+        title: 'Site Preferences',
+        description: 'Required for saving your site preferences, e.g. remembering your username etc.',
+        isFixed: false
+    },
+    {
+        name: 'analytics',
+        title: 'Analytics',
+        description: 'Required to collect site visits, browser types, etc.',
+        isFixed: false
+    },
+    {
+        name: 'marketing',
+        title: 'Marketing',
+        description: 'Required to marketing, e.g. newsletters, social media, etc',
+        isFixed: false
+    }
+],
+```
+
+## Methods
+
+`$.fn.bsgdprcookies.GetUserPreferences` - returns user preferences saved in cookie
+
+`$.fn.bsgdprcookies.PreferenceExists` - check if user preference exists in cookie (returns true/false)
+
+## Styling
+
+I dont include any css files. Feel free to adapt it to your website design!
+
+## Author
+
+[Aleksander Woźnica](https://github.com/Aleksander98)
+
+## License
+
+This plugin is available under the MIT license.
+
+> The plugin has been inspired by [ihavecookies](https://github.com/ketanmistry/ihavecookies)

ecommerce/webapp/ecommerce/js/bsgdprcookies/demo_advanced.html

@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+
+    <title>Hello, world!</title>
+    <style>
+        .jumbotron {
+            margin-top: 50px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="jumbotron">
+                    <h1 class="display-4">bsgdprcookies by Aleksander Woźnica</h1>
+                    <p class="lead">A jQuery based plugin that shows bootstrap modal with cookie info. It is GDPR/RODO compatible. The plugin shows the message on the users first visit and then every 30 days (by default).</p>
+                    <hr class="my-4">
+                    <button id="cookiesBtn" class="btn btn-primary btn-lg" role="button">Advanced Version</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="jquery-3.3.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+
+    <!-- Cookies JavaScript -->
+    <script src="jquery.bs.gdpr.cookies.js"></script>
+    <script type="text/javascript">
+        var settings = {
+            message: 'This is your cookies message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam scelerisque, magna quis iaculis vulputate, ipsum sem commodo risus, sed egestas ipsum neque ut orci. Nulla ultrices dignissim pharetra. Pellentesque nec placerat dui. Mauris porta risus vitae nulla rutrum convallis. Aliquam elementum consequat ligula, sed malesuada nunc. Nam imperdiet a eros ac imperdiet. <b> Read more  ',
+            moreLinkLabel: 'here.</b>',
+            messageMaxHeightPercent: 30,
+            delay: 1000,
+            allowAdvancedOptions: true,
+            OnAccept : function() {
+                console.log('Yay! User accepted your cookies window!');
+                console.log('User preferences');
+                var preferences = $.fn.bsgdprcookies.GetUserPreferences();
+                console.log(preferences);
+
+            }
+        }
+
+        $(document).ready(function() {
+            $('body').bsgdprcookies(settings);
+
+            $('#cookiesBtn').on('click', function(){
+                $('body').bsgdprcookies(settings, 'reinit');
+            });
+        });
+    </script>
+</body>
+</html>

ecommerce/webapp/ecommerce/js/bsgdprcookies/demo_simple.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+
+    <title>Hello, world!</title>
+</head>
+<body>
+    <div class="container" style="margin-top: 50px;">
+        <div class="row">
+            <div class="col-sm-12">
+                <div class="jumbotron">
+                    <h1 class="display-4">bsgdprcookies by Aleksander Woźnica</h1>
+                    <p class="lead">A jQuery based plugin that shows bootstrap modal with cookie info. It is GDPR/RODO compatible. The plugin shows the message on the users first visit and then every 30 days (by default).</p>
+                    <hr class="my-4">
+                    <button id="cookiesBtn" class="btn btn-primary btn-lg" role="button">Simple Version</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
+    <!-- Cookies JavaScript -->
+    <script src="jquery.bs.gdpr.cookies.js"></script>
+    <script type="text/javascript">
+        var settings = {
+            message: 'This is your cookies message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam scelerisque, magna quis iaculis vulputate, ipsum sem commodo risus, sed egestas ipsum neque ut orci. Nulla ultrices dignissim pharetra. Pellentesque nec placerat dui. Mauris porta risus vitae nulla rutrum convallis. Aliquam elementum consequat ligula, sed malesuada nunc. Nam imperdiet a eros ac imperdiet. <b> Read more  ',
+            moreLinkLabel: 'here.</b>',
+            messageMaxHeightPercent: 30,
+            delay: 1000,
+            OnAccept : function() {
+                console.log('Yay! User accepted your cookies window!');
+            }
+        }
+
+        $(document).ready(function() {
+            $('body').bsgdprcookies(settings);
+
+            $('#cookiesBtn').on('click', function(){
+                $('body').bsgdprcookies(settings, 'reinit');
+            });
+        });
+    </script>
+</body>
+</html>