raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-03-12 03:50:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace quantity input with add-remove buttons

Browse Source 
The new mobile friendly design contains a nice "Add" button to add
variants to your cart. Once you have the variant in you cart, it's
replaced by plus and minus buttons to adjust the quantity.

Other languages have longer words than "Add" which need to fit on the
button. Since the add button and the +/- buttons should have the same
width, I widened them a little bit so that they fit the longest words
Aggiungi and Добавить.
This commit is contained in:
Maikel Linke
2020-06-03 17:12:36 +10:00
parent 35747dc2b1
commit 59c13b97ea
6 changed files with 111 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/javascripts/darkswarm/directives/shop_variant.js.coffee
View File

@@ -11,3 +11,11 @@ Darkswarm.directive "shopVariant", ->
], (new_value, old_value) ->
return if old_value[0] == null && new_value[0] == null
Cart.adjust($scope.variant.line_item)
$scope.add = (quantity) ->
$scope.variant.line_item.quantity += quantity
$scope.canAdd = (quantity) ->
variant = $scope.variant
wantedQuantity = variant.line_item.quantity + quantity
variant.on_demand || wantedQuantity <= variant.on_hand

24
app/assets/javascripts/templates/partials/shop_variant_no_group_buy.html.haml
View File

@@ -1,14 +1,14 @@
.small-5.medium-3.large-3.columns.text-right{"ng-if" => "::!variant.product.group_buy"}
%input{type: :number,
integer: true,
value: nil,
min: 0,
placeholder: "0",
"ofn-disable-scroll" => true,
"ng-debounce" => "500",
onwheel: "this.blur()",
"ng-model" => "variant.line_item.quantity",
"ofn-on-hand" => "{{variant.on_demand && 9999 || variant.on_hand }}",
"ng-disabled" => "!variant.on_demand && variant.on_hand == 0",
name: "variants[{{::variant.id}}]", id: "variants_{{::variant.id}}"}
%button.add-variant{type: "button", ng: {if: "!variant.line_item.quantity", click: "add(1)", disabled: "!canAdd(1)"}}
{{ "js.shop_variant_no_group_buy.add" | t }}
%button.variant-quantity{type: "button", ng: {if: "variant.line_item.quantity", click: "add(-1)"}}>
{{ "js.shop_variant_no_group_buy.decrement" | t }}
%button.variant-quantity{type: "button", ng: {if: "variant.line_item.quantity", click: "add(1)", disabled: "!canAdd(1)"}}
{{ "js.shop_variant_no_group_buy.increment" | t }}
%br
.variant-quantity-display{ng: {class: "{visible: variant.line_item.quantity}"}}
{{ "js.shop_variant_no_group_buy.in_cart" | t:{quantity: variant.line_item.quantity} }}
%input{type: :hidden,
name: "variants[{{::variant.id}}]",
ng: {model: "variant.line_item.quantity"}}