SweetAlert2 is a powerful JavaScript library designed to replace native browser alerts with customizable, and responsive pop-up modals in SuiteCommerce Advanced (SCA) websites. It significantly enhances the user experience by supporting features such as icons, animations, and fully configurable buttons—making it ideal for confirmations, notifications, and form-related interactions.
Example Implementation
The example below demonstrates how to use SweetAlert2 in Elbrus version to show a success message when an item is added to the cart on an SCA website:
- Add the below CDN links of sweet alert2 inside the initialize method.
if (JSON.stringify(new XMLSerializer().serializeToString(document)).indexOf(‘https://cdn.jsdelivr.net/npm/sweetalert2@3.0.0/dist/sweetalert2.min.js’) === –1) {
jQuery(‘head’).append(jQuery(‘<script src=”https://cdn.jsdelivr.net/npm/sweetalert2@3.0.0/dist/sweetalert2.min.js”></script>’));
}
if (JSON.stringify(new XMLSerializer().serializeToString(document)).indexOf(‘https://cdn.jsdelivr.net/npm/sweetalert2@3.0.0/dist/sweetalert2.min.css’) === –1) {
jQuery(‘head’).append(jQuery(‘<link href=”https://cdn.jsdelivr.net/npm/sweetalert2@3.0.0/dist/sweetalert2.min.css” rel=”stylesheet” />’));
}
- Pass the message content as an object inside the swal() method.
swal({
title: ‘Cart Limit Reached!’,
text: “Your cart currently contains 100 SKUs, which is the maximum supported per order. To purchase additional items, please create a new order.”,
type: ‘warning’,
confirmButtonText: ‘Close’
});
Alert type
- Success – ‘success’
- Error – ‘error’
- Info – ‘info’
- Warning – ‘warning’
- Question – ‘question’
Common properties used in the object passed to swal()
- title – Sets the main heading of the alert modal.
- text – Provides the message or description shown below the title.
- icon or type – Defines the alert type:
'success','error','warning','info', or'question'. - confirmButtonText – Customizes the text on the confirmation button.
- cancelButtonText – Sets the label for the cancel button (used with
showCancelButton). - showCancelButton – A boolean that determines whether to display a cancel button.
- html – Allows you to use HTML instead of plain text for richer content.
- footer – Adds a footer section to the modal, often used for links or notes.
- timer – Automatically closes the alert after a specified time (in milliseconds).
- input – Adds an input field for user responses (e.g.,
'text','email','select'). - customClass – Lets you apply custom CSS classes to style different parts of the modal.