Триггер update_checkout с настраиваемым полем выбора в Woocommerce - PullRequest
Новая
       11

Триггер update_checkout с настраиваемым полем выбора в Woocommerce

0 голосов
/ 29 августа 2018

Проблема: Код jQuery не вызывает "update_checkout".

Я добавил настраиваемое поле выбора в таблицу просмотра заказов, чтобы клиенты могли выбирать сумму чаевых, как показано:

enter image description here

Я хочу вызвать update_checkout при изменении значения, но этого не происходит. Если я выбираю способ доставки, он вызывает «update_checkout» и корректно обновляет процентную сумму.

HTML: 

<tr class="propina">
        <th id="propina_field">Propina</th>
            <td>
                <span class="woocommerce-input-wrapper">
                    <select name="propina" id="propina" class="select" data-placeholder="">
                        <option value="0">0</option>
                        <option value="1">1%</option>
                        <option value="2">2%</option>
                        <option value="3">3%</option>
                        <option value="5">5%</option>
                        <option value="7">7%</option>
                        <option selected value="10">10%</option>
                    </select>
                </span>
            </td>                           
</tr>

functions.php: 

add_action( 'wp_head', 'woocommerce_tip' );
function woocommerce_tip() {
    ?>
    <script type="text/javascript">
    jQuery( document ).ready(function( $ ) {
        $('#propina').change(function(){
            jQuery('body').trigger('update_checkout');
        });
    });
    </script>
    <?php
}

1 Ответ

0 голосов
/ 29 августа 2018

Обновлено

Чтобы проверить ваш код, как на скриншоте вашего вопроса, я использовал следующее, чтобы отобразить то же поле выбора в правильном месте: 

add_action('woocommerce_review_order_before_order_total', 'review_order_tip_line');
function review_order_tip_line() {
    ?>
    <tr class="propina"><th id="propina_field">Propina</th><td><span class="woocommerce-input-wrapper">
        <select name="propina" id="propina" class="select" data-placeholder="">
            <option value="0">0</option>
            <option value="1">1%</option>
            <option value="2">2%</option>
            <option value="3">3%</option>
            <option value="5">5%</option>
            <option value="7">7%</option>
            <option selected value="10">10%</option>
        </select>
    </td></span></tr>
    <?php
}

Тогда вот ваш повторный код jQuery: 

add_action( 'wp_footer', 'woocommerce_tip_script' );
function woocommerce_tip_script() {
    // Only on checkout page
    if( ! is_checkout() ) return;
    ?>
    <script type="text/javascript">
    jQuery(function($){
        // On 'select#propina' change (live event)
        $('form.woocommerce-checkout').on( 'change', 'select#propina', function(){
            // Set the select value in a variable
            var a = $(this).val();

            // Update checkout event
            $('body').trigger('update_checkout');

            // Restoring the chosen option value
            $('select#propina option[value='+a+']').prop('selected', true);

            // Just for testing (To be removed)
            console.log('trigger "update_checkout"');

            // Once checkout has been updated
            $('body').on('updated_checkout', function(){
                // Restoring the chosen option value
                $('select#propina option[value='+a+']').prop('selected', true);

                // Just for testing (To be removed)
                console.log('"updated_checkout" event, restore selected option value: '+a);
            });
        });
    })
    </script>
    <?php
}

Код помещается в файл function.php вашей активной дочерней темы (или активной темы). Проверено и работает.

...