Q:

Add to cart ajax custom product type options

I am trying to add custom product type to product like here wild card
and i succeeded but now i have to add this value to cart with ajax how i suppose to do this with drop-down and shortcode? i just added load_book.js but didn't added any script code because i don't know how to write ajax code for this. thanks.
My code:
    if ( ! defined( 'ABSPATH' ) ) {
        exit; 
    }

    add_filter("product_type_options", "woo_bookable_product");

    function woo_bookable_product($product_type_options)
    {

        $product_type_options["Bookable"] = array(
            "id"            => "_bookable",
            "wrapper_class" => "show_if_simple",
            "label"         => "Bookable",
            "description"   => "Book Your Product",
            "default"       => "yes",
        );

        return $product_type_options;

    }

    add_action("save_post_product",'woo_save_bookable_data', 10, 3); 

    function woo_save_bookable_data($post_ID, $product, $update)
    {
        $meta_value = $_POST["_bookable"] ? 'yes' : 'no';

        update_post_meta($product->ID, "_bookable" ,$meta_value);

    }

    function woo_bookable_scripts()
    {
        wp_enqueue_script('load_book', plugin_dir_url( __FILE__ ).'js/load_book.js',array('jquery'));
        wp_localize_script('load_book','ajax_object',array('ajax_url'=>admin_url('admin-ajax.php')));

    }
    add_action('wp_enqueue_scripts','woo_bookable_scripts');

    add_action('wp_ajax_woo_bookable_shortcode', 'woo_bookable_shortcode');
    add_action('wp_ajax_nopriv_woo_bookable_shortcode', 'woo_bookable_shortcode');

    function woo_bookable_shortcode()
    {
        $Data = '';
    $query = new WP_Query(array(
        'post_type' => 'product',
        'meta_key'  => '_bookable'
    ));
    $Data.='<select name="woo_book_id" class="woo_book_pro">
            <option value="0">Bookable Products</option>';

    if($query->have_posts()):while($query->have_posts()):$query->the_post();

    $Data.='<option value="'. get_the_ID() .'">'. get_the_title() .'</option>';

    endwhile;endif;

    $Data.='</select>';

    $Data.= woo_bookable_add_to_cart();

echo $Data;
    }
    add_shortcode('bookable','woo_bookable_shortcode');

A:

