This article demonstrates the Barebones theme's tools and styles for formatting online store forms.
Number fields
With the help of the Barebones theme's spinners.js plugin, you can add the +/- buttons to form number fields, which makes it easier to use them, especially on mobile devices.
The plugin requires jQuery to function properly.To add jQuery to a page, use the {SupportScripts} tag.
The default theme includes jQuery by default.
The plugin can be found in the default theme's file /scripts/plugins/spinners.js.
The button layout can be defined in the file /styles/scss/modules/_spinners.scss.
In the default theme, the spinners.js plugin has been used on product pages for selecting the product quantity.
The plugin can be enabled by initializing it in the theme. You can initialize the plugin with the MCF.Spinners.init() command.
Once initialized, the spinners.js plugin will add the +/- buttons automatically to all <input type="number"> fields.
Form layout
The form and input field layout can be defined in the /styles/scss/common/_form.scss file.