Update and improve quantity-input.php

bootscore · Feb 16, 2023 · 15f84aa · 15f84aa
1 parent 6f3fa58
commit 15f84aa
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 89 deletions.
diff --git a/scss/bootscore_woocommerce/_wc_qty_btn.scss b/scss/bootscore_woocommerce/_wc_qty_btn.scss
@@ -27,3 +27,8 @@ WooCommerce Quantity Input
     @extend :disabled;
   }
 }
+
+// Hide quantity input if product is sold individually
+.sold-individually .quantity {
+  display: none;
+}
diff --git a/woocommerce/global/quantity-input.php b/woocommerce/global/quantity-input.php
@@ -12,21 +12,17 @@
  *
  * @see     https://docs.woocommerce.com/document/template-structure/
  * @package WooCommerce\Templates
- * @version 7.2.1
+ * @version 7.4.0
+ *
+ * @var bool   $readonly If the input should be set to readonly mode.
+ * @var string $type     The input type attribute.
  */
 
 defined( 'ABSPATH' ) || exit;
 
 /* translators: %s: Quantity. */
 $label = ! empty( $args['product_name'] ) ? sprintf( esc_html__( '%s quantity', 'woocommerce' ), wp_strip_all_tags( $args['product_name'] ) ) : esc_html__( 'Quantity', 'woocommerce' );
 
-// In some cases we wish to display the quantity but not allow for it to be changed.
-if ( $max_value && $min_value === $max_value ) {
-  $is_readonly = true;
-  $input_value = $min_value;
-} else {
-  $is_readonly = false;
-}
 ?>
 <div class="quantity input-group">
   <?php
@@ -39,9 +35,9 @@
   ?>
   <button type="button" class="input-group-text qty_button minus">-</button>
   <label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php echo esc_attr( $label ); ?></label>
-  <input
-    type="<?php echo $is_readonly ? 'text' : 'number'; ?>"
-    <?php echo $is_readonly ? 'readonly="readonly"' : ''; ?>
+  <input  
+    type="<?php echo esc_attr( $type ); ?>"
+ 	<?php echo $readonly ? 'readonly="readonly"' : ''; ?>
     id="<?php echo esc_attr( $input_id ); ?>"
     class="input-text qty text form-control <?php echo esc_attr( join( ' ', (array) $classes ) ); ?>"
     name="<?php echo esc_attr( $input_name ); ?>"
@@ -50,7 +46,7 @@ class="input-text qty text form-control <?php echo esc_attr( join( ' ', (array)
     size="4"
     min="<?php echo esc_attr( $min_value ); ?>"
     max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>"
-    <?php if ( ! $is_readonly ): ?>
+    <?php if ( ! $readonly ): ?>
       step="<?php echo esc_attr( $step ); ?>"
       placeholder="<?php echo esc_attr( $placeholder ); ?>"
       inputmode="<?php echo esc_attr( $inputmode ); ?>"

