We begin with a simple example to enhance numeric entering by allowing the customer to adjust values using spinner ? e. q. small up and down arrows, that makes value increment or decrement.

Article 4 - 01Figure 1. Spinner widget

This widget is created on top of regular input text element, with some scripting.


<input type="text" value="" class="spintest">

require([
     'jquery',
     'jquery/ui',
     ],
     function($, spinner) {
          $(".spintest").spinner();
     }
);

Listing 1. Creating simple spinner

Javascript code above will create Spinner widget with zero as the initial value. The customer can increment or decrement its value just by pressing up and down arrows.

Spinner can be set with certain minimum and maximum limit, as well as increment step. It can be done by entering additional options to the spinner function. Let us make example above a little more complex: set lower and upper limits as 0 and 100 and make incremental step equal to 5.


require([
     'jquery',
     'jquery/ui',
     ],
     function($, spinner) {
          $(".spintest").spinner({
               max: 100,
               min: 0,
               step: 5,
          });
     }
);

Listing 2. Spinner with limits and step

These are not the only parameters, available for this widget. Here are some interesting options, that can turn Spinner to a powerful numeric value entering tool:

  • incremental. By default this option equals to false, and increment size gets from step property. But it can be binded to callback function, with integer parameter, which is the count of subsequent click on spins arrows, which returns increment step size. This allows us to change the speed of value spinning, which is very useful for big numbers.
  • spin. It’s a callback event-handling function, which has two parameters ? event and ui. It can be used to set the value of spinner field each time customer clicks on spinner arrows.
  • numberFormat. By default, it equals to ‘n’, which means numeric value. If the store has Globalize library available, this parameter can be set to ‘C’ and used to spin currency values. This parameter used along with culture format, which sets locale and therefore ? which currency is spinned.

Let us create a spinner with dynamic increment rate. If the customer holds an arrow and spin rolled 10 times, we increase step size to 10. If he continues holding the button and value increase exceeds 100, then we adjust step to 100.


require([
     'jquery',
     'jquery/ui',
     ],
     function($, spinner) {
          $(".spintest").spinner({
               max: 10000,
               min: 0,
               incremental: function (spins) {
                    if(spins > 10 && spins < 20) {
                         return 10;
                    }
                    if(spins >= 20) {
                         return 100;
                    }
                    return 1;
               }
          });
     }
);

Listing 3. Controlling spin speed

Consider the code on this listing. Notice block with a check whether spins count is above 20. We can not check spinner value here, so we do it indirectly. When customer holds an arrow for 10 spins, we make step 10. But to detect an increase in value over 100, we just need to check for 20 spins passed (as 10 times of 10 gives 100).

But using spin callback we can control spinner value as well. For example, let’s make cycle spinner ? by forcibly setting its value to the minimum, when it’s spinned to the upper limit, and vice versa. Here is the code:


require([
     'jquery',
     'jquery/ui',
     ],
     function($, spinner) {
          $(".spintest").spinner({
               max: 10000,
               min: -1,
               spin: function (event, ui) {
                    if (ui.value > 9999) {
                         $(this).spinner( "value", 0);
                         return false;
                    } else if (ui.value == -1) {
                         $(this).spinner( "value", 10000);
                    return false;
               }
          }
     });
}
);

Listing 4. Cycling value spinning

Function spin is fired every time spin button clicked and new value set, but before it’s displayed. So we can just check for value equity to the limits, and forcibly set a new value. Notice, that min property should be one unit lesser, than actual -it allows the customer to still spin value down even when lower limit reached.

Using numberFormat and culture properties allows us to create complex currency spin widget. But to make it work store should have Globalize installed locally. This Javascript library is very complex itself and used to create clean Javascript code, separated from locale-dependent customizations, so it exceeds topic of this article. Information on Globalize can be found here, and the example of custom currency spinner located here.

The Spinner is not the only widget to enhance numeric input. In the next article, Slider will be considered, which also allows very interesting approaches to data input visualization.

Ready-to-deploy project with this example is available from our Github.

Related Posts
Fraud Detection: Killing Extension To Save Time And Money Without Losing Customers 5 great ways to improve your customer satisfaction How to Build Great Customer Service for Magento Store?

Enjoyed the Read?

Don’t miss our next article!