اضافه کردن هزینه‌های پرداخت در ووکامرس به صورت ایجکس

با سلام خدمت شما عزیزانِ BlueWP.ir، می‌دانستید که می‌توانید در صفحه تسویه حساب (پرداخت) ووکامرس، فیلدهای اضافی را نمایش دهید؟ در این آموزش به نحوه اضافه کردن هزینه‌های پرداخت در ووکامرس به صورت ایجکس خواهیم پرداخت. با وردپرس آبی همراه باشید.

مثلاً شما وب‌سایت کاتالوگ (صرفاً نمایشگاهی) یا فروشگاه آنلاین رستوان و تهیه غذای شما یک‌سری موارد اضافی دارد که می‌خواهید مشتری آن را هنگام پرداخت انتخاب یا تایید کند. به عنوان نمونه اگر رستوران شما، هزینه پیک و نحوه آن را برعهده مشتری می‌گذارد، می‌توانید با قرار دادن چند گزینه یا دکمه رادیویی، انتخاب را برعهده مشتری بگذارید. این تنها یک مثال است و تصور نکنید این آموزش تنها برای چنین افرادی است.

به هر دلیلی ممکن است شما نیاز به دکمه‌های انتخاب شونده‌ای در صفحه پرداخت داشته باشید و خدمات و هزینه‌ها را در آن‌ها تعریف و تعیین نمایید. با این تکه کدی که در این مقاله آموزشی قرار دادیم می‌توانید به راحتی این قابلیت را به فروشگاه خود به صورت کاملاً ایجکس (بدون نیاز به رفرش صفحه) اضافه کنید.

البته افزونه‌های پیچیده‌ای نیز برای این کار طراحی شده‌اند که دقیقاً برای اضافه کردن چنین مواردی هستند. افزونه Yith Product Add-ons یا افزونه WooCommerce Checkout Add-ons از جمله این افزونه‌های آماده هستند.

اما اگر می‌خواهید از افزونه استفاده نکنید و نیازی به امکانات اضافه ندارید، می‌توانید کد زیر را به فایل functions.php قالب خود اضافه کنید. توجه داشته باشید ابتدا از این فایل یک کپی بعنوان بک‌آپ بگیرید.

/**
 * @snippet       Dynamic Radio Buttons Fees - WooCommerce Checkout
 * @how-to        Watch tutorial @ https://themefour.com/add-fees-on-woocommerce-checkout-by-ajax/
 * @sourcecode    https://themefour.com/add-fees-on-woocommerce-checkout-by-ajax/
 * @author        themefour.com
 * @compatible    WooCommerce 3.4.5 and WooCommerce 3.5.0 Beta 1
 */
 
// Part 1
// Options
// Display Radio Buttons
// Uses woocommerce_form_field()
 
add_action( 'woocommerce_review_order_before_payment', 'themefour_checkout_radio_choice' );
 
function themefour_checkout_radio_choice() {
     
    $chosen = WC()->session->get('radio_chosen');
    $chosen = empty( $chosen ) ? WC()->checkout->get_value('radio_choice') : $chosen;
    $chosen = empty( $chosen ) ? 'no_option' : $chosen;
         
    $args = array(
    'type' => 'radio',
    'class' => array( 'form-row-wide' ),
    'options' => array(
  
       
        'no_option' => 'بدون انتخاب',
        'option_1' => 'گزینه اول (۲۰۰۰ تومان)',
        'option_2' => 'گزینه دوم ( ۵۰۰۰ تومان)',
    
    ),
    'default' => $chosen
    );
     
    echo '<div id="checkout-radio">';
    echo '<h3>موارد جانبی سفارشی</h3>';
    woocommerce_form_field( 'radio_choice', $args, $chosen );
    echo '</div>';
     
}
 
// Part 2
// Add Fee and Calculate Total
// Based on session's "radio_chosen"
 
#۲ Calculate New Total
 
add_action( 'woocommerce_cart_calculate_fees', 'themefour_checkout_radio_choice_fee', 20, 1 );
 
function themefour_checkout_radio_choice_fee( $cart ) {
  
  if ( is_admin() && ! defined( 'DOING_AJAX' ) ) return;
   
  $radio = WC()->session->get( 'radio_chosen' );
     
  if ( "option_1" == $radio ) {
    $fee = 2000; // Any currency On WooCommerce
  } elseif ( "option_2" == $radio ) {
    $fee = 5000;  // Any currency On WooCommerce
  }
   
  $cart->add_fee( __('هزینه موارد اضافی', 'woocommerce'), $fee );
  
}
 
// Part 3
// Refresh Checkout if Radio Changes
// Uses jQuery
 
add_action( 'wp_footer', 'themefour_checkout_radio_choice_refresh' );
 
function themefour_checkout_radio_choice_refresh() {
if ( ! is_checkout() ) return;
    ?>
    <script type="text/javascript">
    jQuery( function($){
        $('form.checkout').on('change', 'input[name=radio_choice]', function(e){
            e.preventDefault();
            var p = $(this).val();
            $.ajax({
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'woo_get_ajax_data',
                    'radio': p,
                },
                success: function (result) {
                    $('body').trigger('update_checkout');
                }
            });
        });
    });
    </script>
    <?php
}
 
// Part 4 
// Add Radio Choice to Session
// Uses Ajax
 
add_action( 'wp_ajax_woo_get_ajax_data', 'themefour_checkout_radio_choice_set_session' );
add_action( 'wp_ajax_nopriv_woo_get_ajax_data', 'themefour_checkout_radio_choice_set_session' );
 
function themefour_checkout_radio_choice_set_session() {
    if ( isset($_POST['radio']) ){
        $radio = sanitize_key( $_POST['radio'] );
        WC()->session->set('radio_chosen', $radio );
        echo json_encode( $radio );
    }
    die();
}

با انتخاب هر گزینه، همان لحظه گزینه انتخاب می‌شود و هزینه آن محاسبه و به کل هزینه سفارش اضافه خواهد شد.

شخصی‌سازی عناوین و گزینه‌ها

برای شخصی‌سازی عنوان‌ها و گزینه‌ها در تکه کد کاملاً به صورت آسان این موارد را با کامنت (//) مشخص کرده‌ایم. برای تغییر عنوان “موارد جانبی سفارشی” به خط ۳۷ مراجعه کنید. این عنوان‌ِ گزینه‌های رادیویی شما در صفحه تسویه حساب هستند.

برای حذف اختیاری بودن انتخاب گزینه‌ها، کافی است خط ۲۷ (کد ‘no_option’ => ‘بدون انتخاب’, ) را حذف کنید. این باعث می‌شود که گزینه اول، همیشه به صورت انتخاب شده نمایش داده شود.

برای افزودن گزینه‌های بیشتر می‌توانید به این شیوه عمل کنید:

'option_1' => 'گزینه اول (۲۰۰۰ تومان)',
 'option_2' => 'گزینه دوم ( ۵۰۰۰ تومان)',
 'option_3' => 'گزینه سوم ( ۰ تومان)',
 'option_4' => 'گزینه چهارم ( ۰ تومان)',

حتماً پس از اضافه کردن گزینه جدید دیگری، در خط ۵۶ و ۵۷ هزینه گزینه جدید خود را اضافه کنید (اگر گزینه شما دارای هزینه اضافی است). مانند روش زیر:

if ( "option_1" == $radio ) {
   $fee = 2000; // Any currency On WooCommerce
 } elseif ( "option_2" == $radio ) {
   $fee = 5000;  // Any currency On WooCommerce    
 }
 
 if ( "option_3" == $radio ) {
   $fee = 1; // Any currency On WooCommerce
 } elseif ( "option_4" == $radio ) {
   $fee = 0;  // Any currency On WooCommerce    
 }

استایل‌های دکمه‌های رادیویی از افزونه ووکامرس فراخوانی خواهند شد. اگر می‌خواهید استایل‌ها را کمی تغییر دهید. کدهای زیر را به فایل style.css یا rtl.css قالب‌تان اضافه کنید و کدهای CSS خود را درون آن بنویسید و ذخیره نمایید.

#checkout-radio{

}

.radio {
    margin: 5px;
}

جهت تغییر (هزینه موارد اضافی) در جدول پرداخت به خط ۶۲-۶۳ رجوع کنید.

به همین سادگی بدون نیاز به افزونه؛ می‌بینید که می‌توانید به راحتی به صورت Ajax و حرفه‌ای گزینه‌های خود را به صفحه تسویه حساب اضافه کنید. ناگفته نماند که این گزینه‌ها در فاکتور نیز نمایش داده می‌شوند.

سرافراز باشید