Modals (popups) are common features on today’s websites. Use cases include displaying alerts, messages, confirmation prompts, and much more. SuiteCommerce has a very easy way to add custom and/or native popups to your extensions. See the code example below for a simple walkthrough.
About Implementing a SuiteCommerce Modal
The simplest and easiest way to implement a modal is to use the native “showInModal” function that exists on the Layout Frontend Extensibility API component. While there is no documentation for using the function, it exists and is often used in the SuiteCommerce Source Code. In the example below, we will show how to use this function inside a simple event listener function on a view.
Code Sample: SuiteCommerce Website Popup
define("Modal.Example.View", [
"Backbone",
"some_template.tpl",
"GlobalViews.Confirmation.View",
"GlobalViews.Message.View"
], function (
Backbone,
some_template,
GlobalViewsConfirmationView,
GlobalViewsMessageView
) {
"use strict";
return Backbone.View.extend({
template: some_template,
//declare an event listener
events: {
"click button": "showModal",
},
//write the function handling your event
showModal: function (event) {
//build your view object
//use either a custom view, or an existing view. See example below:
//GlobalViewsConfirmationView example
let view = new GlobalViewsConfirmationView({
callBack: function () {
//code that runs if the user "confirms" the prompt
},
cancelCallBack: function () {
//code that runs if the user "cancels" the prompt
},
confirmLabel: "Continue",
cancelLabel: "Go Back",
title: "Approval Pending",
body: this.confirmationMessage,
autohide: true,
});
//GlobalViewsMessageView example
let view = new GlobalViewsMessageView({
message: messages, //an array of messages
type: 'warning', //types include 'warning', 'error', 'success', 'info'
closable: false //closable boolean
});
//you could also use a custom view if needed.
//be sure to pass the application/container to your view for use here.
//use the "showInModal" function to render the popup
this.application.getLayout().showInModal(view);
},
});
});Pre-built SuiteCommerce Popup
Don't want to build your own website popup for SuiteCommerce or SCA? There are SuiteCommerce apps available to easily add a popup to your website. Depending on your use case and the level of development support you have in-house, hiring a SuiteCommerce developer to implement one of these existing solutions can save you time and money.
Interested in a pre-built modal for your SuiteCommerce website? Check out the Pop Up Solution for SuiteCommerce, a SuiteCommerce app built by our very own developers here at Anchor Group! It is fully customizable, to fit a variety of use cases.
Author: Sam Gagliardi
Got stuck on a step in this article?
We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!
FREE SuiteCommerce Book
If you liked this article, you'll LOVE our book on SuiteCommerce! Order the free SuiteCommerce book today, and we'll even pay for shipping!
Oracle NetSuite Alliance Partner & Commerce Partner
If you have general questions about SuiteCommerce or more specific questions about how our team can support your business as you implement NetSuite or SuiteCommerce, feel free to contact us anytime. Anchor Group is a certified Oracle NetSuite Alliance Partner and Commerce Partner equipped to handle all kinds of NetSuite and SuiteCommerce projects, large or small!
We are a premium SuiteCommerce agency that creates powerful customer portals. Unlike our competitors, we have already solved your problems.