在Woocommerce中显示或隐藏所选送货方式更改的html元素 [英] Show or hide html element on chosen shipping method change in Woocommerce

问题描述

我正在尝试根据所选的送货方式显示/隐藏我的结帐页面中的某些元素。我试图显示/隐藏的页面元素来自另一个插件，因此我尝试更改它们的显示属性。我看过很多线程：

I'm trying to show/hide some elements from my checkout page, based on the chosen shipping method. The page elements I'm trying to show/hide come from another plugin, so I tried to change the display properties for them. I've looked to many thread like:

根据Woocommerce 3中的送货方式显示或隐藏结帐字段

但它适用于结帐字段，我不知道如何为页面元素执行此操作。

But it's for checkout fields, and I'm not sure how to do it for page elements.

然后基于 此答案帖 这是我到目前为止的代码：

Then based on this answer thread Here's my code so far:

add_action( 'wp_footer', 'conditionally_hidding_order_delivery_date' );
function conditionally_hidding_order_delivery_date(){
    // Only on checkout page
    if( ! is_checkout() ) return;

    // HERE your shipping methods rate ID "Home delivery"
    $home_delivery = 'distance_rate_shipping';
    ?>
    <script>
        jQuery(function($){
            // Choosen shipping method selectors slug
            var shipMethod = 'input[name^="shipping_method"]',
                shipMethodChecked = shipMethod+':checked';

            // Function that shows or hide imput select fields
            function showHide( actionToDo='show', selector='' ){
                if( actionToDo == 'show' )
                    $(selector).show( 200, function(){
                        $(this).addClass("validate-required");
                    });
                else
                    $(selector).hide( 200, function(){
                        $(this).removeClass("validate-required");
                    });
                $(selector).removeClass("woocommerce-validated");
                $(selector).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
            }

            // Initialising: Hide if choosen shipping method is "Home delivery"
            if( $(shipMethodChecked).val() != '<?php echo $home_delivery; ?>' ) {
                showHide('hide','#e_deliverydate_field' );
                showHide('hide','#time_slot_field' );
            }

            // Live event (When shipping method is changed)
            $( 'form.checkout' ).on( 'change', shipMethod, function() {
                if( $(shipMethodChecked).val() == '<?php echo $home_delivery; ?>' ) {
                        showHide('show','#e_deliverydate_field' );
                        showHide('show','#time_slot_field' );
                }
                else {
                        showHide('hide','#e_deliverydate_field' );
                        showHide('hide','#time_slot_field' );
                }
            });
        });
    </script>
    <?php
}

但它没有完全正常工作（初始化）功能不起作用。）

But it's not working completely (the initializing function is not working.)

非常感谢任何帮助。

补充编辑：

<p class="form-row form-row-wide validate-required" id="e_deliverydate_field" data-priority="" style="display: block;"><label for="e_deliverydate" class="">Date<abbr class="required" title="required">*</abbr></label><span class="woocommerce-input-wrapper"><input class="input-text hasDatepicker" name="e_deliverydate" id="e_deliverydate" placeholder="Choose a Date" value="" style="cursor:text !important;" type="text"></span></p>

我的目标是将p元素的显示属性从块更改为无，反之亦然。

My objective is to change the display properties for p element from block to none, and vice versa.

推荐答案

所需的代码比我在其他答案中使用的代码简单得多，但你需要确保有针对性的选择送货方式是'distance_rate_shipping'因为我无法测试。

The needed code is something much more simple, than the one used in my other answers, but you need to be sure that the targeted chosen shipping method is 'distance_rate_shipping' as I can't test it.

对于初始化问题，请参阅我的答案末尾公开的解决方案。

For initialization problem, see the solution exposed at the end of my answer.

简化所需代码：

// Embedded jQuery script
add_action( 'wp_footer', 'checkout_delivery_date_script' );
function checkout_delivery_date_script() {
    // Only checkout page
    if( ! ( is_checkout() && ! is_wc_endpoint_url() ) ) return;
    ?>
    <script type="text/javascript">
    jQuery( function($){
        var a = 'input[name^="shipping_method"]', b = a+':checked',
            c = 'distance_rate_shipping',
            d = '#e_deliverydate_field,#time_slot_field';

        // Utility function that show or hide the delivery date
        function showHideDeliveryDate(){
            if( $(b).val() == c )
                $(d).show();
            else
                $(d).hide('fast');
            console.log('Chosen shipping method: '+$(b).val()); // <== Just for testing (to be removed)
        }

        // 1. On start
        showHideDeliveryDate();

        // 2. On live event "change" of chosen shipping method
        $('form.checkout').on('change', a, function(){
            showHideDeliveryDate();
        });
    });
    </script>
    <?php
}

代码进入function.php文件你的活跃儿童主题（或主题）。它应该可以工作。

Code goes in function.php file of your active child theme (or theme). It should work.

初始化问题：

肯定是因为您使用的插件生成的交付日期输出在初始化后被延迟

It's certainly because the plugin you are using that generates the delivery date output is delayed after initialization

解决方案可以在初始化执行时添加一些延迟。

The solution can be to add some delay on initialization execution.

所以应该尝试替换它：

// 1. On start
showHideDeliveryDate();

通过我的代码中的以下内容（将执行延迟调整为高于或低于<的值） / em> 500 ）：

// 1. On start
setTimeout(function(){
    showHideDeliveryDate();
}, 500);

这篇关于在Woocommerce中显示或隐藏所选送货方式更改的html元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！