WooCommerce 中的动态同步自定义结帐选择字段 [英] Dynamic synched custom checkout select fields in WooCommerce

问题描述

在 Woocommerce 中，我已经能够在结帐页面中添加 2 个自定义下拉列表:

In Woocommerce I have been able to add 2 custom dropdowns list in checkout page:

add_action('woocommerce_before_order_notes', 'wps_add_select_checkout_field');

function wps_add_select_checkout_field( $checkout) {
    echo '<h2>'.__('Next Day Delivery').'</h2>';
    woocommerce_form_field( 'City', array(
        'type'          => 'select',
        'class'         => array( 'wps-drop' ),
        'label'         => __( 'Delivery options' ),
        'options'       => array(
            'blank'     => __( 'Select a day part', 'wps' ),
            'A' => __( 'A', 'wps' ),
            'B' => __( 'B', 'wps' ),
            'C'     => __( 'C', 'wps' )
        )
    ),   
    $checkout->get_value( 'City' ));
}

add_action('woocommerce_before_order_notes', 'wps_add_select_checkout1_field');

function wps_add_select_checkout1_field( $checkout1) {
    //echo '<h2>'.__('Next Day Delivery').'</h2>';
    woocommerce_form_field( 'Dis', array(
        'type'          => 'select',
        'class'         => array( 'wps-drop' ),
        'label'         => __( 'Delivery options' ),
        'options'       => array(
            'blank'     => __( 'Select a day part', 'wps' ),
            'A' => __( 'ro', 'wps' ),
            'B' => __( 'wa', 'wps' ),
            'C'     => __( 'da', 'wps' )
        )
    ),
    $checkout1->get_value( 'Dis' ));
}

//* Process the checkout
add_action('woocommerce_checkout_process', 'wps_select_checkout_field_process');
function wps_select_checkout_field_process() {
    global $woocommerce;
    // Check if set, if its not set add an error.
    if ($_POST['City'] == "blank")
    wc_add_notice( '<strong>Please select a day part under Delivery options</strong>', 'error' );
}

我想根据从第一个下拉列表中选择的 动态生成第二个下拉列表的选项.

I would like to generate dynamically the options of the second dropdown list, based on the selected <option> from the first dropdown list.

我需要的示例:

• 如果 在第一个下拉列表中选择A"，第二个下拉列表将动态显示一个特定的集合的选项.
• 如果在第一个下拉列表中选择C"，第二个下拉列表将动态显示不同的集合的选项.
• 等等……

• If <option> "A" is selected in the 1st dropdown list, The 2nd dropdown list will show dynamically a specific set of options.
• If <option> "C" is selected in the 1st dropdown list, The 2nd dropdown list will show dynamically a different set of options.
• And so on …

这可能吗?我必须从哪里开始?

Is that possible? Where do I have to start?

感谢任何帮助.

推荐答案

我已经合并了您的前两个函数，因为它们使用相同的钩子.

I have merged your 2 first functions as they use the same hook.

在这个合并的函数中，我添加了:

In this merged function I have added:

• 两个字段的必填"选项.
• 更改了两个字段的 slug，例如 "City" 引发 woocommerce 错误.
• 我传递给 javascript 的不同选项"数组集(第一个选择字段中每个可用的 一个).
• 一些 jQuery 代码，基于第一个选择字段的所选 ，在第二个选择字段中动态创建选项集.

• The "required" option to both fields.
• Changed the slugs for both fields as for example "City" throw a woocommerce error.
• different sets of "options" arrays that I pass to javascript (one for each available <option> in the first select field).
• Some jQuery code that create dynamically the set of options in the 2nd select field, based on the selected <option> of the first select field.

我对最后一个函数中 If 语句的条件进行了一些更改.

I have change a bit the condition for the If statement in the last function.

这是重新访问的代码:

