Показывать или скрывать html-элемент при изменении выбранного способа доставки в Woocommerce

Question

Показывать или скрывать html-элемент при изменении выбранного способа доставки в Woocommerce

Я пытаюсь показать/скрыть некоторые элементы со своей страницы оформления заказа, основываясь на выбранном способе доставки. Элементы страницы, которые я пытаюсь показать/скрыть, взяты из другого плагина, поэтому я попытался изменить для них свойства отображения. Я посмотрел на многие темы, такие как:

Показывать или скрывать поля оформления заказа в зависимости от способа доставки в Woocommerce 3

Но это для полей оформления заказа, и я не уверен, как это сделать для элементов страницы.

Затем на основе этот ответ нить Вот мой код на данный момент:

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 с блока на нет и наоборот.

4

php wordpress jquery woocommerce checkout

Author: Dicko Mas Soebekti, 2018-08-08

Source

1 answers

score 3 · Accepted Answer

Необходимый код - это нечто гораздо более простое, чем тот, который использовался в других моих ответах, но вы должны быть уверены, что выбранный целевой способ доставки '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);