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

标签 php jquery wordpress woocommerce checkout

我正在尝试修改 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;
    }
 

最佳答案

首先你可以在涉及同一个钩子(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

关于php - 有条件地自定义 WooCommerce 结账字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48144199/

相关文章:

jquery - 如何使用 scroll fixed witin parent..我想要滚动但是 nexbutton 和 prevbuton 是固定移动的..如何使用 jquery

javascript - Ajax成功函数无法在自定义函数内访问

css - 如何通过CSS改变背景图片的颜色?

database - 优化 Wordpress 数据库设计

html - 将滚动条更改为 div 的左侧

c# - Mysql和c#更新

php - 例程 xxx 的 OUT 或 INOUT 参数 1 不是 BEFORE 触发器中的变量或 NEW 伪变量

php - 引用 - 这个错误在 PHP 中是什么意思?

php - 无法连接到 PostgreSQL 服务器

c# - 如何覆盖 TextBox 文本属性