Heim > Backend-Entwicklung > PHP-Tutorial > Wie implementiert man dynamische Gebührenanpassungen basierend auf der Auswahl von Optionsfeldern im WooCommerce-Checkout?

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

DDD
Freigeben: 2024-10-20 17:58:31
Original
524 Leute haben es durchsucht

How to Implement Dynamic Fee Adjustments Based on Radio Button Selections in WooCommerce Checkout?

Gebühr dynamisch basierend auf Optionsfeldern im WooCommerce-Checkout aktualisieren

Einführung

Verbessern Sie Ihr WooCommerce-Checkout-Erlebnis, indem Sie dynamische Gebührenaktualisierungen basierend auf der Auswahl von Optionsfeldern aktivieren . Dadurch können Sie unterschiedliche Verpackungsoptionen und Gebühren anbieten und so auf die Vorlieben der Kunden eingehen.

Code-Implementierung

Implementieren Sie den folgenden Code in Ihrer Datei „functions.php“, um die gewünschte Funktionalität zu erreichen:

<code class="php">// Add a custom dynamic packaging fee
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 );
}

// Add a custom radio fields for packaging selection
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

JavaScript und AJAX-Skript

Um nahtlose Aktualisierungen bei der Auswahl von Optionsfeldern zu gewährleisten, implementieren Sie dieses JavaScript- und AJAX-Skript:

<code class="javascript">// jQuery - Ajax script
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 (Receiving request and saving to WC session)
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

Notizen

  • Stellen Sie sicher, dass dieser Code zu einem aktiven untergeordneten Theme oder direkt zur Datei „functions.php“ Ihres Themes hinzugefügt wird.
  • Der bereitgestellte Code berücksichtigt nicht angemeldete Benutzer und ist mit der neuesten WooCommerce-Version (3.7.x) kompatibel. .
  • Wenn Probleme auftreten, entfernen Sie alle vorherigen Anpassungen im Zusammenhang mit Optionsfeldern und Verpackungsoptionen.

Das obige ist der detaillierte Inhalt vonWie implementiert man dynamische Gebührenanpassungen 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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage