Add quantity input to shop front product list

Adding bigger quantities can now be done via an input field instead of
clicking a thousand times.

The add-button has been widened to match the new space requirements.
This commit is contained in:
Maikel Linke
2021-01-05 14:37:14 +11:00
parent e5506df5ea
commit 66423a1ec3
2 changed files with 12 additions and 6 deletions

View File

@@ -5,6 +5,7 @@
%button.variant-quantity{type: "button", ng: {if: "variant.line_item.quantity", click: "add(-1)"}}>
-# U+FF0D Fullwidth Hyphen-Minus
%input.variant-quantity{type: "number", min: "0", max: "{{ available() }}", ng: {model: "variant.line_item.quantity", if: "variant.line_item.quantity"}}>
%button.variant-quantity{type: "button", ng: {if: "variant.line_item.quantity", click: "add(1)", disabled: "!canAdd(1)"}}
-# U+FF0B Fullwidth Plus Sign

View File

@@ -48,7 +48,7 @@ button.add-variant, button.variant-quantity {
}
button.add-variant {
min-width: 6rem;
min-width: 7rem;
padding: 0 1em;
&[disabled] {
@@ -59,7 +59,7 @@ button.add-variant {
}
button.variant-quantity {
width: 3rem;
width: 2.25rem;
&:nth-of-type(1):not(.bulk-buy):not(.bulk-buy-add) {
border-right: .1em solid $orange-400;
@@ -71,7 +71,7 @@ button.variant-quantity {
font-size: 0.875em;
margin-top: 0.25em;
text-align: center;
width: 6rem;
width: 7rem;
visibility: hidden;
&.visible {
@@ -83,23 +83,28 @@ button.bulk-buy.variant-quantity {
background-color: transparent;
border: .1em solid $grey-200;
color: inherit;
width: 3.5rem;
}
button.bulk-buy-add.variant-quantity {
width: 2.5rem;
}
input[type="number"].bulk-buy.variant-quantity {
[type="number"].variant-quantity {
border: .1em solid $grey-200;
height: 2.5rem;
display: inline-block;
width: 5em;
padding: .5em;
width: 2.5rem;
padding: 0;
text-align: center;
vertical-align: top;
appearance: none;
-webkit-appearance: none;
-moz-appearance: textfield;
&.bulk-buy {
width: 5rem;
}
}
.variant-bulk-buy-price-summary {