Add a Sticky Button with jQuery.scStickyButton

In a previous article we talked about how you can add a push pane to your site to make better use of your site's real estate on mobile devices. In this article I want to tell you about another bit of functionality that you can use to improve things for your mobile users: sticky buttons.

The image above shows how we use sticky buttons in the shopping cart. As the shopper scrolls down on their mobile, the button to go to the checkout process remains 'stuck' to the top of the page as a constant call to action. This means that shoppers have a chance to review their cart before the checkout, but are still encouraged (and given easy access) to start the checkout process.

The following article will give you an insight into this functionality, in particular how you can add it to your own site.

Implementation Instructions

This functionality is provided by a custom jQuery plugin written by our development team. Called jQuery.scStickyButton, you can find it in Modules > suitecommerce > jQuery Extras, along with a few other proprietary plugins (such as jQuery.scPush, previously mentioned). The gist of how it works is that when the shopper scrolls, any button marked as a sticky button is checked to see if it is off the screen; if it is, a clone is made (including any event handlers) and stuck to the top.

So for the purposes of this tutorial, I'm going to add a sticky button to landing page of the My Account section so that when shoppers log in, they are encouraged to update their list of favorite artists. To do this, I'm going to create an override for the Overview module, specifically Overview.Home.View.js and overview_home.tpl.

Modify the View

In order to use the functionality, you need to add the plugin as a dependency in the view for the template you want it to be used in. So modify Overview.Home.View.js and add jQuery.scStickyButton as a dependency. Note that you don't need to name it in the function because you'll never call it directly by name. This also means that you should add it to the end of the list of dependencies so that you don't mess up the order.

After that, there are three other things that need to be in place. The first should already be there in Overview.Home.js, but you may need to add it to your view; edit the initialize function so that at a minimum it has the following:

initialize: function (options)
{
    this.application = options.application;
}

Next, you need to add or modify the showContent function to include:

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

Essentially, this code waits for the view to load and then runs the code in initPlugins, which we're going to add next:

initPlugins: function ()
{
    // any valid selector, data-action recommended
    this.$el.find('[data-action="sticky"]').scStickyButton();
}

As the comment indicates, you can choose whatever selector you like to apply the sticky buttons functionality to, but you should probably stick to our recommendations to prevent possible conflicts later on.

Modify the Template

With that completed and saved. You can move on to the template. What you put in your template is largely up to you but as long as it has data-action="sticky" on it (or whatever you changed the selector to). Keep in mind, too, that if you're using it to navigate to another page (and/or application) then you'll need to make it an anchor tag rather than a button. Anyway, for the point of this tutorial I'm going to modify overview_home.tpl and add the following to the top of the section tag:

<a class="overview-home-artists-button" data-action="sticky" href="artists" data-hashtag="#">Update your Artists List!</a>

If you save the template and visit your local site you'll see something like the following, stuck to the top of the page when you scroll:

But you'll notice that while it's stuck at the top, it doesn't stand out much — so you'll obviously need to style it in line with your site's style. For me, I'm going to use the standard styles and add the following to _overview-home.scss:

.overview-home-artists-button {
    @extend .button-large;
    @extend .button-generic;
    @extend .button-secondary;
}

Now this'll create a big button that'll look good on mobiles. Naturally, depending on what template you're adding this functionality to, you'll need to make adjustments so it doesn't look out of place for shoppers with bigger screens. Of course, you could always add in some media queries so that the styling only applies at certain resolutions to avoid something like the following:

Summary

The sticky button functionality is an example of an extra that we provide along wih the core SuiteCommerce Advanced functionality. You can use it to quickly enhance a page where you want to keep an important button in focus. For reference, we use this functionality on the shopping cart page and you can refer to that page when implementing this functionality yourself (specifically, Cart > cart_detailed.tpl and its associated files).

Further Reading