// Add checkout custom select fields
add_action( 'woocommerce_before_order_notes', 'add_checkout_custom_fields', 20, 1 );
function add_checkout_custom_fields( $checkout) {
    $domain = 'woocommerce'; // The domain slug

    echo '<h2>'.__( 'Next Day Delivery', $domain ).'</h2>';

    // First Select field (Master)
    woocommerce_form_field( 'delivery_one', array(
        'type'          => 'select',
        'label'         => __( 'Delivery options one' , $domain),
        'class'         => array( 'form-row-wide' ),
        'required'       => true,
        'options'       => array(
            ''  => __( 'Please select a value', $domain ),
            'A' => __( 'A', $domain ),
            'B' => __( 'B', $domain ),
            'C' => __( 'C', $domain ),
        ),
    ),
    $checkout->get_value( 'delivery_one' ) );

    // Default option value
    $default_option2 = __( 'Please select a value', $domain );

    // Dynamic select field options for Javascript/jQuery
    $options_0 = array( '' => $default_option2 );
    $options_a = array(
        ''  => $default_option2,
        'D' => __( 'D', $domain ),
        'E' => __( 'E', $domain ),
        'F' => __( 'F', $domain ),
        'G' => __( 'G', $domain ),
    );
    $options_b = array(
        ''  => $default_option2,
        'H' => __( 'H', $domain ),
        'I' => __( 'I', $domain ),
        'J' => __( 'J', $domain ),
    );
    $options_c = array(
        ''  => $default_option2,
        'K' => __( 'K', $domain ),
        'L' => __( 'L', $domain ),
        'M' => __( 'M', $domain ),
    );

    // Second Select field (Dynamic Slave)
    woocommerce_form_field( 'delivery_two', array(
        'type'          => 'select',
        'label'         => __( 'Delivery options two', $domain ),
        'class'         => array( 'form-row-wide' ),
        'required'       => true,
        'options'       => $options_0,
    ),
    $checkout->get_value( 'delivery_two' ) );

    $required = esc_attr__( 'required', 'woocommerce' );

    // jQuery code
    ?>
    <script>
    jQuery(function($){
        var op0 = <?php echo json_encode($options_0); ?>,
            opa = <?php echo json_encode($options_a); ?>,
            opb = <?php echo json_encode($options_b); ?>,
            opc = <?php echo json_encode($options_c); ?>,
            select1 = 'select[name="delivery_one"]',
            select2 = 'select[name="delivery_two"]';

        // Utility function to fill dynamically the select field options
        function dynamicSelectOptions( opt ){
            var options = '';
            $.each( opt, function( key, value ){
                options += '<option value="'+key+'">'+value+'</option>';
            });
            $(select2).html(options);
        }

        // 1. When dom is loaded we add the select field option for "A" value
        // => Disabled (optional) — Uncomment below to enable
        // dynamicSelectOptions( opa );

        // 2. On live selection event on the first dropdown
        $(select1).change(function(){
            if( $(this).val() == 'A' )
                dynamicSelectOptions( opa );
            else if( $(this).val() == 'B' )
                dynamicSelectOptions( opb );
            else if( $(this).val() == 'C' )
                dynamicSelectOptions( opc );
            else
                dynamicSelectOptions( op0 ); // Reset to default
        });
    });
    </script>
    <?php
}

// Check checkout custom fields
add_action( 'woocommerce_checkout_process', 'wps_check_checkout_custom_fields', 20 ) ;
function wps_check_checkout_custom_fields() {
    // if custom fields are empty stop checkout process displaying an error notice.
    if ( empty($_POST['delivery_one']) || empty($_POST['delivery_two']) ){
        $notice = __( 'Please select a day part under Delivery options' );
        wc_add_notice( '<strong>' . $notice . '</strong>', 'error' );
    }
}

代码位于您的活动子主题(活动主题)的 function.php 文件中.

这是一个完全有效且经过测试的示例.

This is a fully working and tested example.

这篇关于WooCommerce 中的动态同步自定义结帐选择字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！