Comment implémenter des frais dynamiques basés sur la sélection d'un bouton radio dans WooCommerce Checkout ?

Frais dynamiques basés sur la sélection d'un bouton radio dans la caisse WooCommerce

Pour implémenter des frais dynamiques basés sur la sélection d'un bouton radio dans la caisse WooCommerce, le les étapes suivantes sont recommandées :

Personnalisation du champ de formulaire radio

Mettez à jour l'action woocommerce_form_field_radio pour modifier le champ de formulaire du bouton radio. Cela peut améliorer l'expérience utilisateur en garantissant que les étiquettes sont affichées en ligne.

<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;
}

Ajout de frais d'emballage personnalisés

Joignez-le à woocommerce_cart_calculate_fees pour ajouter des frais d'emballage dynamiques. Il vérifie l'option d'emballage sélectionnée au cours de la session et applique les frais appropriés.

<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>

Ajout de champs de boutons radio

Connectez-vous à woocommerce_review_order_after_shipping pour ajouter des champs de boutons radio personnalisés pour la sélection des emballages.

<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 et Ajax Script

Ce script gère la fonctionnalité Ajax pour la mise à jour des frais sur la sélection des boutons radio.

<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

}

Fonction PHP Ajax

Cette fonction traite la requête Ajax, stocke l'option d'emballage sélectionnée et la renvoie.

<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>

Cette solution utilise jQuery, Ajax, et une fonctionnalité WooCommerce personnalisée pour mettre à jour dynamiquement les frais en fonction de la sélection du bouton radio, garantissant ainsi une expérience utilisateur fluide lors du paiement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!