WooCommerce quantity input - + buttons about bootscore

[crftwrk]

Found this here https://stackoverflow.com/questions/52367826/custom-plus-and-minus-quantity-buttons-in-woocommerce-3.

Modified a bit and works fine https://dev.bootscore.me/product/simple-product-2/.

quantity-input.php

<?php

/**
 * Product quantity inputs
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/global/quantity-input.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 4.0.0
 */

defined('ABSPATH') || exit;

if ($max_value && $min_value === $max_value) {
?>
  <div class="quantity hidden">
    <input type="hidden" id="<?php echo esc_attr($input_id); ?>" class="qty" name="<?php echo esc_attr($input_name); ?>" value="<?php echo esc_attr($min_value); ?>" />
  </div>
<?php
} else {
  /* 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');
?>
<div class="quantity input-group me-3 w-50">
  <button type="button" class="input-group-text qty_button minus">-</button>
  <label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></label>
  <input type="number" id="<?php echo esc_attr( $input_id ); ?>" class="input-text qty text form-control" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ); ?>" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" aria-labelledby="<?php echo esc_attr( $labelledby ); ?>" />
  <button type="button" class="input-group-text qty_button plus">+</button>
</div>
<?php
}

JS

jQuery(document).ready(function ($) {

  // 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

});

CSS

/* Hide browser arrows in quantity input */
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
  display: none;
  margin: 0;
}

.quantity input.qty {
  appearance: textfield;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

Maybe it can be done a bit better, but I'm basically open adding this feature to main-theme. What do you think?

[Lo1176]

Hi Basti,
For responsive issue for the cart page https://dev.bootscore.me/cart/ we maybe need to add d-flex align-items-center justify-content-between on product-quantityclass on cart.php line 104
remove me-3 on quantity-input.php line 31 class="quantity input-group me-3 w-50"
add ms-3 in simple.php on line 48 class="single_add_to_cart_button alt btn btn-primary ms-3"

[Lo1176]

Sure, with pleasure.
I try to do it today or tomorrow

[crftwrk]

Maybe this is a solution https://github.com/shaack/bootstrap-input-spinner?

[Lo1176]

I had seen that. I never done this before.
Should I do npm init in my chid-theme or in the main directory folder ?
What is the best practice for this ?

[Axos11]

you don't "have" to run npm at all. you actually can just implement the .js file.

<script src="src/bootstrap-input-spinner.js"></script>

Actually you should load the .js file the wordpress way: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

and then init it with something like
jQuery(document).ready(function ($) { $("input[type='number']").inputSpinner(); }

after jquery has been loaded.

[Lo1176]

Thanks for your help 🙏
I'll look at it.

[Lo1176]

You're the boss !
Thank you so much 🙏

[crftwrk]

Think we are ready to do this now. @Lo1176 do you want to create a PR?