Dropdown to select items with quantities
npm install item-quantity-dropdownDropdown menu to select items with quantities
!Demo
- jquery: ^3.0.0
- Download the script here and include it as shown below
- Download the stylesheet here and include it as shown below
``html`
···
···
`shell`
yarn add item-quantity-dropdownor
bower install item-quantity-dropdown --save
Then import/require it:
`javascript`
import 'item-quantity-dropdown';
import 'item-quantity-dropdown/lib/item-quantity-dropdown.css';
require('item-quantity-dropdown');
require('item-quantity-dropdown/lib/item-quantity-dropdown.css');
`html`
`javascript`
$(document).ready(() => {
$('.iqdropdown').iqDropdown({ [options] });
});
#### Dropdown options using data attributes
`html`
#### Item specific using data attributes
`html`
···
#### Globals on initialization
`javascript`
{
// max total items
maxItems: Infinity,
// min total items
minItems: 0,
// text to show on the dropdown override data-selection-text attribute
selectionText: 'item',
// text to show for multiple items
textPlural: 'items',
// optionally can use setSelectionText function to override selectionText
setSelectionText: (itemCount, totalItems) => { / return string / },
// buttons to increment/decrement
controls: {
position: 'right',
displayCls: 'iqdropdown-item-display',
controlsCls: 'iqdropdown-item-controls',
counterCls: 'counter'
},
// fires when an item quantity changes
onChange: (id, count, totalItems) => {},
// return false to prevent an item decrement
beforeDecrement: (id, itemCount) => {},
// return false to prevent an item increment
beforeIncrement: (id, itemCount) => {}
}
#### Selection text
Default value.
`javascript${totalItems} item // if total items is 1${totalItems} items // if total items is not 1`
Data attribute data-selection-text override default value.
`html`
Property selectionText override data attribute
`javascript`
options.selectionText = 'item';
options.textPlural = 'items';
Function setSelectionText override selectionText property.
`javascript`
options.setSelectionText = function setSelectionText(itemCount, totalItems)
Arguments:
- itemCount
Return selection text
A demo is included here
`shell`install dependencies
yarnstart the project
yarn start
Now open up http://localhost:8080
`shell``install dependencies
yarnmake a css and js bundle
yarn build
The build script outputs the following (minified) files:
- item-quantity-dropdown.min.js
- item-quantity-dropdown.min.css