Add Sticky Buttons for Improved UX in SuiteCommerce

Sticky buttons are anchor elements that retain their position on a page as users scroll through content. This feature is especially valuable on lengthy pages where a prominently-placed call-to-action button helps guide users to subsequent pages. A practical example is the Proceed to Checkout button, which remains fixed on the screen while users explore items in the shopping cart.

Implementing sticky buttons can be effectively accomplished using the jQueryExtras/jQuery.scStickyButton.js plugin provided by Oracle NetSuite. Below is a step-by-step guide on how to add sticky buttons to your web page for enhanced interaction:

Steps to Add a Sticky Button

1. Update the View

1.1 Add the Plugin as a Dependency

Start by including jQuery.scStickyButton.js as a dependency in your view:

1define('MyCompany.MyExtension.MyModule.View',   
2[
3      'mycompany_myextension_mymodule.tpl',
4      'MyCompany.MyExtension.MyModule.SS2Model',   
5      'Backbone',
6      'jQuery.scStickyButton'
7       ],
8function (
9      mycompany_myextension_mymodule_tpl,
10      MyModuleSS2Model,
11      Backbone,
12      jQueryscStickButton
13) {
14    // ...
15});

1.2 Create a Listener

Next, create a listener to initialize the plugin. This is done by defining the showContent() method:

1showContent: function showContent () {
2          var self = this;
3       this.application.getLayout().showContent(this).done(function () {
4        self.initPlugins();
5       });
6   }

1.3 Define initPlugins() Method

Define the initPlugins() method to make a button element sticky. This method utilizes jQuery to locate elements with the sticky attribute and executes scStickyButton() on them:

initPlugins: function initPlugins () {
    this.$el.find('[data-action="sticky"]').scStickyButton();
}

2. Update the Template

2.1 Define the Sticky Button Element

In your HTML template, define the element you want to make sticky by adding a custom data attribute:

<a class="some-button-class" data-action="sticky" href="some-path" data-hashtag="#">Sticky button!</a>

The attribute data-action="sticky" designates the button as sticky. Additional attributes can be included as necessary.

3. Test the Extension

3.1 Local Server Login

Finally, log in to your local server to verify that the sticky button appears at the top of the page, staying visible while scrolling down.

Key Consideration

Note: The jQuery.scStickyButton.js plugin activates only when the user’s screen width is less than 768 pixels. On larger screens, buttons will stay fixed in their original positions.

Key Takeaways

• Sticky buttons enhance user navigation on long pages.
• Use jQuery.scStickyButton.js for implementation in SuiteCommerce projects.
• Ensure adaptive operation based on screen size for optimal user experience.

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