如何向 WooCommerce Checkout 页面中的自定义选择框添加验证并应用 select2 样式。

Posted 2023-05-07

【中文标题】如何向 WooCommerce Checkout 页面中的自定义选择框添加验证并应用 select2 样式。

【英文标题】：How do I add validation to custom select boxes in WooCommerce Checkout page and apply select2 styling.

【发布时间】：2016-04-13 17:22:13

【问题描述】：

我在 WooCommcerce 结帐页面中添加了几个选择框，除了我不确定的两件事外，一切正常。

验证并应用与页面上其余选择框相同的样式。

我知道的事情。

WooCommerce 正在使用较旧的 select2 库。

当我将以下脚本添加到我的子主题 .js 文件时，它会设置样式 结帐页面上的选择框正确，但会破坏网站上的所有其他选择框，尽管我的 .js 文件的加载顺序。 开始，中间，最后。 jQuery(document).ready(function() jQuery(".select").select2(); ); // 结束文档准备好`

**这是我应用到我的函数的代码。任何帮助将不胜感激。 **

function  cstm_scripts_with_jquery()


    // Register the script like this for a theme:
    wp_register_script( 'scripts', get_stylesheet_directory_uri() . '/js/scripts.js'  );

    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'scripts' );

add_action( 'wp_enqueue_scripts', 'cstm_scripts_with_jquery' );

add_action('woocommerce_before_order_notes', 'my_custom_checkout_field');

function my_custom_checkout_field( $checkout ) 

echo '<div id="my_custom_checkout_field"><h2>'.__('A few quick questions.').'</h2>';

woocommerce_form_field( 'quantity', array(
'type'          => 'select',
'required'          => true,
'class'         => array('form-row-wide'),
'label'         => __('Quantity?'),
'placeholder'   => __('Enter something'),
'options'       => array(
'Standard Size' => __('Standard Size', 'woocommerce' ),
'Other'         => __('Other', 'woocommerce' )
        )//end of options

), $checkout->get_value( 'quantity' ));

woocommerce_form_field( 'potannusge', array(
'type'          => 'select',
'required'          => true,
'class'         => array('form-row-wide'),
'label'         => __('Potential Annual Usage?'),
'placeholder'   => __('Enter something'),
'options'       => array(
'Less than 100k' => __('Less than 100kg', 'woocommerce' ),
'100 kg - 500 kg' => __('100 kg - 500 kg', 'woocommerce' ),
'500 kg - 1000 kg' => __('500 kg - 1000 kg', 'woocommerce' ),
'Greater than 1000 kg'          => __('Greater than 1000 kg', 'woocommerce' )
        )//end of options

), $checkout->get_value( 'potannusge' ));

woocommerce_form_field( 'proapp', array(
'type'          => 'select',
'required'          => true,
'class'         => array('form-row-wide'),
'label'         => __('Project / Application:'),
'placeholder'   => __('Enter something'),
'options'       => array(
'Pet'           => __('Pet', 'woocommerce' ),
'Skin Care'     => __('Skin Care', 'woocommerce' ),
'Food'          => __('Food', 'woocommerce' ),
'Dietary Supplement' => __('Dietary Supplement', 'woocommerce' ),
'Other'         => __('Other', 'woocommerce' )
        )//end of options

), $checkout->get_value( 'proapp' ));

woocommerce_form_field( 'protype', array(
'type'          => 'select',
'required'          => true,
'class'         => array('form-row-wide'),
'label'         => __('Project Type:'),
'placeholder'   => __('Enter something'),
'options'       => array(
'New'           => __('New', 'woocommerce' ),
'Enhancement'   => __('Enhancement', 'woocommerce' ),
'Other'         => __('Other', 'woocommerce' )
        )//end of options

), $checkout->get_value( 'protype' ));

woocommerce_form_field( 'prolength', array(
'type'          => 'select',
'required'          => true,
'class'         => array('form-row-wide'),
'label'         => __('Project Length:'),
'placeholder'   => __('Enter something'),
'options'       => array(
'Immediate Need' => __('Immediate Need', 'woocommerce' ),
'0-6 Months'     => __('0-6 Months', 'woocommerce' ),
'6-12 Months'    => __('6-12 Months', 'woocommerce' )
        )//end of options

), $checkout->get_value( 'prolength' ));

