Quantity Input as Dropdown on Cart Page Only - php

Question

I am trying to implement two different kinds of quantity input for my WooCommerce store. On the cart page, I'm using a field with plus and minus buttons to change the value. Here's the code:
<?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/
* #author WooThemes
* #package WooCommerce/Templates
* #version 2.5.0
*/
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
?>
<div class="quantity">
<button class="qty-minus" type="button" value=""></button>
<input class="qty-input" type="number" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" readonly title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />
<button class="qty-plus" type="button" value=""></button>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.quantity').on('click', '.qty-plus', function(e) {
$input = $(this).prev('input.qty-input');
var val = parseInt($input.val());
$input.val( val+1 ).change();
});
$('.quantity').on('click', '.qty-minus',
function(e) {
$input = $(this).next('input.qty-input');
var val = parseInt($input.val());
if (val > 0) {
$input.val( val-1 ).change();
}
});
});
</script>
This is working perfectly. However, the quantity field on the cart page inherits this format as well. I'd like it to be a selectable dropdown instead. I tried using this code on the cart page:
<?php
$defaults = array(
'max_value' => apply_filters( 'woocommerce_quantity_input_max', '', $product ),
'min_value' => apply_filters( 'woocommerce_quantity_input_min', '', $product ),
'step' => apply_filters( 'woocommerce_quantity_input_step', '1', $product ),
);
if ( ! empty( $defaults['min_value'] ) )
$min = $defaults['min_value'];
else $min = 1;
if ( ! empty( $defaults['max_value'] ) )
$max = $defaults['max_value'];
else $max = 10;
if ( ! empty( $defaults['step'] ) )
$step = $defaults['step'];
else $step = 1;
?>
<div class="quantity_select">
<select name="<?php echo esc_attr( $input_name ); ?>" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="qty">
<?php
for ( $count = $min; $count <= $max; $count = $count+$step ) {
if ( $count == $input_value )
$selected = ' selected';
else $selected = '';
echo '<option value="' . $count . '"' . $selected . '>' . $count . '</option>';
}
?>
The dropdown displays and is selectable, but if I choose a different quantity and then click "Update Cart", the quantity stays the same. It isn't changing. How can I do this?
Thank you!

Answer 1

I've added the is_cart() condition to the quantity-input.php template to distinguish between where to use the buttons and where to use the select. Cleaned up a few other things, and it seems to work fine for me. Granted, I am using WC2.7-beta-1, so I don't know if that is having an effect.
if( is_cart() ){
$min_value = $min_value ? $min_value : 0;
$max_value = $max_value ? $max_value : 10;
?>
<div class="quantity quantity_select">
<select name="<?php echo esc_attr( $input_name ); ?>" title="<?php _ex( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="qty">
<?php
for ( $count = $min_value; $count <= $max_value; $count = $count+$step ) {
echo '<option value="' . esc_attr( $count ) . '"' . selected( $count, $input_value, false ) . '>' . $count . '</option>';
}
} else { ?>
<div class="quantity">
<button class="qty-minus" type="button" value="">-</button>
<input class="qty-input" type="number" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( $max_value ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" readonly title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" class="input-text qty text" size="4" />
<button class="qty-plus" type="button" value="">+</button>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.quantity').on('click', '.qty-plus', function(e) {
$input = $(this).prev('input.qty-input');
var val = parseInt($input.val());
$input.val( val+1 ).change();
});
$('.quantity').on('click', '.qty-minus',
function(e) {
$input = $(this).next('input.qty-input');
var val = parseInt($input.val());
if (val > 0) {
$input.val( val-1 ).change();
}
});
});
</script>
<?php
}

Answer 2

I came up with a solution myself. I added the following in my cart.php template where I wanted the quantity dropdown to show up:
<?php
if ($_product->is_sold_individually()) {
$product_quantity = sprintf('1 <input type="hidden" name="cart[%s][qty]" value="1" />', $cart_item_key);
} else {
global $product;
$defaults = array(
'input_name' => "cart[{$cart_item_key}][qty]",
'input_value' => $cart_item['quantity'],
'max_value' => apply_filters( 'woocommerce_quantity_input_max', '', $product ),
'min_value' => apply_filters( 'woocommerce_quantity_input_min', '', $product ),
'step' => apply_filters( 'woocommerce_quantity_input_step', '1', $product ),
'style' => apply_filters( 'woocommerce_quantity_style', 'float:left; margin-right:10px;', $product )
);
if (!empty($defaults['min_value']))
$min = $defaults['min_value'];
else $min = 1;
if (!empty($defaults['max_value']))
$max = $defaults['max_value'];
else $max = 20;
if (!empty($defaults['step']))
$step = $defaults['step'];
else $step = 1;
$options = '';
for($count = $min;$count <= $max;$count = $count+$step){
if($count == $cart_item['quantity'])
$selected="selected=selected";
else
$selected='';
$options .= '<option value="' . $count . '" '.$selected.'>' . $count . '</option>';
}
echo '<select name="' . esc_attr( $defaults['input_name'] ) . '" title="' . _x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) . '" class="qty">' . $options . '</select>';
}?></div>
It's fully functional. I now have a quantity input with plus/minus buttons on my single product page and a selectable dropdown on my cart page.