PHPackages                             siteation/magento2-module-enhanced-qty - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. siteation/magento2-module-enhanced-qty

AbandonedArchivedMagento2-module[Utility & Helpers](/categories/utility)

siteation/magento2-module-enhanced-qty
======================================

Adds qty buttons next to each qty input field.

1.0.3(5y ago)9620MITJavaScript

Since Dec 27Pushed 3y ago1 watchersCompare

[ Source](https://github.com/Siteation/magento2-enhanced-qty)[ Packagist](https://packagist.org/packages/siteation/magento2-module-enhanced-qty)[ RSS](/packages/siteation-magento2-module-enhanced-qty/feed)WikiDiscussions main Synced today

READMEChangelog (4)Dependencies (1)Versions (5)Used By (0)

Siteation - Magento 2 Module Enhanced Qty
=========================================

[](#siteation---magento-2-module-enhanced-qty)

[![Packagist Version](https://camo.githubusercontent.com/f3788be8d373285571820ae175af2ab5ce9daea52f28f6083aa4e73f524dd3ba/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f736974656174696f6e2f6d6167656e746f322d6d6f64756c652d656e68616e6365642d717479)](https://packagist.org/packages/siteation/magento2-module-enhanced-qty)

> **Warning** We stopped supporting Luma, this module will no long recive any updates

This Magento 2 module adds qty buttons next to each qty input field. Making it easier for your store customers to increase or decrease the quantity, of a product.

[![preview of the quantity buttons in action](previews/preview.gif)](previews/preview.gif)

*[View more previews of the Enhanced Qty](previews)*

**TOC**- [Installation](#installation)
- [How to use](#how-to-use)
    - [SCSS support](#scss-support)
- [Config](#config)
    - [Render Javascript config](#render-javascript-config)
    - [Enhanced Qty Javascript config](#enhanced-qty-javascript-config)
    - [Styling config](#styling-config)
- [Tips](#tips)
    - [Also show on the product grid](#also-show-on-the-product-grid)

Installation
------------

[](#installation)

Install the package via;

```
composer require siteation/magento2-module-enhanced-qty
bin/magento setup:upgrade
```

> This Module require Magento 2.3 or higher! For more requirements see the `composer.json`.

How to use
----------

[](#how-to-use)

No instructions needed. This module works out of the box for themes based on Luma theme.

The module is a progressive enhancement. And does not change the default behavior of the Magento 2 qty field. Also it does not overrides any templates except for the minicart KO template.

The `render-qty-btn.js` will add the qty buttons based on the input fields. And the `enhanced-qty.js` will handle the increment and decrement.

### SCSS support

[](#scss-support)

This module also supports SCSS styles. That can be used with tools like [Frontools](https://github.com/SnowdogApps/magento2-frontools).

Add `Siteation_EnhancedQty` to the themes.json;

```
{
    "": {
        "modules": {
            "Siteation_EnhancedQty": "vendor/siteation/magento2-module-enhanced-qty/view/frontend"
        }
    }
}
```

And import it in your `styles.scss` via;

```
@import "../Siteation_EnhancedQty/styles/module";
```

Config
------

[](#config)

### Render Javascript config

[](#render-javascript-config)

There are some option for the render function. You can pass the option;

```

{
    ".input-text.qty": {
        "renderQtyBtn": {
            "wrapperClass": "enhanced-qty",
            "btnClass": "qty-btn",
            "btnPlusText": "Increase",
            "btnMinText": "Decrease"
        }
    }
}

```

### Enhanced Qty Javascript config

[](#enhanced-qty-javascript-config)

The enhanced qty has no config. But will check for specific html attributes.

- `min` the minium
- `max` the maximum value
- `step` the value steps that it will jump when incrementing or decrementing

So changing these values will also impact the enhanced qty buttons behavior. Giving the same behavior as the html input field.

### Styling config

[](#styling-config)

The enhanced qty comes out of the box with 2 styles. Each rendered based on what pointer is available.

You can disable or change this behavior via the variables.

If you like to use pointer fine styles also for mobile.

Simple set the vars to;

```
@enhanced-qty-layout: "input plus" "input min";
@enhanced-qty-layout-fine: false;
@enhanced-qty-btn-size: 1.8rem;
@enhanced-qty-btn-icon-increase: @icon-up;
@enhanced-qty-btn-icon-decrease: @icon-down;
```

This will disable the pointer styles. And set the default layout to the layout used by the fine layout.

Since the enhanced qty uses css grid templates areas. You can easily change the layout via just 1 or 2 simple variables.

Tips
----

[](#tips)

### Also show on the product grid

[](#also-show-on-the-product-grid)

The enhanced qty will also work if the qty box is added to the product grid.

To show it on the product `list.phtml` add the follwing code before the cart button.

```