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

Mary-Kate Olsen
Freigeben: 2024-10-20 17:55:31
Original
560 Leute haben es durchsucht

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;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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

}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage