Displaying a Pop-Up upon User Login in SuiteCommerce IN My Account

Description

This guide walks through implementing a pop-up window on user login using SuiteCommerce best practices. The pop-up will:

1. Display after user login and redirect to the “My Account” page.
2. Show the company logo, content, and a “Close” button with the label “I understand.”
3. Appear once per session and will not block other website functionalities.

Step-by-Step Implementation

1. Extending the LoginRegisterLoginView

We start by updating the login view to set a local storage variable upon successful login. This ensures the pop-up will appear on the “My Account” page.

_.extend(LoginRegisterLoginView.prototype, {
    template: jj_login_register_login_tpl,
    getContext: _.wrap(LoginRegisterLoginView.prototype.getContext, function (fn) {
        var context = fn.apply(this, _.toArray(arguments).slice(1));
        // Set the popupShown variable to true
        localStorage.setItem('popupShown', true);
        return context;
    })
});

2.Extending the HeaderMenuView

Next, extend the header menu view in the “My Account” entry point to check and display the pop-up if the variable is true.

_.extend(HeaderMenuView.prototype, {
    getContext: _.wrap(HeaderMenuView.prototype.getContext, function (fn) {
        var context = fn.apply(this, _.toArray(arguments).slice(1));
        try {
            var showPopup = localStorage.getItem('popupShown');
            if (showPopup === 'true') {
                this.loginpopup();
                localStorage.setItem('popupShown', false);
            }
            context.showPopup = showPopup;
        } catch (e) {
            console.log('Error in popup', e);
        }
        return context;
    }),
    // Function to show the pop-up
    loginpopup: function () {
        var modalView = new MyAccountAnnouncementpopup();
        var appLayout = container.layout;
        appLayout.showInModal(modalView);
    }
});

3.Creating the MyAccountAnnouncementpopup View

Create a Backbone view to define the behavior of the pop-up.

define('MyAccountAnnouncementpopup', [
    'Backbone',
    'jquery',
    'jj_Announcementpopup.tpl'
], function (Backbone, $, jj_Announcementpopup_tpl) {
    return Backbone.View.extend({
        template: jj_Announcementpopup_tpl,
        modalClass: 'myaccount_announcement_popup',
        events: {
            'click .popup-close': 'closePopup'
        },
        render: function () {
            // Render the template
            this.$el.html(this.template);
            return this;
        },
        closePopup: function () {
            // Close the modal when the button is clicked
            this.$el.closest('.modal').modal('hide');
        }
    });
});

4.Designing the Template

Here is the HTML template for the pop-up:

<div data-backdrop="static" data-keyboard="false" class="close-global-button">
    <img src="../site/Image/myaccountpopup_img.png" alt="Logo" />
    <button type="button" class="popup-close">I understand</button>
</div>

The data-backdrop=”static ” and data-keyboard=”false” ensure that users can’t close the modal accidentally by clicking outside or pressing the ESC key.

5.Key Considerations

1. Session Handling: Ensure the local storage variable popupShown is set to True only on user login.
2. Reusability: The MyAccontAnnouncementpopup view is designed for flexibility and can be reused or modified for different purposes.
3. Non-Blocking: Ensure that the pop-up doesn’t interfere with the website’s functionality or responsiveness.

6.CSS fro remove the close button to show the label I understand

.myaccount_announcement_popup {
    .global-views-modal-content-header-close {
        visibility: hidden;
        /* Hides the original content */
    }


    button.global-views-modal-content-header-close::before {
        content: "I understand";
        visibility: visible;
        border: 1px solid #ad2e17;
        text-transform: capitalize;
        font-size: 14px;
        padding: 5px 10px;
        color: #b32b12;
        // box-shadow: inset 0px 0px 6px rgb(118 28 28 / 50%);
    }
}

7.Testing

1. Log in to verify the pop-up appears on the “My Account” page.
2. Confirm the pop-up is displayed only once per login session.
3. Test on multiple browsers and devices to ensure compatibility.