Finally find the solution
PHP:
        <?php
        /**
         * Plugin Name: Bookable
         * Description: Add shortcode [bookable] or in php - echo do_shortcode('[bookable]');
         * Version: 0.1
         */

        if ( ! defined( 'ABSPATH' ) ) {
            exit; 
        }

     if ( class_exists( 'WooCommerce' ) || in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) || function_exists( 'WC' ) && is_object( WC() ) && is_a( WC(), 'WooCommerce' )  ){

        /////////////////////////////////////////////////////////////////////////////////////////////////

        add_filter("product_type_options", "woo_bookable_product");

        if(!function_exists('woo_bookable_product')):

            function woo_bookable_product($product_type_options)
            {
                $product_type_options["bookable"] = array(
                    "id"            => "_bookable",
                    "wrapper_class" => "show_if_simple",
                    "label"         => __("Bookable",'woocommerce'),
                    "description"   => __("Check if product is bookable or not",'woocommerce'),
                    "default"       => "no",
                );
                    return $product_type_options;
            }

        endif;

        /////////////////////////////////////////////////////////////////////////////////////////////////

        add_action( 'woocommerce_add_cart_item_data', 'woo_bookable_custom_field', 10, 2 );

        if(!function_exists('woo_bookable_custom_field')):

            function woo_bookable_custom_field( $cart_item_data, $product_id ) 
            {
                $get_custom_meta = get_post_meta( $product_id , '_bookable', true );

                if( $get_custom_meta == 'yes' ) 
                {
                    $cart_item_data[ '_bookable' ] = $get_custom_meta;
                    $len  = 10;     
                    $word = array_merge(range('a', 'z'), range('A', 'Z'));
                    $name = shuffle($word);
                    $name = substr(implode($word), 0, $len);
                    $cart_item_data['unique_key'] = $name ;         
                }
                return $cart_item_data;
            }

        endif;

        /////////////////////////////////////////////////////////////////////////////////////////////////

        add_filter( 'woocommerce_get_item_data', 'render_woo_bookable_meta_data', 10, 2 );

        if(!function_exists('render_woo_bookable_meta_data')):

            function render_woo_bookable_meta_data( $cart_data, $cart_item ) 
            {

                global $woocommerce;

                $custom_items = array();

                if( !empty( $cart_data ) ) 
                {
                    $custom_items = $cart_data;
                }

                if( isset( $cart_item['_bookable'] ) ) 
                {
                    $custom_items[] = array( 
                    "name" => __( "Bookable", "woocommerce" ), 
                    "value" => $cart_item['_bookable'] );   

                    $custom_items[] = array( 
                    "name" => __( $cart_item['unique_key'], "woocommerce" ), 
                    "value" => '$10' );
                }
                    return $custom_items;
            }

        endif;

        /////////////////////////////////////////////////////////////////////////////////////////////////

        add_action( 'woocommerce_before_calculate_totals', 'add_custom_price' );

        if(!function_exists('add_custom_price')):

            function add_custom_price( $cart_object ) 
            {   
              foreach ( $cart_object->get_cart() as $hash => $value )       
              { 
                if($value['_bookable'] && $value['data']->is_on_sale())
                {   
                    $newprice = $value['data']->get_sale_price()+10;
                    $value['data']->set_price( $newprice );
                }
                elseif($value['_bookable'])
                {
                     $not_sell = $value['data']->get_regular_price()+10;
                     $value['data']->set_price( $not_sell );
                }
              }
            }

        endif;

        /////////////////////////////////////////////////////////////////////////////////////////////////

        add_action( 'woocommerce_cart_calculate_fees', 'woo_bookable_cart_calculate_totals', 10, 1 );

        if(!function_exists('woo_bookable_cart_calculate_totals')):

            function woo_bookable_cart_calculate_totals( $cart_object ) 
            {
                $get_price = 0;

                foreach ( $cart_object->get_cart() as $hash => $value )         
                {   
                    if(!empty($value['_bookable']))
                    {   
                        $percent  = 10; 
                        $get_price += $value['line_total'];
                        $fee = ($get_price * $percent) / 100;
                    }
                }
                $cart_object->add_fee( __("Bookable Charge($percent%)"),$fee ,false );
            }

        endif;

        /////////////////////////////////////////////////////////////////////////////////////////////////

        add_action("save_post_product",'woo_save_bookable_data', 10, 3);

        if(!function_exists('woo_save_bookable_data')):

            function woo_save_bookable_data($post_ID, $product, $update)
            {
                $meta_value = $_POST["_bookable"];

                if(isset($meta_value))
                {
                    $meta_value = 'yes';
                    update_post_meta( $product->ID, "_bookable" ,$meta_value );
                    wp_set_object_terms( $product->ID, 'Bookable', 'product_tag' );
                }
                else
                {
                    delete_post_meta($product->ID, "_bookable");
                    wp_remove_object_terms( $product->ID, 'Bookable', 'product_tag' );
                }
            }

        endif;

        /////////////////////////////////////////////////////////////////////////////////////////////////

        add_action('woocommerce_add_order_item_meta','woo_bookable_add_order_meta', 9, 3 );

        if(!function_exists('woo_bookable_add_order_meta')):

            function woo_bookable_add_order_meta( $item_id, $item_values, $item_key ) 
            {

                if( ! empty( $item_values['_bookable'] ) )
                wc_update_order_item_meta( $item_id, '_bookable', sanitize_text_field( $item_values['_bookable'] ) );
            }

        endif;

        /////////////////////////////////////////////////////////////////////////////////////////////////
    } 

    else 

   {

    add_action( 'admin_notices', 'woo_bookable_active' );

    if(!function_exists('woo_bookable_active')):

        function woo_bookable_active()
        {
            $err_text = site_url()."/wp-admin/plugin-install.php?tab=plugin-information&plugin=woocommerce&TB_iframe=true";
            ?>
            <div class="error notice">
            <p><?php echo sprintf("Please Activate or <a href='%s'>Install Woocommerce</a> to use Bookable plugin",$err_text); ?></p>
            </div>
           <?php
        //If woocommerce is not installed deactive plugin
        if (is_plugin_active('bookable/bookable.php')) {
                deactivate_plugins(plugin_basename(__FILE__));
        }
        unset($_GET['activate']);
        }

    endif;

}
        /////////////////////////////////////////////////////////////////////////////////////////////////

        add_action('wp_enqueue_scripts','woo_bookable_scripts');
        function woo_bookable_scripts()
        {
            wp_enqueue_script('load_book', plugin_dir_url( __FILE__ ).'js/load_book.js',array('jquery'));
            wp_localize_script('load_book','ajax_object',array('ajax_url'=>admin_url('admin-ajax.php')));   
        }

        /////////////////////////////////////////////////////////////////////////////////////////////////

        add_shortcode('bookable','woo_bookable_shortcode');
        function woo_bookable_shortcode()
        {
            global $product;
            $Data = '';
            $query = new WP_Query(array(
                'post_type'  => 'product',
                'meta_key'   => '_bookable', 
                'meta_value' => 'yes' 
                ) );

            $Data.='<select name="woo_book_id" class="woo_book_pro">
                    <option value="0">Bookable Products</option>';

            if($query->have_posts()):while($query->have_posts()):$query->the_post();

            $Data.='<option value="'. get_the_ID() .'">'. get_the_title() .'</option>';

            endwhile;endif;

            $Data.='</select>';

            $Data.= woo_bookable_add_to_cart();

        echo $Data;
        }

        /////////////////////////////////////////////////////////////////////////////////////////////////

        $InArray = array('woo_bookable_product_id','woo_bookable_add_to_cart');

        foreach($InArray as $SingleValue)
        {
            add_action('wp_ajax_'.$SingleValue,$SingleValue);
            add_action('wp_ajax_nopriv_'.$SingleValue,$SingleValue);    
        }

        /////////////////////////////////////////////////////////////////////////////////////////////////

        function woo_bookable_product_id()
        {   
            $product_id = $_POST['product_id']; 
            if($product_id != null && $product_id!=0)
            {
                $add['id']  = 'success';
                $add['msg'] = '<a href="'.site_url().'/cart" target="_blank">View Cart</a>';
                WC()->cart->add_to_cart( $product_id);
            }
            else
            {
                $add['id'] = 'fail';
                $add['msg'] = 'Please Select Product From DropDown!!';
            }
            echo json_encode($add);
            die();
        }

        /////////////////////////////////////////////////////////////////////////////////////////////////

        function woo_bookable_add_to_cart()
        {
            return '<button type="submit" style="margin-left:10px" name="add-to-cart" value="" class="single_add_to_cart_button button alt">Add To Cart</button>
            <div class="message"></div>';
            die();
        }

ajax Script:
 jQuery(document).ready(function()
{     
  jQuery("select.woo_book_pro").change(function(e)
  {     
    var id = jQuery('.woo_book_pro option:selected').val();
    var action = 'woo_bookable_add_to_cart';
    jQuery.ajax({
        url:ajax_object.ajax_url,
        type:"POST",
        dataType:"json",
        cache:false,
        data:{
                "action":action,
                "id":id
             },
             success: function(data)
             {
                 jQuery('.single_add_to_cart_button').attr('value',id);
                 jQuery('.single_add_to_cart_button').attr("disabled", "disabled");
                 jQuery('.single_add_to_cart_button').text('WAIT...');
                 setTimeout(function() {
                     jQuery('.single_add_to_cart_button').removeAttr("disabled");
                     jQuery('.single_add_to_cart_button').text('Add To Cart');
        },      3000);
             }
    });
  });    
  jQuery(".single_add_to_cart_button").click(function(e) {
        e.preventDefault();
        var product_id = jQuery(this).val();
        var action = 'woo_bookable_product_id';
        jQuery('.message').empty();
        jQuery.ajax({
            url:ajax_object.ajax_url,
            type:"POST",
            dataType:"json",
            cache:false,
            data:{
                "action":action,
                "product_id":product_id
                },
                success: function(data)
                {
                    if(data.id == 'success')
                    {
                        jQuery('.message').prepend(data.msg);
                        return false;
                    }
                    if(data.id == 'fail')
                    {
                        jQuery('.message').prepend(data.msg).css('color','#F33')
                        return false;
                    }
                }
        });
    });
});

