Heim  >  Artikel  >  Backend-Entwicklung  >  Wie implementiert man eine dynamische Gebühr basierend auf der Auswahl von Optionsfeldern im WooCommerce Checkout?

Wie implementiert man eine dynamische Gebühr basierend auf der Auswahl von Optionsfeldern im WooCommerce Checkout?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-20 17:55:31494Durchsuche

How to implement a Dynamic Fee Based on Radio Button Selection in WooCommerce Checkout?

Dynamische Gebühr basierend auf der Auswahl von Optionsfeldern im WooCommerce-Checkout

Um eine dynamische Gebühr basierend auf der Auswahl von Optionsfeldern im WooCommerce-Checkout zu implementieren, muss die Die folgenden Schritte werden empfohlen:

Radio-Formularfeld anpassen

Aktualisieren Sie die Aktion „woocommerce_form_field_radio“, um das Radio-Button-Formularfeld zu ändern. Dies kann das Benutzererlebnis verbessern, indem sichergestellt wird, dass Etiketten inline angezeigt werden.

<code class="php">add_action( 'woocommerce_form_field_radio', 'custom_form_field_radio', 20, 4 );
function custom_form_field_radio( $field, $key, $args, $value ) {
    if ( ! empty( $args['options'] ) &amp;&amp; is_checkout() ) {
        $field = str_replace( '</label><input ', '</label><br><input ', $field );
        $field = str_replace( '<label ', '<label style="display:inline;margin-left:8px;" ', $field );
    }
    return $field;
}

Hinzufügen einer benutzerdefinierten Verpackungsgebühr

Anhängen an woocommerce_cart_calculate_fees, um eine dynamische Verpackungsgebühr hinzuzufügen. Es prüft, ob die ausgewählte Verpackungsoption in der Sitzung ausgewählt ist, und wendet die entsprechende Gebühr an.

<code class="php">add_action( 'woocommerce_cart_calculate_fees', 'add_packaging_fee', 20, 1 );
function add_packaging_fee( $cart ) {
    if ( is_admin() &amp;&amp; ! defined( 'DOING_AJAX' ) )
        return;

    $packing_fee = WC()->session->get( 'chosen_packing' ); // Dynamic packing fee
    $fee = $packing_fee === 'box' ? 9.00 : 3.00;
    $cart->add_fee( __( 'Packaging fee', 'woocommerce' ), $fee );
}</code>

Hinzufügen von Optionsfeldfeldern

Hinzufügen von woocommerce_review_order_after_shipping, um benutzerdefinierte Optionsfeldfelder hinzuzufügen für die Verpackungsauswahl.

<code class="php">add_action( 'woocommerce_review_order_after_shipping', 'checkout_shipping_form_packing_addition', 20 );
function checkout_shipping_form_packing_addition() {
    $domain = 'woocommerce';

    echo '<tr class="packing-select"><th>' . __('Packing options', $domain) . '</th><td>';

    $chosen   = WC()->session->get('chosen_packing');
    $chosen   = empty($chosen) ? WC()->checkout->get_value('radio_packing') : $chosen;
    $chosen   = empty($chosen) ? 'bag' : $chosen;

    // Add a custom checkbox field
    woocommerce_form_field( 'radio_packing', array(
        'type' => 'radio',
        'class' => array( 'form-row-wide packing' ),
        'options' => array(
            'bag' => __('In a bag '.wc_price(3.00), $domain),
            'box' => __('In a gift box '.wc_price(9.00), $domain),
        ),
        'default' => $chosen,
    ), $chosen );

    echo '</td></tr>';
}</code>

jQuery- und Ajax-Skript

Dieses Skript verwaltet die Ajax-Funktionalität zum Aktualisieren von Gebühren bei der Auswahl von Optionsfeldern.

<code class="php">add_action( 'wp_footer', 'checkout_shipping_packing_script' );
function checkout_shipping_packing_script() {
    if ( ! is_checkout() )
        return; // Only checkout page
    ?>
    <script type="text/javascript">
    jQuery( function($){
        $('form.checkout').on('change', 'input[name=radio_packing]', function(e){
            e.preventDefault();
            var p = $(this).val();
            $.ajax({
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'woo_get_ajax_data',
                    'packing': p,
                },
                success: function (result) {
                    $('body').trigger('update_checkout');
                    console.log('response: '+result); // just for testing | TO BE REMOVED
                },
                error: function(error){
                    console.log(error); // just for testing | TO BE REMOVED
                }
            });
        });
    });
    </script>
    <?php

}

PHP Ajax-Funktion

Diese Funktion verarbeitet die Ajax-Anfrage, speichert die ausgewählte Packoption und gibt sie zurück.

<code class="php">add_action( 'wp_ajax_woo_get_ajax_data', 'woo_get_ajax_data' );
add_action( 'wp_ajax_nopriv_woo_get_ajax_data', 'woo_get_ajax_data' );
function woo_get_ajax_data() {
    if ( isset($_POST['packing']) ){
        $packing = sanitize_key( $_POST['packing'] );
        WC()->session->set('chosen_packing', $packing );
        echo json_encode( $packing );
    }
    die(); // Alway at the end (to avoid server error 500)
}</code>

Diese Lösung verwendet jQuery, Ajax, und benutzerdefinierte WooCommerce-Funktionalität, um Gebühren basierend auf der Auswahl von Optionsfeldern dynamisch zu aktualisieren und so ein reibungsloses Benutzererlebnis während des Bezahlvorgangs zu gewährleisten.

Das obige ist der detaillierte Inhalt vonWie implementiert man eine dynamische Gebühr basierend auf der Auswahl von Optionsfeldern im WooCommerce Checkout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn