php - 有条件地自定义 WooCommerce 结账字段

Question

我正在尝试修改 WooCommerce checkout 字段。我想达到的目标有两点。

1. 条件字段

   我想在运输部分为不同的运输类型创建条件字段。为了达到这一点，使用了 Javascript。

2. 管理员可以在后端编辑订单中的自定义字段

因此，我编写了如下代码。

但是，我遇到了一个问题。我的 JavaScript 无法在前端运行。

有人可以帮助我吗？

    //修改check out shipping field
    add_action( 'woocommerce_before_checkout_shipping_form', 'add_shipping_type' );
    function add_shipping_type( $checkout ) {
        woocommerce_form_field( 'shipping_type', array(
            'type' => 'radio',
            'class' => array( 'form-row-wide' ),
            'label' => '收件方式',
            'options' => array(
                'shipping_1'    => '全家店到店',
                'shipping_2'    => '指定地址',
                'shipping_3' => '自行取貨',
        )
     ),$checkout->get_value( 'shipping_type' ));
    }

    add_filter( 'woocommerce_shipping_fields', 'custom_name_field_2' );
    function custom_name_field_2($fields) {
        $fields['shipping_first_name'] = array(
            'label'=>"取件者 *",
            'id' => 'shipping_first_name'
        );
        $fields['shipping_last_name'] = array(
            'label'=>"手機號碼 *",
            'id' => 'shipping_last_name'
        );
        $fields['shipping_company'] = array(
            'label'=>"店名 *",
            'id' => 'shipping_company'
        );
        $fields['shipping_city'] = array(
            'label'=>"服務編號 *",
            'id' => 'shipping_city'
        );
        $fields['shipping_address_1'] = array(
            'label'=>"收件地址 *",
            'id' => 'shipping_address_1'
        );
        $fields['shipping_address_2'] = array(
            'label'=>"預計來訪時間 *",
            'id' => 'shipping_address_2'
        );
        return $fields;
    }

    add_filter( 'woocommerce_shipping_fields', 'remove_shipping_company' );
    function remove_shipping_company($fields){
        unset($fields['shipping_country']);
        unset($fields['shipping_state']);
        return $fields;
    }


    add_filter("woocommerce_shipping_fields", "shipping_container");
    function shipping_container(){
        $output = '
        <style>label.radio{display:inline-block;margin-right:1rem;}</style>
        <script>
        var $ = jQuery.noConflict();
        $(document).ready(function(){
        $("input[name=shipping_type]").on("change",function(){
            if($("#shipping_type_shipping_1").is(":checked")) {
                    $("#shipping_first_name,#shipping_last_name,#shipping_city,#shipping_company").fadeIn();
            } else {
            $("#shipping_first_name,#shipping_last_name,#shipping_city,#shipping_company").fadeOut();
            }
            if($("#shipping_type_shipping_2").is(":checked")) {
            $("#shipping_postcode,#shipping_address_1").fadeIn();
            } else {
            $("#shipping_postcode,#shipping_address_1").fadeOut();
            }
            if($("#shipping_type_shipping_3").is(":checked")) {
            $("#shipping_address_2_field_2").fadeIn();
            } else {
            $("#shipping_address_2_field_2").fadeOut();
            }
        })
        });
        </script>
        ';
        echo $output;
    }
 

Answer 1

首先，当涉及同一个钩子(Hook)时，您可以合并一些函数...然后您的 jQuery 脚本最好像下面的代码一样设置它(您的 jQuery 脚本中也有很多小错误) :

// Customizing default checkout shipping fields
add_filter( 'woocommerce_shipping_fields', 'customizing_shipping_fields' );
function customizing_shipping_fields($fields){

    # 1. Remove shipping fields
    unset($fields['shipping_country']);
    unset($fields['shipping_state']);

    # 2. Customize shipping fields
    $label_fields = array(
        'first_name' => __('取件者 *'),  'last_name'  =>   __('手機號碼 *'),
        'company'    => __('店名 *'),    'city'        => __('服務編號 *'),
        'address_1'  => __('收件地址 *'), 'address_2' => __('預計來訪時間 *'),
    );
    foreach( $label_fields as $key => $value ){
        $fields['shipping_'.$key]['label'] = $value;
        $fields['shipping_'.$key]['id'] = 'shipping_'.$key;
    }

    # 3. Customize shipping fields required
    $required_fields = array( 'first_name', 'last_name', 'company', 'city', 
        'address_1', 'address_2', 'postcode');
    foreach( $required_fields as $key => $value )
        $fields['shipping_'.$key]['required'] = false;

    return $fields;
}

// Add a Custom radio field for shipping options
add_action( 'woocommerce_before_checkout_shipping_form', 'custom_shipping_radio_button', 10, 1 );
function custom_shipping_radio_button( $checkout ) {
    # 1. CSS styling
    ?>
    <style>label.radio{ display:inline-block; margin-right:1em; }</style>
    <?php

    # 2. Add a custom radio field
    woocommerce_form_field( 'shipping_type', array(
        'type' => 'radio',
        'class' => array( 'form-row-wide' ),
        'label' => __('收件方式'),
        'options' => array(
            'shipping_1' => __('全家店到店'),
            'shipping_2' => __('指定地址'),
            'shipping_3' => __('自行取貨'),
        ),
    ), $checkout->get_value( 'shipping_type' ) );

    # 3. jQuery Script
    ?>
    <script type="text/javascript">
        jQuery(function($){
            $("input[name=shipping_type]").on("change",function(){
                if($("#shipping_type_shipping_1").is(":checked")) {
                    $("#shipping_first_name,#shipping_last_name,#shipping_city,#shipping_company").fadeIn();
                } else {
                    $("#shipping_first_name,#shipping_last_name,#shipping_city,#shipping_company").fadeOut();
                }
                if($("#shipping_type_shipping_2").is(":checked")) {
                    $("#shipping_postcode,#shipping_address_1").fadeIn();
                } else {
                    $("#shipping_postcode,#shipping_address_1").fadeOut();
                }
                if($("#shipping_type_shipping_3").is(":checked")) {
                    $("#shipping_address_2_field_2").fadeIn();
                } else {
                    $("#shipping_address_2_field_2").fadeOut();
                }
            });
        });
    </script>
    <?php
}

代码位于事件子主题(或事件主题)的 function.php 文件中。

经过测试并有效。

<小时/>

现在，如果您想隐藏带有标签的字段，您的 jQuery 脚本将是:

    <script type="text/javascript">
        jQuery(function($){
            $("input[name=shipping_type]").on("change",function(){
                if($("#shipping_type_shipping_1").is(":checked")) {
                    $("#shipping_first_name_field,#shipping_last_name_field,#shipping_city_field,#shipping_company_field").fadeIn();
                } else {
                    $("#shipping_first_name_field,#shipping_last_name_field,#shipping_city_field,#shipping_company_field").fadeOut();
                }
                if($("#shipping_type_shipping_2").is(":checked")) {
                    $("#shipping_postcode_field,#shipping_address_1_field").fadeIn();
                } else {
                    $("#shipping_postcode_field,#shipping_address_1_field").fadeOut();
                }
                if($("#shipping_type_shipping_3").is(":checked")) {
                    $("#shipping_address_2_field_2").fadeIn();
                } else {
                    $("#shipping_address_2_field_2").fadeOut();
                }
            });
        });
    </script>

经过测试并且也可以工作......

But you should need to set the fields to be not required as you will face some problems when submitting data… This will oblige you to make some other changes in order to get something functional. But this will be a new question…