在 Woocommerce 中选择的运输方式更改时显示或隐藏 html 元素

Posted 2023-05-09

【中文标题】在 Woocommerce 中选择的运输方式更改时显示或隐藏 html 元素

【英文标题】：Show or hide html element on chosen shipping method change in Woocommerce

【发布时间】：2019-01-15 07:33:48

【问题描述】：

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

Show or hide checkout fields based on shipping method in Woocommerce 3

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

然后基于this answer thread这是我到目前为止的代码：

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

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

非常感谢任何帮助。

补充编辑：

<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 元素的显示属性从块更改为无，反之亦然。

【问题讨论】：

这打算在哪个页面上使用？ …我想在自定义 html 结构上结帐。因此，如果您在问题中包含您希望使其工作的生成的 html 结构，那会更好。也请给出使用这个 html 元素的确切位置。

嗨 Loic，我在这里查看了您的其他答案：***.com/questions/47738260/…，它对我有部分作用。页面加载时的初始化功能不起作用。我会尽快添加我的代码。

这适用于结帐页面，也可能是购物车页面。我试图隐藏的 html 元素位于 中。正如我在代码中所写的那样，它是一个带有 id 的

我已经用简化的代码版本回答了......但是你应该在你的问题中添加必要的相关生成的html代码，请记住：“寻求调试帮助的问题（”为什么不是这个代码工作？") 必须包含所需的行为、特定问题或错误以及在问题本身中重现它所需的最短代码"。

注意，谢谢提醒。已经编辑了原始问题。

【参考方案1】：

所需的代码比我在其他答案中使用的代码要简单得多，但您需要确保 目标选择的运输方式 是 'distance_rate_shipping'，因为我无法测试它。

关于初始化问题，请看我回答末尾公开的解决方案。

所需的简化代码：

// 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 文件中。它应该可以工作。

---

初始化问题：

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

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

所以应该尝试替换这个：

// 1. On start
showHideDeliveryDate();

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

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

【讨论】：

嗨 Loic，非常感谢。我已经尝试过了，并且由于初始化不起作用，我也使用了 setTimeout，但我认为问题不在于您的代码，而在于其他插件。起初这些元素是隐藏的，但后来又出现了。插件必须在处理过程中做了一些事情。至于您的代码，它按预期工作。我会将其标记为已解决。谢谢。

绝对赞成！谢谢你提醒我。所以更新，我将超时设置为高值，如 5000，它可以工作。可能是其他插件加载时间过长或什么的，我不确定..

@DickoMasSoebekti 好的，我已经添加到我的答案中，之后是另一个答案。请尝试一下。我希望这就是方式。

我已经尝试了替代代码，它似乎与您的原始答案相同。我看到你用 CSS 做了什么，好主意。但不知何故，我认为它的表现是一样的。没关系 Loic，我现在已经将延迟设置为 2000，我认为它足够安全，虽然有时它仍然会错过初始化，但大多数时候它工作得很好。非常感谢！