Terms of Use Pop-Up
This document provides a step-by-step guide on creating an independent extension for Suite Commerce Advanced (SCA) to add a Terms of Use Pop-Up. The extension will allow users to review and acknowledge the terms.
Working of Extension
Created a standard extension that mimics the behaviour of a live chat pop-up, with a specific focus on presenting the terms of use. The extension should include features such as an agree and disagree checkbox along with a close button.
Upon selecting the agree option, the terms of use URL will be displayed, allowing users to review and acknowledge the terms.
Thoroughly test the extension in two accounts, ensuring that unit testing is completed successfully.
Additionally, create a bundle for easy installation and confirm its successful deployment.
This extension aims to provide a user-friendly and accessible way for website visitors to interact with and understand the terms of use.
Code for extension:
define(
'JJ.TermsPopup.TermsPop'
, [
'jj_termspopup_termspop.tpl', 'js.cookie'
]
, function (
jj_termspopup_termspop_tpl, Cookies
) {
'use strict';
return {
mountToApp: function mountToApp(container) {
var body = $('body');
var TermsPopupView = Backbone.View.extend({
template: jj_termspopup_termspop_tpl,
events: {
'click [data-action="TermsOfUse"]': 'termsOfUse',
},
initialize: function () {
this.render();
},
termsOfUse: function () {
var dateTOU = SC.CONFIGURATION.TermsPop.expDate;
Cookies.set('TOU', dateTOU, { expires: 365 });
this.$el.hide();
},
render: function () {
var termsPopConfig = SC.CONFIGURATION.TermsPop;
var dateTOU = termsPopConfig.expDate;
var termsofuseUrl = termsPopConfig.termsofuseUrl;
var termsofuseUrlContent = termsPopConfig.termsofuseUrlContent;
var termsofusePopupTitle = termsPopConfig.termsofusePopupTitle;
var termsdate = dateTOU !== Cookies.get('TOU');
this.$el.html(jj_termspopup_termspop_tpl({
termsofuseUrl: termsofuseUrl,
termsofuseUrlContent: termsofuseUrlContent,
termsofusePopupTitle: termsofusePopupTitle,
termsdate: termsdate
}));
body.append(this.$el);
return this;
}
});
new TermsPopupView();
}
};
}
);
Benefits of Terms of Use
Terms of Use Presentation:
The extension presents the terms of use in a user-friendly and interactive manner, mimicking a live chat pop-up.
Users are prompted with agree and disagree checkboxes to provide a clear indication of their acceptance or rejection of the terms.
Close Button:
The extension includes a close button, allowing users to dismiss the terms of use pop-up if they choose not to engage with it.
Agree Checkbox:
Users can select the agree checkbox if they accept the presented terms of use.
Disagree Checkbox:
A disagree checkbox is available for users who do not agree with the terms, providing an option to decline.
Terms of Use URL Display:
Upon selecting the agree option, the extension displays the terms of use URL, enabling users to review the detailed terms before final acceptance.
User Acknowledgment:
The extension ensures that users have actively acknowledged the terms of use by interacting with the agree checkbox.