diff --git a/woocommerce/js/woocommerce.js b/woocommerce/js/woocommerce.js
@@ -1,78 +1,82 @@
-jQuery(function ($) {
-
-  // Review Checkbox Products
-  $('.comment-form-cookies-consent').addClass('form-check');
-  $('#wp-comment-cookies-consent').addClass('form-check-input');
-  $('.comment-form-cookies-consent label').addClass('form-check-label');
-
-  // Checkout Form Validation
-  $('body').on('blur change', '.form-row input', function () {
-    $('.woocommerce form .form-row.woocommerce-validated .select2-container, .woocommerce form .form-row.woocommerce-validated input.input-text, .woocommerce form .form-row.woocommerce-validated select, .woocommerce form .form-row.woocommerce-validated .form-check-input[type=checkbox]').removeClass('is-invalid').addClass('is-valid');
-    $('.woocommerce form .form-row.woocommerce-invalid .select2-container, .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select, .woocommerce form .form-row.woocommerce-invalid .form-check-input[type=checkbox]').removeClass('is-valid').addClass('is-invalid');
-  });
-
-  // Single-product Tabs
-  // First item active
-  $('.wc-tabs .nav-item:first-child a').addClass('active');
-
-  // Set active class to nav-link
-  $('body').on('click', '.wc-tabs li a', function (e) {
-    e.preventDefault();
-    var $tab = $(this);
-    var $tabs_wrapper = $tab.closest('.wc-tabs-wrapper, .woocommerce-tabs');
-    var $tabs = $tabs_wrapper.find('.wc-tabs');
-
-    $tabs.find('li a').removeClass('active');
-    $tabs_wrapper.find('.wc-tab, .panel:not(.panel .panel)').hide();
-
-    $tab.closest('li a').addClass('active');
-    $tabs_wrapper.find($tab.attr('href')).show();
-  });
-  // Single-product Tabs End
-
-  // WC Quantity Input
-  if (!String.prototype.getDecimals) {
-    String.prototype.getDecimals = function () {
-      var num = this,
-        match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
-      if (!match) {
-        return 0;
-      }
-      return Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0));
-    };
-  }
-  // Quantity "plus" and "minus" buttons
-  $(document.body).on('click', '.plus, .minus', function () {
-    var $qty = $(this).closest('.quantity').find('.qty'),
-      currentVal = parseFloat($qty.val()),
-      max = parseFloat($qty.attr('max')),
-      min = parseFloat($qty.attr('min')),
-      step = $qty.attr('step');
-
-    // Format values
-    if (!currentVal || currentVal === '' || currentVal === 'NaN') currentVal = 0;
-    if (max === '' || max === 'NaN') max = '';
-    if (min === '' || min === 'NaN') min = 0;
-    if (step === 'any' || step === '' || step === undefined || parseFloat(step) === 'NaN') step = 1;
-
-    // Change the value
-    if ($(this).is('.plus')) {
-      if (max && currentVal >= max) {
-        $qty.val(max);
-      } else {
-        $qty.val((currentVal + parseFloat(step)).toFixed(step.getDecimals()));
-      }
-    } else {
-      if (min && currentVal <= min) {
-        $qty.val(min);
-      } else if (currentVal > 0) {
-        $qty.val((currentVal - parseFloat(step)).toFixed(step.getDecimals()));
-      }
-    }
-
-    // Trigger change event
-    $qty.trigger('change');
-  });
-  // WC Quantity Input End 
-
+jQuery(function ($) {
+
+  // Review Checkbox Products
+  $('.comment-form-cookies-consent').addClass('form-check');
+  $('#wp-comment-cookies-consent').addClass('form-check-input');
+  $('.comment-form-cookies-consent label').addClass('form-check-label');
+
+  // Checkout Form Validation
+  $('body').on('blur change', '.form-row input', function () {
+    $('.woocommerce form .form-row.woocommerce-validated .select2-container, .woocommerce form .form-row.woocommerce-validated input.input-text, .woocommerce form .form-row.woocommerce-validated select, .woocommerce form .form-row.woocommerce-validated .form-check-input[type=checkbox]').removeClass('is-invalid').addClass('is-valid');
+    $('.woocommerce form .form-row.woocommerce-invalid .select2-container, .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select, .woocommerce form .form-row.woocommerce-invalid .form-check-input[type=checkbox]').removeClass('is-valid').addClass('is-invalid');
+  });
+
+  // Single-product Tabs
+  // First item active
+  $('.wc-tabs .nav-item:first-child a').addClass('active');
+
+  // Set active class to nav-link
+  $('body').on('click', '.wc-tabs li a', function (e) {
+    e.preventDefault();
+    var $tab = $(this);
+    var $tabs_wrapper = $tab.closest('.wc-tabs-wrapper, .woocommerce-tabs');
+    var $tabs = $tabs_wrapper.find('.wc-tabs');
+
+    $tabs.find('li a').removeClass('active');
+    $tabs_wrapper.find('.wc-tab, .panel:not(.panel .panel)').hide();
+
+    $tab.closest('li a').addClass('active');
+    $tabs_wrapper.find($tab.attr('href')).show();
+  });
+  // Single-product Tabs End
+
+  // WC Quantity Input
+  if (!String.prototype.getDecimals) {
+    String.prototype.getDecimals = function () {
+      var num = this,
+        match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
+      if (!match) {
+        return 0;
+      }
+      return Math.max(0, (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0));
+    };
+  }
+  // Quantity "plus" and "minus" buttons
+  $(document.body).on('click', '.plus, .minus', function () {
+    var $qty = $(this).closest('.quantity').find('.qty'),
+      currentVal = parseFloat($qty.val()),
+      max = parseFloat($qty.attr('max')),
+      min = parseFloat($qty.attr('min')),
+      step = $qty.attr('step');
+
+    // Format values
+    if (!currentVal || currentVal === '' || currentVal === 'NaN') currentVal = 0;
+    if (max === '' || max === 'NaN') max = '';
+    if (min === '' || min === 'NaN') min = 0;
+    if (step === 'any' || step === '' || step === undefined || parseFloat(step) === 'NaN') step = 1;
+
+    // Change the value
+    if ($(this).is('.plus')) {
+      if (max && currentVal >= max) {
+        $qty.val(max);
+      } else {
+        $qty.val((currentVal + parseFloat(step)).toFixed(step.getDecimals()));
+      }
+    } else {
+      if (min && currentVal <= min) {
+        $qty.val(min);
+      } else if (currentVal > 0) {
+        $qty.val((currentVal - parseFloat(step)).toFixed(step.getDecimals()));
+      }
+    }
+
+    // Trigger change event
+    $qty.trigger('change');
+  });
+
+  // Make quantity input visible in product page if only 1 product is in stock
+  // WooCommerce 7.4.0 https://github.com/woocommerce/woocommerce/blob/2bf9f577952d7a225365fe7728b3187b5be7b701/plugins/woocommerce/templates/global/quantity-input.php
+  $('.quantity [max="1"]').attr('type', 'number');
+  // WC Quantity Input End 
+
 }); // jQuery End