クーポン用の条件付きロジックを作成する方法

はじめに

クーポンに条件付きロジックを作成しますか？ このチュートリアルを使用すると、ユーザーの選択に基づいてスクリプトが適切なクーポンをインテリジェントに選択する動的なフォームを作成できます。この包括的なチュートリアルでは、このフォームの作成プロセスと、自動クーポン適用用の条件付きスクリプトの実装について、ステップバイステップで説明します。早速始めましょう！

クーポンの作成

まず、3つの新しいクーポンコードを作成します。それぞれがクーポンに特定のパーセンテージ金額を与えるように作成されています。

WPFormsでクーポンを作成する方法についてサポートが必要な場合は、こちらのガイドをご覧ください。

フォームの作成

次に、フォームを作成し、必要なフィールドを追加します。フォームの作成についてサポートが必要な場合は、こちらの役立つドキュメントをご覧ください。

ドロップダウンオプションの追加

必要なフィールドをフォームに追加したので、ドロップダウンフィールドを追加しましょう。このフィールドを、クーポンの条件付きロジックの基準として使用します。選択されたオプションに基づいて、正しいクーポンコードが表示されます。

このチュートリアルの目的のために、ドロップダウンオプションは次のようになります。

• — 1つ選択してください —
• コード 1
• コード 2
• コード 3

クーポンフィールドにスマートロジックを適用する

次に、クーポンフィールドをフォームに追加します。最初のステップでフォームをこれらのクーポンに既に割り当てているため、フィールドをフォームに追加するとクーポンコードが表示されます。

ただし、コードが選択されるまでこのフィールドを表示したくないため、フィールドにも条件付きロジックを適用します。このロジックをフィールドに適用するには、クーポンフィールドを選択し、スマートロジックタブをクリックします。

前のステップでドロップダウンフィールドのオプションを定義したときに設定した— 1つ選択してください —ではない場合、このフィールドを表示するようにフィールドに指示します。これにより、フォームが読み込まれると、オプションが選択されるまでクーポンフィールドは表示されません。

スニペットの追加

これで、スニペットをサイトに追加する時間です。スニペットをサイトに追加する方法と場所がわからない場合は、こちらの役立つガイドをご覧ください。

/**
 * Conditional logic for coupons
 *
 * @link https://wpforms.com/developers/how-to-display-the-age-from-a-date-picker-field/
*/
  
function wpf_dev_conditional_logic_for_coupons() {
    ?>
    <script>
        jQuery(function($){
             
            // Look only at form ID 3382
            $( "form#wpforms-form-3382" ).on( 'change', function () {
                 
                // Set the value of the Dropdown field ID 38 that has been selected
                // to a variable named selectedval
                var selectedval = $( "#wpforms-3382-field_38 option:selected" ).text();
				
                // If the dropdown selection is our Code 1 coupon code, 
                // populate the coupon field ID 39 with the coupon code 25OFF
                if(selectedval == "Code 1"){
                    document.getElementById( 'wpforms-3382-field_39' ).value = '25OFF';
                } 
				// If the dropdown selection is our Code 2 coupon code, 
				// populate the coupon field ID 39 with the coupon code 50OFF
                else if(selectedval == "Code 2") {
                    document.getElementById( 'wpforms-3382-field_39' ).value = '50OFF';
                }
				// If the dropdown selection is our Code 3 coupon code, 
				// populate the coupon field ID 39 with the coupon code 75OFF
                else if(selectedval == "Code 3") {
                    document.getElementById( 'wpforms-3382-field_39' ).value = '75OFF';
                }
            });
           });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_conditional_logic_for_coupons', 10 );

このスニペットは、フォームID3382のみを確認します。次に、前のステップでドロップダウンフィールドのオプションから選択されたオプションを確認します。これはフィールドID_38であり、その値をselectedvalという変数に割り当てます。

スニペットの次の数行では、ドロップダウンの選択と、各クーポンコード用に設定した名前を比較します。たとえば、Code 2 を選択した場合、Coupon フィールド（フィールドID _39）に 25OFF の value が割り当てられます。訪問者は引き続き Apply ボタンをクリックして割引を適用する必要がありますが、選択はすでに完了しています。

これで、クーポン用の条件付きロジックの設定は完了です。Date フィールドにも同じロジックを使用しますか？日付ピッカーで条件付きロジックを使用する方法の詳細ガイドをご覧ください。

関連

アクション参照: wpforms_wp_footer_end