woocommerce_form_field( 'decismakr', array(
'type'          => 'select',
'required'          => true,
'class'         => array('form-row-wide'),
'label'         => __('Decision Maker Role:'),
'placeholder'   => __('Enter something'),
'options'       => array(
'Purchaser'     => __('Purchaser', 'woocommerce' ),
'Formulator only' => __('Formulator only', 'woocommerce' ),
'Consultant'        => __('Consultant', 'woocommerce' )
        )//end of options

), $checkout->get_value( 'decismakr' ));

echo '</div>';



/**
* Process the checkout
**/
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

function my_custom_checkout_field_process() 
global $woocommerce;

// Check if set, if its not set add an error.
if (!$_POST['quantity'])
$woocommerce->add_error( __('Please select an answer. ') );

/**
 * Update the user meta with field value
 **/
add_action('woocommerce_checkout_update_user_meta', 'my_custom_checkout_field_update_user_meta');
function my_custom_checkout_field_update_user_meta( $user_id ) 
    if ($user_id && $_POST['quantity']) update_user_meta( $user_id, 'quantity', esc_attr($_POST['quantity']) );
    if ($user_id && $_POST['potannusge']) update_user_meta( $user_id, 'potannusge', esc_attr($_POST['potannusge']) );
    if ($user_id && $_POST['proapp']) update_user_meta( $user_id, 'proapp', esc_attr($_POST['proapp']) );
    if ($user_id && $_POST['protype']) update_user_meta( $user_id, 'protype', esc_attr($_POST['protype']) );
    if ($user_id && $_POST['prolength']) update_user_meta( $user_id, 'prolength', esc_attr($_POST['prolength']) );
    if ($user_id && $_POST['decismakr']) update_user_meta( $user_id, 'decismakr', esc_attr($_POST['decismakr']) );



/**
* Update the order meta with field value
**/
add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta');

function my_custom_checkout_field_update_order_meta( $order_id ) 
if ($_POST['quantity']) update_post_meta( $order_id, 'Quantity', esc_attr($_POST['quantity']));
if ($_POST['potannusge']) update_post_meta( $order_id, 'Potential Annual Usage', esc_attr($_POST['potannusge']));
if ($_POST['proapp']) update_post_meta( $order_id, 'Project Application', esc_attr($_POST['proapp']));
if ($_POST['protype']) update_post_meta( $order_id, 'Project Type', esc_attr($_POST['protype']));
if ($_POST['prolength']) update_post_meta( $order_id, 'Project Length', esc_attr($_POST['prolength']));
if ($_POST['decismakr']) update_post_meta( $order_id, 'Decision Maker', esc_attr($_POST['decismakr']));



/**
* Add the field to order emails
**/
add_filter('woocommerce_email_order_meta_keys', 'my_custom_checkout_field_order_meta_keys');

function my_custom_checkout_field_order_meta_keys( $keys ) 
$keys[] = 'Quantity';
$keys[] = 'Potential Annual Usage';
$keys[] = 'Project Application';
$keys[] = 'Project Type';
$keys[] = 'Project Length';
$keys[] = 'Decision Maker';
return $keys;
`

【参考方案1】：

像这样向您的选择添加一个类：

'input_class'   => array('my-select'),

然后在你的 jQuery 中定位那个类...

jQuery('.my-select').select2();

【讨论】：

谢谢！我知道必须有一种方法可以将类添加到输入中。现在我只需要弄清楚如何添加验证，并且当我通过我的子主题 functions.php 文件添加它时，我的自定义 js 文件不会破坏整个站点。我得到一个 jQuery(...).select2 不是函数错误。

嘿@Mike T.！我创建了一个非常好的函数来克服这个问题，所以当你需要操纵 woocommerce 的结帐字段来应用你自己的类和其他属性时，它可能很少。在这里查看***.com/questions/23943791/…