将数量单选选择器字段添加到 WooCommerce 商店页面上的 Ajax 添加到购物车按钮

Question

我的商品数量上限为10件。客户经常会选择同时购买多种型号。因此我想在商店页面有一个无线电数量选择器 (1 - 10)。

我已经知道如何在商店页面显示数量选择器以及如何使用 WooCommerce 单选表格。但是我不知道如何制作一个数量选择器。

基于答案代码，这是我的代码尝试：

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 99, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        // Get the necessary classes
        $class = implode( ' ', array_filter( array(
            'button',
            'product_type_' . $product->get_type(),
            $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
            $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
        ) ) );

        $args = array(
            'type' => 'radio',
            'class' => array( 'form-row-wide', 'update_totals_on_change' ),
            'options' => array(
                '0' => '0',
                '1' => '1',
                '2' => '2',
                '3' => '3',
                '4' => '4',
                '5' => '5',
                '6' => '6',
                '7' => '7',
                '8' => '8',
                '9' => '9',
                '10' => '10'
            ),
            'default' => '0'
        );
        // Embedding the quantity field to Ajax add to cart button
        $html = sprintf( '%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
            woocommerce_form_field( 'radio_choice', $args, '0' ),
//             woocommerce_quantity_input( array(), $product, false ),
            esc_url( $product->add_to_cart_url() ),
            esc_attr( isset( $quantity ) ? $quantity : 1 ),
            esc_attr( $product->get_id() ),
            esc_attr( $product->get_sku() ),
            esc_attr( isset( $class ) ? $class : 'button' ),
            esc_html( $product->add_to_cart_text() )
        );
    }
    return $html;
}

有什么建议可以使代码正常工作吗？

Answer 1

您似乎缺少完成这项工作所需的额外 jQuery。我知道你要求用收音机 select 来完成这项工作，但也许为了节省 space 你想考虑 select?

下面的代码就是这样做的。

add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_loop_ajax_add_to_cart', 10, 2 );
function quantity_inputs_for_loop_ajax_add_to_cart( $html, $product ) {
    if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
        // Get the necessary classes
        $class = implode( ' ', array_filter( array(
            'button',
            'product_type_' . $product->get_type(),
            $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
            $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
        ) ) );

        $args = array(
            'type' => 'select',
            'class' => array( 'form-row-wide', 'quantity-select' ),
            'options' => array(
                '0' => '0',
                '1' => '1',
                '2' => '2',
                '3' => '3',
                '4' => '4',
                '5' => '5',
                '6' => '6',
                '7' => '7',
                '8' => '8',
                '9' => '9',
                '10' => '10'
            ),
            'default' => '0'
        );

        // Embedding the quantity field to Ajax add to cart button
        $html = sprintf( '%s<a rel="nofollow" href="%s" data-quantity="%s" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
            woocommerce_form_field( '', $args ),
            esc_url( $product->add_to_cart_url() ),
            esc_attr( isset( $quantity ) ? $quantity : 1 ),
            esc_attr( $product->get_id() ),
            esc_attr( $product->get_sku() ),
            esc_attr( isset( $class ) ? $class : 'button' ),
            esc_html( $product->add_to_cart_text() )
        );
    }
    return $html;
}

add_action( 'wp_footer', 'archives_quantity_fields_script' );
function archives_quantity_fields_script(){
    ?>
    <script type='text/javascript'>
        jQuery(function($){
            // Update data-quantity
            $(document.body).on('change', '.quantity-select select', function() {
                let selected_quantity = $(this).find(":selected").text();
                $(this).closest('li.product').find('a.ajax_add_to_cart').attr('data-quantity', selected_quantity);
                $(".added_to_cart").remove(); // Optional: Removing other previous "view cart" buttons
            }).on('click', '.add_to_cart_button', function(){
                var button = $(this);
                setTimeout(function(){
                    console.log( button.siblings('.quantity-select').find('select option[value="0"]') );
                    button.siblings('.quantity-select').find('select').val('0'); // reset quantity to 0
                }, 1000); // After 1 second
            });
        });
    </script>
    <?php
}

将数量单选选择器字段添加到 WooCommerce 商店页面上的 Ajax 添加到购物车按钮

Add a quantity radio selector field to Ajax add to cart button on WooCommerce shop page

php

wordpress

radio-button

woocommerce

product-quantity