数量输入仅作为购物车页面上的下拉菜单

时间:2017-01-12 16:28:17

标签: php woocommerce

我正在尝试为我的WooCommerce商店实施两种不同的数量输入。在购物车页面上,我使用带加号和减号按钮的字段来更改值。这是代码:

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

这很完美。但是,购物车页面上的数量字段也会继承此格式。我希望它是一个可选择的下拉菜单。我尝试在购物车页面上使用此代码:

<?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>';
    }
    ?>

下拉列表显示并且可以选择,但如果我选择不同的数量然后单击“更新购物车”,则数量保持不变。它没有改变。我怎么能这样做?

谢谢!

2 个答案:

答案 0 :(得分:1)

我已将is_cart()条件添加到quantity-input.php模板,以区分使用按钮的位置和使用选择的位置。清理了一些其他的东西,它似乎对我很好。当然,我使用的是WC2.7-beta-1,所以我不知道这是否有影响。

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
}

答案 1 :(得分:0)

我自己想出了一个解决方案。我在cart.php模板中添加了以下内容,我希望显示数量下拉列表:

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

它功能齐全。我现在在单个产品页面上有一个带加号/减号按钮的数量输入,以及我购物车页面上的可选下拉菜单。