Comment mettre à jour dynamiquement les frais en fonction des sélections des utilisateurs dans WooCommerce Checkout ?

Mise à jour dynamique des frais basée sur la sélection du bouton radio dans WooCommerce Checkout

Lors du développement d'un plugin WooCommerce, il est souvent nécessaire d'ajouter des frais dynamiques à le processus de paiement. Un exemple courant consiste à proposer différentes options d’emballage à des coûts variables, comme un sac en plastique ou un coffret cadeau. Cet article explore les meilleures façons d'y parvenir et aborde les considérations de sécurité.

Ajout dynamique des frais à l'aide de WC_Cart

<code class="php">function at87_add_custom_fees( WC_Cart $cart ){
    $fees = 3; // fee amount
    $fees = isset($_GET['test']) ? $_GET['test'] : 3;

    $cart->add_fee( 'Emballagegebyr', intval($fees));
}</code>

Ce code ajoute des frais au panier de manière dynamique sur la valeur obtenue de $_GET['test'], qui pourrait être modifiée à l'aide de JavaScript ou d'une requête Ajax. Cependant, il est important de noter que l'utilisation de $_GET n'est pas sécurisée et doit être utilisée avec prudence.

Solution basée sur AJAX

Une approche plus sécurisée et dynamique consiste à utilisez AJAX pour mettre à jour les frais. Le code suivant fournit une solution complète :

<code class="php">// Ajax script
add_action( 'wp_footer', 'checkout_shipping_packing_script' );
function checkout_shipping_packing_script() {
    if ( ! is_checkout() )
        return;

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

// Ajax request handler
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>

Ce code utilise Ajax pour envoyer l'option d'emballage sélectionnée au serveur, qui l'enregistre ensuite dans la session WooCommerce. Le paiement est mis à jour dynamiquement sans qu'il soit nécessaire d'actualiser la page.

Conclusion

L'approche basée sur Ajax fournit une méthode sécurisée et efficace pour mettre à jour les frais de manière dynamique en fonction de l'utilisateur. sélections dans le processus de paiement WooCommerce. Il élimine le besoin de $_GET et garantit une expérience de paiement fluide et sécurisée.

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!