Create Footer View with Cookies Banner in SuiteCommerce

The footer view adds functionality to display a cookies policy link on your SuiteCommerce site. When users click this link, a cookies banner appears at the top of the page, and the view scrolls to the window's top. This guide will show you how to implement this using SuiteScript and jQuery.

Implementing the Footer View

To create the footer view, you need to define a new view in your SuiteCommerce application. This view will handle the click event of the link that brings up the cookies banner.

JavaScript Code Overview

Below is the JavaScript code defining the footer view, utilizing SCView, and linking the click event to an event handler.

1"text-purple-400">define('NetSuite.MyCookiesExtension.Footer.View',   
2  [
3    'SCView',
4    'jQuery',
5    'netsuite_mycookiesextension_footer.tpl'
6  ], 
7  "text-purple-400">function (SCViewComponent, jQuery, netsuite_mycookiesextension_footer_tpl) {
8    'use strict';
9    
10    "text-purple-400">var SCView = SCViewComponent.SCView;
11    
12    "text-purple-400">function MyCookiesExtensionFooterView() {
13      SCView.call("text-purple-400">this);
14      
15      "text-purple-400">this.template = netsuite_mycookiesextension_footer_tpl;      
16    }
17    
18    MyCookiesExtensionFooterView.prototype = Object.create(SCView.prototype);
19 
20    MyCookiesExtensionFooterView.prototype.constructor = MyCookiesExtensionFooterView;
21 
22    MyCookiesExtensionFooterView.prototype.getContext = "text-purple-400">function() {
23      "text-purple-400">return;
24    }
25    
26    MyCookiesExtensionFooterView.prototype.getEvents = "text-purple-400">function() {
27      "text-purple-400">return {
28         'click #myCookiesExtensionCookiesLink': 'showCookiesBanner' 
29      }
30    }
31    
32    MyCookiesExtensionFooterView.prototype.showCookiesBanner = "text-purple-400">function() {
33      jQuery('#myCookiesExtensionBanner').show();
34      window.scrollTo(0,0);
35    }
36    
37    "text-purple-400">return MyCookiesExtensionFooterView;
38  }
39);

In this code, several key points are essential:

• Template Initialization: The view begins by setting a template that defines the visual structure of the footer.
• Event Binding: The getEvents method binds the click event to the showCookiesBanner function.
• Banner Display: The function showCookiesBanner controls the visibility of the cookies banner and scrolls the window to the top.

HTML Template for Footer View

An HTML template defines how the footer and link appear on the webpage. Below is the HTML structure required for the footer:

<div id="myCookiesExtensionFooter" class="" style="display: block; margin-left: 20px; padding: 10px;">
  <a href="#" id="myCookiesExtensionCookiesLink">Cookies Policy  </a>
</div>

This code snippet creates a simple footer with a clickable link labeled 'Cookies Policy'. When clicked, it will activate the previously defined JavaScript function to show the cookies banner.

Conclusion

By following these steps, you can effectively create a footer view for your SuiteCommerce website that promotes user awareness of cookies policy through a visible link and interactive banner.

Source: This article is based on Oracle's official NetSuite documentation.