在Woocommerce结帐中的点击事件上显示或隐藏特定的计费字段

时间:2019-03-09 17:40:07

标签: php wordpress woocommerce field checkout

我对结帐页面上完成的工作有疑问。看来可行,但我不知道该程序是否正确,或者是否有可能以一种更清洁的方式进行。

我需要从开票表格中隐藏一些字段,这些字段涉及可选的发票请求。 然后,在表格之后,我立即勾上了一个钩子,上面写着“您需要帐单吗?”然后使用jQuery单击它会打开一个特定的div。我的意图是使该字段与发票申请相关,例如增值税号等...

这就是我所做的:我覆盖了form-b​​illing.php文件,并隐藏了计费字段的默认视图:

<div class="woocommerce-billing-fields__field-wrapper">
    <?php
        $fields = $checkout->get_checkout_fields( 'billing' );

        foreach ( $fields as $key => $field ) {
            if ( isset( $field['country_field'], $fields[ $field['country_field'] ] ) ) {
                $field['country'] = $checkout->get_value( $field['country_field'] );
            }


 //here i only added this from original template:

    if ($field['label'] != 'Partita Iva') {
      woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );
    }

        }
    ?>
</div>

然后在functions.php中插入以下代码:

add_action( 'woocommerce_after_checkout_billing_form', 'fattura_elettronica_garage' );
function fattura_elettronica_garage(){ 
    ?>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-2 mb-2">
        <div id="click_fattura" class="caffeita_need_invoice_block pt-1 pb-1 pl-2 pr-2">
            <a class="" data-toggle="collapse" aria-expanded="true">
                <h3 class="orange mt-0">HAI BISOGNO DELLA FATTURA?</h3>
            </a>
        </div>
        <div id="fattura" class="" aria-expanded="true" style="">

            <div class="woocommerce-billing-fields__field-wrapper">
            <?php
            $checkout = new WC_Checkout();
            $fields = $checkout->get_checkout_fields( 'billing' );

            foreach ( $fields as $key => $field ) {
                if ( isset( $field['country_field'], $fields[ $field['country_field'] ] ) ) {
                    $field['country'] = $checkout->get_value( $field['country_field'] );
                }
                if ($field['label'] == 'Partita Iva') {
                    woocommerce_form_field( $key, $field, $checkout->get_value( $key ) );
                }
            }
            ?>
            <?php do_action( 'woocommerce_after_checkout_billing_form', $checkout ); ?>
            </div>
        </div>
    </div>
    <?
}

div:

<div id="fattura" class="" aria-expanded="true" >

使用jquery打开它。使用以下代码:

