Merge pull request PrestaShop#7781 from fatmaBouchekoua/BOOM-1965-3

Add error message when updating quantity wanted input
marekhanus · Sep 18, 2017 · bb93575 · bb93575
2 parents d62565c + 4ac0475
commit bb93575
Show file tree

Hide file tree

Showing 8 changed files with 140 additions and 127 deletions.
diff --git a/src/Core/Product/ProductPresenter.php b/src/Core/Product/ProductPresenter.php
@@ -411,7 +411,7 @@ public function addQuantityInformation(
                 if ($product['quantity'] < $settings->lastRemainingItems) {
                     $presentedProduct = $this->applyLastItemsInStockDisplayRule($product, $settings, $presentedProduct);
                 } else {
-                    if (isset($product['quantity_wanted']) && $product['quantity_wanted'] > $product['quantity']) {
+                    if (isset($product['quantity_wanted']) && $product['quantity_wanted'] > $product['quantity'] && !$product['allow_oosp']) {
                         $presentedProduct['availability_message'] = $this->translator->trans(
                             'There are not enough products in stock',
                             array(),

diff --git a/themes/_core/js/cart.js b/themes/_core/js/cart.js
@@ -66,52 +66,54 @@ $(document).ready(() => {
     '[data-button-action="add-to-cart"]',
     (event) => {
       event.preventDefault();
-
-      var $form = $($(event.target).closest('form'));
-      var query = $form.serialize() + '&add=1&action=update';
-      var actionURL = $form.attr('action');
-
-      let isQuantityInputValid = ($input) => {
-        var validInput = true;
-
-        $input.each((index, input) => {
-          let $input = $(input);
-          let minimalValue = parseInt($input.attr('min'), 10);
-          if (minimalValue && $input.val() < minimalValue) {
+      if ($('#quantity_wanted').val() > $('[data-stock]').data('stock') && $('[data-allow-oosp]').data('allow-oosp').length === 0) {
+          $('[data-button-action="add-to-cart"]').attr('disabled', 'disabled');
+      } else {
+        let $form = $(event.target).closest('form');
+        let query = $form.serialize() + '&add=1&action=update';
+        let actionURL = $form.attr('action');
+
+        let isQuantityInputValid = ($input) => {
+          var validInput = true;
+
+          $input.each((index, input) => {
+            let $input = $(input);
+            let minimalValue = parseInt($input.attr('min'), 10);
+            if (minimalValue && $input.val() < minimalValue) {
               onInvalidQuantity($input);
               validInput = false;
-          }
-        });
+            }
+          });
 
-        return validInput;
-      };
+          return validInput;
+        };
 
-      let onInvalidQuantity = ($input) => {
-        $($input.parents('.product-add-to-cart')[0]).find('.product-minimal-quantity')
-            .addClass('error');
-        $input.parent().find('label').addClass('error');
-      };
+        let onInvalidQuantity = ($input) => {
+          $input.parents('.product-add-to-cart').first().find('.product-minimal-quantity').addClass('error');
+          $input.parent().find('label').addClass('error');
+        };
 
-      let $quantityInput = $form.find('input[min]' );
-      if (!isQuantityInputValid($quantityInput)) {
-        onInvalidQuantity($quantityInput);
+        let $quantityInput = $form.find('input[min]' );
+        if (!isQuantityInputValid($quantityInput)) {
+          onInvalidQuantity($quantityInput);
 
-        return;
-      }
+          return;
+        }
 
-      $.post(actionURL, query, null, 'json').then((resp) => {
-        prestashop.emit('updateCart', {
-          reason: {
-            idProduct: resp.id_product,
-            idProductAttribute: resp.id_product_attribute,
-            linkAction: 'add-to-cart',
-            cart: resp.cart
-          },
-          resp: resp
+        $.post(actionURL, query, null, 'json').then((resp) => {
+          prestashop.emit('updateCart', {
+            reason: {
+              idProduct: resp.id_product,
+              idProductAttribute: resp.id_product_attribute,
+              linkAction: 'add-to-cart',
+              cart: resp.cart
+            },
+            resp: resp
+          });
+        }).fail((resp) => {
+          prestashop.emit('handleError', {eventType: 'addProductToCart', resp: resp});
         });
-      }).fail((resp) => {
-        prestashop.emit('handleError', {eventType: 'addProductToCart', resp: resp});
-      });
+      }
     }
   );
 

diff --git a/themes/classic/_dev/css/components/products.scss b/themes/classic/_dev/css/components/products.scss
@@ -75,15 +75,14 @@
   }
 }
 .product-quantity {
-  .qty {
+  display: flex;
+  .qty, .add {
     float: left;
-    width: 80px;
+    display: inline-flex;
     margin-bottom: 0.5rem;
   }
-  .add {
-    float: left;
-    margin-left: 1rem;
-    margin-bottom: 0.5rem;
+  .qty {
+    margin-right: 0.4rem;
   }
   #quantity_wanted {
     color: $gray-darker;
@@ -93,9 +92,7 @@
     width: 3rem;
   }
   .input-group-btn-vertical {
-    float: left;
-  }
-  .input-group-btn-vertical {
+    width: auto;
     .btn {
       padding: 0.5rem 0.6875rem;
       i {

diff --git a/themes/classic/_dev/js/product.js b/themes/classic/_dev/js/product.js
@@ -104,10 +104,15 @@ $(document).ready(function () {
       max: 1000000
     });
 
-    quantityInput.on('change', function (event) {
-      let $productRefresh = $('.product-refresh');
-      $(event.currentTarget).trigger('touchspin.stopspin');
-      $productRefresh.trigger('click', {eventType: 'updatedProductQuantity'});
+    var quantity = quantityInput.val();
+    quantityInput.on('keyup change', function (event) {
+      const newQuantity = $(this).val();
+      if (newQuantity !== quantity) {
+        quantity = newQuantity;
+        let $productRefresh = $('.product-refresh');
+        $(event.currentTarget).trigger('touchspin.stopspin');
+        $productRefresh.trigger('click', {eventType: 'updatedProductQuantity'});
+      }
       event.preventDefault();
 
       return false;

diff --git a/themes/classic/assets/css/theme.css b/themes/classic/assets/css/theme.css
diff --git a/themes/classic/assets/js/theme.js b/themes/classic/assets/js/theme.js
diff --git a/themes/classic/templates/catalog/_partials/product-details.tpl b/themes/classic/templates/catalog/_partials/product-details.tpl
@@ -30,7 +30,7 @@
     {if $product.show_quantities}
       <div class="product-quantities">
         <label class="label">{l s='In stock' d='Shop.Theme.Catalog'}</label>
-        <span>{$product.quantity} {$product.quantity_label}</span>
+        <span data-stock="{$product.quantity}" data-allow-oosp="{$product.allow_oosp}">{$product.quantity} {$product.quantity_label}</span>
       </div>
     {/if}
   {/block}