Add a Sticky Button

Sticky buttons are anchor elements that remain at a fixed location on a page even as a user scrolls through it. This feature is particularly useful on pages that have a lot of content placed vertically and require a strategically placed, call-to-action button that directs users to the next page.

An example of this is the Proceed to Checkout button that is displayed as soon as an item is added to the shopping cart and remains there as the user scrolls through the page to look for other items to add to the cart.

The Proceed to Checkout button remains in place even as the user is scrolling the page and viewing other items.

To add this type of interaction, you can implement the use of the jQueryExtras/jQuery.scStickyButton.js plugin - an additional module provided by Oracle NetSuite. The module is available as part of the SuiteCommerce Advanced source code. Download the file and extract jQuery.scStickyButton.js to the JavaScript subdirectory of your custom module: Workspace/<extension_name>/Modules/<module_name>/JavaScript. For example, Workspace/MyExtension/Modules/Main/JavaScript.

Note:

The jQueryExtras/jQuery.scStickyButton.js plugin is used only when the user's screen width is less than 768 pixels. On larger screens, the buttons remains stationary at its original position on the page.

To add a sticky button to your web page:

Update the view

Add jQuery.scStickyButton.js as a dependency to your view:

                    define('MyCompany.MyExtension.MyModule.View',   
[
      'mycompany_myextension_mymodule.tpl',
      'MyCompany.MyExtension.MyModule.SS2Model',   
      'Backbone',
      'jQuery.scStickyButton'
       ],
function (
      mycompany_myextension_mymodule_tpl,
      MyModuleSS2Model,
      Backbone,
      jQueryscStickButton
) {
    // ...
}
);

Create a listener to initialize the plugin where the main layout view is rendered by defining the showContent() method as follows:

                    showContent: function showContent () {
          var self = this;
       this.application.getLayout().showContent(this).done(function () {
        self.initPlugins();
       });
   }

Define the initPlugins() method to make a button element sticky. This method uses jQuery to search the view's rendered HTML for elements with the sticky attribute and calls scStickyButton() on those elements. The scStickyButton() method is the initialization method in jQuery.scStickyButton that converts elements into sticky buttons. Define the initPlugins() method as follows:
```
                    initPlugins: function initPlugins () {
    this.$el.find('[data-action="sticky"]').scStickyButton();
} 

                  
```

To update the template:
1. Define the element that you want to stick to the top of your view by adding a custom data attribute to an HTML element:
```
                    <a class="some-button-class" data-action="sticky" href="some-path" data-hashtag="#">Sticky button!</a> 

                  
```
2. The data-action="sticky" attribute identifies the button element as a sticky button. You can also add other attributes, if required.
Test the extension:
1. Log in to your local server and check that the sticky button is displayed at the top of the page as you scroll down.

To add a sticky button to your web page:

Related Topics