ホームページ > バックエンド開発 > PHPチュートリアル > WooCommerce Checkout でラジオ ボタンの選択に基づいて動的な料金を実装するにはどうすればよいですか?

WooCommerce Checkout でラジオ ボタンの選択に基づいて動的な料金を実装するにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-10-20 17:55:31
オリジナル
592 人が閲覧しました

How to implement a Dynamic Fee Based on Radio Button Selection in WooCommerce Checkout?

WooCommerce チェックアウトでのラジオ ボタンの選択に基づく動的料金

WooCommerce チェックアウトでのラジオ ボタンの選択に基づいて動的料金を実装するには、次の手順をお勧めします:

ラジオ フォーム フィールドのカスタマイズ

woocommerce_form_field_radio アクションを更新して、ラジオ ボタン フォーム フィールドを変更します。これにより、ラベルがインラインで表示されるようになり、ユーザー エクスペリエンスが向上します。

<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;
}
ログイン後にコピー

カスタム パッケージング料金の追加

動的なパッケージング料金を追加するには、woocommerce_cart_calculate_fees にアタッチします。セッションで選択された梱包オプションを確認し、適切な料金を適用します。

<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>
ログイン後にコピー

ラジオ ボタン フィールドの追加

woocommerce_review_order_after_shipping に接続して、カスタム ラジオ ボタン フィールドを追加します。パッケージングの選択用。

<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 および Ajax スクリプト

このスクリプトは、ラジオ ボタンの選択で料金を更新するための Ajax 機能を処理します。

<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

}
ログイン後にコピー

PHP Ajax 関数

この関数は Ajax リクエストを処理し、選択されたパッキング オプションを保存して返します。

<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>
ログイン後にコピー

このソリューションは jQuery、Ajax、ラジオ ボタンの選択に基づいて料金を動的に更新するカスタム WooCommerce 機能により、チェックアウト時のスムーズなユーザー エクスペリエンスを保証します。

以上がWooCommerce Checkout でラジオ ボタンの選択に基づいて動的な料金を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート