WooCommerce 产品循环中添加 Ajax 选项的复选框添加到购物车

Posted 2023-05-08

【中文标题】WooCommerce 产品循环中添加 Ajax 选项的复选框添加到购物车

【英文标题】：Checkbox in WooCommerce product loop that add an option on Ajax add to cart

【发布时间】：2021-06-02 20:05:30

【问题描述】：

在 WooCommerce 中，我在单个产品页面和产品循环中添加了一个复选框，用户可以在其中检查他们是否想要申请证书。

我下面的代码在单个产品页面上运行良好。但是，在产品循环中，始终采用复选框的值，即使未选中该复选框。只有在复选框被选中时才应该使用它。

这是我的代码：

function add_name_on_certificate_field() 
echo '<table class="certificate" cellspacing="0">
      <tbody>
          <tr>
             <td class="value">
              Certificate: <input type="checkbox" name="name_on_certificate" value="certificate" "/>                      
             </td>
         </tr>                               
      </tbody>
  </table>';

add_action( 'woocommerce_before_add_to_cart_button', 'add_name_on_certificate_field'); 


 function save_name_on_certificate_field( $cart_item_data, $product_id ) 
    if( isset( $_REQUEST['name_on_certificate'] ) ) 
       $cart_item_data[ 'name_on_certificate' ] = $_REQUEST['name_on_certificate'];
       $cart_item_data['unique_key'] = md5( microtime().rand() );
    
  return $cart_item_data;

add_action( 'woocommerce_add_cart_item_data', 'save_name_on_certificate_field', 10, 2 ); code here


function render_meta_on_cart_and_checkout2( $cart_data, $cart_item = null ) 
    $custom_items = array();
    if( !empty( $cart_data ) ) 
        $custom_items = $cart_data;
    
    if( isset( $cart_item['name_on_certificate'] ) ) 
       $custom_items[] = array( "name" => 'Certificate', "value" => 
        $cart_item['name_on_certificate']);
    
    return $custom_items;
 
 add_filter( 'woocommerce_get_item_data', 'render_meta_on_cart_and_checkout2', 10, 2 );

  function certificate_order_meta_handler( $item_id, $values, $cart_item_key ) 
      if( isset( $values['name_on_certificate'] ) ) 
       wc_add_order_item_meta( $item_id, "name_on_certificate", $values['name_on_certificate']);
      
  
  add_action( 'woocommerce_add_order_item_meta', 'certificate_order_meta_handler', 1, 3 );


 function add_custom_fields_on_product_listing2() 
      global $product;
      echo '</a><div class="sark-custom-fields-wrapper">
          <input type="checkbox" id="name_on_certificate-'. $product->id .'" value="certificate-required" /> </div>';

 add_action( "woocommerce_after_shop_loop_item", 'add_custom_fields_on_product_listing2', 1 );


function inject_custom_field_script2()  ?>
     <script type="text/javascript">       
       jQuery(document).on("adding_to_cart", function( e, btn, data )
        data["name_on_certificate"] = jQuery("#name_on_certificate-" + btn.attr( "data-product_id" )).val();
     return true;
    );
  
  </script>
 <?php 
add_action( "woocommerce_after_main_content", 'inject_custom_field_script2', 1 );

关于信息，已经有一个文本字段，您可以在其中设置正常工作的产品尺寸。

任何帮助将不胜感激。

【参考方案1】：

我重新审视了您的代码，重命名函数，更改过时的挂钩，添加一些缺失的内容并进行多项更改。

现在只有检查复选框时，将相关产品添加到购物车时（在单个产品页面或通过ajax添加到购物车） em>时，选项被添加为自定义购物车项目数据，显示在购物车、结帐、订单和电子邮件中。

代码：

// Products Loop: Display the checkbox field on products that have Ajax add to cart enabled
add_action( "woocommerce_after_shop_loop_item", 'product_loop_display_certificate_field' );
function product_loop_display_certificate_field() 
    global $product;

    if ( $product->supports( 'ajax_add_to_cart' ) && $product->is_purchasable() && $product->is_in_stock() ) 
        echo '</a><div class="sark-custom-fields-wrapper"><input type="checkbox" id="name_on_certificate-' .
        $product->get_id() . '" value="required" /></div>';
    


// Products Loop: Handle Ajax add to cart for the checkbox
add_action( "init", 'certificate_field_loop_jquery_script', 1 );
function certificate_field_loop_jquery_script() 
    wc_enqueue_js("jQuery( function($)
        $(document.body).on('adding_to_cart', function( e, btn, data )
            var checkbox = $('#name_on_certificate-'+data.product_id);
            if( checkbox.is(':checked') ) 
                data['name_on_certificate'] = checkbox.val();
                return data['name_on_certificate'];
            
        );
    );");


// Single products: Display the checkbox field
add_action( 'woocommerce_before_add_to_cart_button', 'single_product_display_certificate_field');
function single_product_display_certificate_field() 
    echo '<table class="certificate" cellspacing="0"><tbody><tr>
        <td class="value">' . __("Certificate:", "woocommerce") .
        ' <input type="checkbox" name="name_on_certificate" value="required" "/>
        </td>
    </tr></tbody></table>';


// Add checked checkbox value as custom cart item data
add_action( 'woocommerce_add_cart_item_data', 'add_cart_item_certificate_field_value', 10, 2 );
function add_cart_item_certificate_field_value( $cart_item_data, $product_id ) 
    if( isset( $_REQUEST['name_on_certificate'] ) ) 
       $cart_item_data[ 'name_on_certificate' ] = $_REQUEST['name_on_certificate'];
       $cart_item_data['unique_key'] = md5( microtime().rand() );
    
    return $cart_item_data;


// Display required certificate in minicart, cart and checkou
add_filter( 'woocommerce_get_item_data', 'display_cart_item_certificate_field_value', 10, 2 );
function display_cart_item_certificate_field_value( $cart_data, $cart_item ) 
    if( isset( $cart_item['name_on_certificate'] ) ) 
        $cart_data[] = array( "name" => 'Certificate', "value" => $cart_item['name_on_certificate']);
    
    return $cart_data;


// Save required certificate as custon order item data and display it on orders and emails
add_action( 'woocommerce_checkout_create_order_line_item', 'add_order_item_certificate_field_value', 10, 4 );
function add_order_item_certificate_field_value( $item, $cart_item_key, $values, $order ) 
    if( isset( $values['name_on_certificate'] ) ) 
        $item->update_meta_data( 'name_on_certificate', esc_attr($values['name_on_certificate']) );
    


// Change required certificate displayed meta key label to something readable
add_filter('woocommerce_order_item_display_meta_key', 'filter_order_item_displayed_meta_key', 20, 3 );
function filter_order_item_displayed_meta_key( $displayed_key, $meta, $item ) 
    // Change displayed meta key label for specific order item meta key
    if( $item->get_type() === 'line_item' && $meta->key === 'name_on_certificate' ) 
        $displayed_key = __("Certificate", "woocommerce");
    
    return $displayed_key;

代码位于活动子主题（或活动主题）的functions.php 文件中。经过测试并且可以工作。