jQuery( "#fattura" ).hide();
jQuery('#click_fattura').click(function()
{
  jQuery( "#fattura" ).toggle( "slow", function() {
    // Animation complete.
  });

以及带有此代码的checkout额外字段:

function add_extra_field_checkout( $fields ) {
    $fields['billing_FIELD_ID'] = array(
        'label'        => __( 'Partita Iva' ),
        'type'        => 'text',
        'class'        => array( 'form-row-wide', 'update_totals_on_change' ),
        'priority'     => 110,
        'required'     => true,
                'placeholder'     => __( 'inserisci la Partita Iva' ),
    );

    return $fields;
}
add_filter( 'woocommerce_billing_fields', 'add_extra_field_checkout' );

1 个答案:

答案 0 :(得分:0)

这是一种不同的代码版本方法,显示两个相同的字段(不覆盖任何模板文件):

  • 真实的自定义结算字段(如果尚不存在CSS,则将其隐藏
  • 显示的副本带有按钮标题,可显示/隐藏字段

还有一个附加的隐藏输入字段,该字段与jQuery代码,字段验证以及保存字段值时一起使用。

现在,如果该客户存在该字段值,则实际结帐字段将显示为对应的值(并且不显示副本,因此没有显示/隐藏功能和按钮标题)

当字段值保存为自定义订单元数据时,它也保存为自定义用户元数据。

该字段还会显示在“我的帐户”>“编辑地址”>“编辑帐单地址”中。

这是完整的代码:

// Custom function with the arguments arrays for the field
function get_billing_partita_iva_field_args() {
    return array(
        'type'         => 'text',
        'label'        => __( 'Partita Iva' ),
        'placeholder'  => __( 'inserisci la Partita Iva' ),
        'class'        => array( 'form-row-wide', 'update_totals_on_change' ),
        'priority'     => 110,
        'required'     => false,
    );
}

// Inline styles for checkout page
add_action( 'woocommerce_before_checkout_form', 'display_inline_styles_before_checkout_form' );
function display_inline_styles_before_checkout_form() {
    // Hide both fields (only when "partita_iva" value doesn't exist)
    if( WC()->checkout->get_value( 'billing_partita_iva' ) )
        ?><style> #billing_partita_iva_field, #fattura-field { display:none; } </style><?php
}

// Add extra checkout billing field (hidden)
add_filter( 'woocommerce_billing_fields', 'add_extra_checkout_billing_field', 10, 1 );
function add_extra_checkout_billing_field( $fields ) {
    $fields['billing_partita_iva'] = get_billing_partita_iva_field_args();

    return $fields;
}

// Add extra checkout field (that show or hide with jQuery)
add_action( 'woocommerce_after_checkout_billing_form', 'fattura_elettronica_garage' );
function fattura_elettronica_garage( $checkout ){
    $value = $checkout->get_value( 'billing_partita_iva' );

    // Active only if "Billing Partita IVA" doesn't exist yet
    if( ! $value ) :

    echo '<div id="fattura-warper" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-2 mb-2">
    <div id="click-fattura" class="caffeita_need_invoice_block pt-1 pb-1 pl-2 pr-2" style="cursor:pointer;">
        <h3 class="orange mt-0">'.__("HAI BISOGNO DELLA FATTURA?").'</h3>
    </div>
    <div id="fattura-field" class="" aria-expanded="true">';

    // The field replacement (that jQuery show or hide)
    woocommerce_form_field( 'partita_iva', get_billing_partita_iva_field_args(), $value );

    // Hidden field (used by jQuery, for field validation and for saving the field value)
    echo '<input type="hidden" name="iva_on" id="iva_on" value="">
    </div></div>';

    // jQuery Show / hide custom checkout field
    ?>
    <script>
    jQuery(function($){
        $('#click-fattura').click(function() {
            if( $('#iva_on').val() != 1 ) {
                $('#fattura-field').show('slow');
                $('#iva_on').val('1');
            } else {
                $('#fattura-field').hide('slow');
                $('#iva_on').val('');
            }
            console.log('iva-on: '+$('#iva_on').val());
        });
    });
    </script>
    <?php
    endif;
}

// Process custom checkout field
add_filter( 'woocommerce_checkout_process', 'check_partita_iva_checkout_field' );
function check_partita_iva_checkout_field() {
    // If "partita_iva" is visible we check that the field has a value
    if( isset($_POST['iva_on']) && $_POST['iva_on'] == 1 && isset($_POST['partita_iva']) && empty($_POST['partita_iva']) )
        wc_add_notice( __( 'Si prega di compilare il campo "Partita Iva".', 'woocommerce' ), 'error' );
}

// Save custom checkout field value
add_filter( 'woocommerce_checkout_create_order', 'save_partita_iva_checkout_field_value', 10, 2 );
function save_partita_iva_checkout_field_value( $order, $data ) {

    // If "partita_iva" is visible we save the value of "partita_iva" to "billing_partita_iva"
    if( isset($_POST['partita_iva']) && ! empty($_POST['partita_iva']) ) {
        // Add order custom meta data
        $order->update_meta_data( '_billing_partita_iva', sanitize_text_field( $_POST['partita_iva'] ) );

        // Add user custom meta data
        if( $order->get_customer_id() )
            update_user_meta( $order->get_customer_id(), 'billing_partita_iva', sanitize_text_field( $_POST['partita_iva'] ) );
    }
    // If "partita_iva" value exist for the customer
    elseif( $order->get_customer_id() && $partita_iva = get_user_meta( $order->get_customer_id(), 'billing_partita_iva', true ) ) {
        // Add order custom meta data
        $order->update_meta_data( '_billing_partita_iva', sanitize_text_field( $_POST['partita_iva'] ) );
    }
}

代码进入您的活动子主题(或活动主题)的function.php文件中。经过测试,可以正常工作。