feat: Product to basket JavaScript functionality implemented.

bin/frontend/controls/buttons/ProductToBasket.js

@@ -53,6 +53,16 @@ define('package/quiqqer/order/bin/frontend/controls/buttons/ProductToBasket', [
 
             this.$Input = Elm.getElement('input');
             this.$Text  = Elm.getElement('.text');
+            this.changeButtons = Elm.getElements(
+                '.quiqqer-order-button-add-quantity-decrease, .quiqqer-order-button-add-quantity-increase'
+            );
+
+            this.changeButtons.addEvent('click', function (event) {
+                event.stop();
+                var Target = event.target;
+
+                this.changeValue(Target);
+            }.bind(this));
 
             this.$Input.setStyles({
                 zIndex: 10
@@ -62,7 +72,7 @@ define('package/quiqqer/order/bin/frontend/controls/buttons/ProductToBasket', [
                 event.stop();
             });
 
-            Elm.addEvent('click', this.$addProductToBasket);
+            this.$Text.addEvent('click', this.$addProductToBasket);
             Elm.removeClass('disabled');
         },
 
@@ -163,6 +173,31 @@ define('package/quiqqer/order/bin/frontend/controls/buttons/ProductToBasket', [
 
                 }).delay(1000);
             }.bind(this));
+        },
+
+        /**
+         * Change value of input
+         *
+         * @param Button | DOM Object
+         */
+        changeValue: function(Button) {
+            var type = Button.getProperty('data-button-type'),
+                value = parseInt(this.$Input.value);
+
+            if (!value) {
+                value = 0;
+            }
+
+            if (type === 'decrease') {
+                if (value < 2) {
+                    return;
+                }
+
+                this.$Input.value = --value;
+                return;
+            }
+
+            this.$Input.value = ++value;
         }
     });
 });
\ No newline at end of file

src/QUI/ERP/Order/Controls/Buttons/ProductToBasket.css

@@ -7,15 +7,23 @@
     white-space: nowrap;
 }
 
+.quiqqer-order-button-add-quantity-wrapper {
+    float: left;
+    margin-right: 20px;
+}
+
 .quiqqer-order-button-add-quantity {
-    margin-right: 10px;
-    display: flex;
+    float: left;
 }
 
-.quiqqer-order-button-add input {
+.quiqqer-order-button-add-quantity-label {
+    float: left;
+}
+
+.quiqqer-order-button-add-quantity-input {
     line-height: 26px;
     text-align: center;
-    width: 60px;
+    width: 40px;
     -webkit-appearance: textfield;
     -moz-appearance: textfield;
     appearance: textfield;
@@ -32,6 +40,6 @@
 .quiqqer-order-button-add input::-webkit-outer-spin-button,
 .quiqqer-order-button-add input::-webkit-inner-spin-button {
     display: none;
-    -webkit-appearance: none;
     margin: 0;
+    -webkit-appearance: none;
 }

src/QUI/ERP/Order/Controls/Buttons/ProductToBasket.html

 {if $this->getAttribute('input')}
-<div class="quiqqer-order-button-add-quantity">
-    <span class="quiqqer-order-button-add-quantity-decrease btn">-</span>
-    <input type="number" value="1" min="1" class="quiqqer-order-button-add-quantity-input"
-           title="{locale group='quiqqer/order' var='control.basket.quantity.text'}"/>
-    <span class="quiqqer-order-button-add-quantity-increase btn">+</span>
+<div class="quiqqer-order-button-add-quantity-wrapper">
+    <label class="quiqqer-order-button-add-quantity-label">Anzahl</label>
+    <div class="quiqqer-order-button-add-quantity">
+        <span class="quiqqer-order-button-add-quantity-decrease btn" data-button-type="decrease">-</span>
+        <input type="number" value="1" min="1" class="quiqqer-order-button-add-quantity-input"
+               title="{locale group='quiqqer/order' var='control.basket.quantity.text'}"/>
+        <span class="quiqqer-order-button-add-quantity-increase btn" data-button-type="increase">+</span>
+    </div>
 </div>
 {/if}
 

src/QUI/ERP/Order/Controls/Buttons/ProductToBasket.php

@@ -66,7 +66,7 @@ public function getBody()
         $Engine->assign([
             'this' => $this
         ]);
-        
+
         return $Engine->fetch(dirname(__FILE__) . '/ProductToBasket.html');
     }
 }