Maison > développement back-end > tutoriel php > Comment implémenter des frais dynamiques basés sur la sélection d'un bouton radio dans WooCommerce Checkout ?

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

Mary-Kate Olsen
Libérer: 2024-10-20 17:55:31
original
594 Les gens l'ont consulté

How to implement a Dynamic Fee Based on Radio Button Selection in 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;
}
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

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

}
Copier après la connexion

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>
Copier après la connexion

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!

source:php
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal