javascript - 处理 WooCommerce 选定的变体自定义字段条件显示

Question

我有这段代码，我需要根据以下条件插入一个值:**/////////HERE THE MY CODE////////**

在这里，我通过我的事件主题覆盖了 single-product/add-to-cart/variation.php Woocommerce 模板文件:

<script type="text/template" id="tmpl-variation-template">
<div class="woocommerce-variation-description">
{{{ data.variation.variation_description }}}
</div>
 
<div class="woocommerce-variation-price">
{{{ data.variation.price_html }}}
</div>
 
<div class="woocommerce-variation-custom_field">
{{{ data.variation.custom_field}}}
///////// HERE MY CODE /////////
</div>
 
<div class="woocommerce-variation-availability">
{{{ data.variation.availability_html }}}
</div>
</script>

The condition should check the value of the variable `{{{ data.variation.custom_field}}}` and if this data is greater than 10 then the code should print "Yes". 

**Something like**: 

    if( $data.variation.custom_field > 10 ){ 
        echo "yes";
    }

But it's not working. I guess, this should be done using Javascript instead of php but I don't know how grab the variable value.

Answer 1

不需要为此使用额外的 javascript(或 jQuery)代码。

如果自定义字段值大于 10 (否则什么都没有)，以下内容将处理显示“YES”的产品变体自定义字段。

您需要使用以下方法之一替换使用 woocommerce_available_variation Hook 的现有 Hook 函数。

主要有2种方式:

1).最简单的方法，无需覆盖 variation.php 模板:

// Frontend: Handle Conditional display and include custom field value on product variation
add_filter( 'woocommerce_available_variation', 'variation_data_custom_field_conditional_display', 10, 3 );
function variation_data_custom_field_conditional_display( $data, $product, $variation ) {
    // Get custom field value and set it in the variation data array (not for display)
    $data['custom_field'] = $variation->get_meta('custom_field');
    
    // Defined custom field conditional display
    $displayed_value = $data['custom_field'] > 10 ? 'YES' : '';

    // Frontend variation: Display value below formatted price
    $data['price_html'] .= '</div>' . $displayed_value . '
    <div class="woocommerce-variation-custom_field_html">';

    return $data;
}

代码进入事件子主题(或事件主题)的 functions.php 文件。经过测试并有效。

2).另一种简单的方法 (覆盖 variation.php 模板):

// Frontend: Handle Conditional display and include custom field value on product variation
add_filter( 'woocommerce_available_variation', 'variation_data_custom_field_conditional_display', 10, 3 );
function variation_data_custom_field_conditional_display( $data, $product, $variation ) {
    // Get custom field value and set it in the variation data array (not for display)
    $data['custom_field'] = $variation->get_meta('custom_field');

    // Frontend display: Define custom field conditional display
    $data['custom_field_html'] = $data['custom_field'] > 10 ? "YES" : "";

    return $data;
}

代码进入事件子主题(或事件主题)的 functions.php 文件。

然后在您的自定义模板 single-product/add-to-cart/variation.php 中，您将替换:

{{{ data.variation.custom_field}}}

与:

{{{ data.variation.custom_field_html }}}

它会在没有任何额外要求的情况下很好地工作。

---

这是社区的完整代码示例，基于第二种方式:

1).管理员变体:显示自定义字段并保存它的值

// Admin: Add a custom field in product variations options pricing
add_action( 'woocommerce_variation_options_pricing', 'add_admin_variation_custom_field', 10, 3 );
function add_admin_variation_custom_field( $loop, $variation_data, $variation ){

   woocommerce_wp_text_input( array(
        'id'          => 'custom_field['.$loop.']',
        'label'       => __('Custom Field', 'woocommerce' ),
        'placeholder' => __('Enter Custom Field value here', 'woocommerce' ),
        'desc_tip'    => true,
        'description' => __('This field is for … (explanation / description).', 'woocommerce' ),
        'value'       => get_post_meta( $variation->ID, 'custom_field', true )
    ) );
}

// Admin: Save custom field value from product variations options pricing
add_action( 'woocommerce_save_product_variation', 'save_admin_variation_custom_field', 10, 2 );
function save_admin_variation_custom_field( $variation_id, $i ){
    if( isset($_POST['custom_field'][$i]) ){
        update_post_meta( $variation_id, 'custom_field', sanitize_text_field($_POST['custom_field'][$i]) );
    }
}

代码进入事件子主题(或事件主题)的 functions.php 文件。

2).前端变体:基于所选变体和自定义字段值的条件显示

// Frontend: Handle Conditional display and include custom field value on product variation
add_filter( 'woocommerce_available_variation', 'variation_data_custom_field_conditional_display', 10, 3 );
function variation_data_custom_field_conditional_display( $data, $product, $variation ) {
    // Get custom field value and set it in the variation data array (not for display)
    $data['custom_field'] = $variation->get_meta('custom_field');
    
    // Frontend display: Define custom field conditional display
    $data['custom_field_html'] = $data['custom_field'] > 10 ? __("YES", "woocommerce") : "";
    
    return $data;
}

代码进入事件子主题(或事件主题)的 functions.php 文件。

3).模板覆盖: single-product/add-to-cart/variation.php 文件到您的事件主题:

<?php
/**
 * Single variation display
 *
 * This is a javascript-based template for single variations (see https://codex.wordpress.org/Javascript_Reference/wp.template).
 * The values will be dynamically replaced after selecting attributes.
 *
 * @see https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 2.5.0
 */

defined( 'ABSPATH' ) || exit;

?>
<script type="text/template" id="tmpl-variation-template">
    <div class="woocommerce-variation-description">{{{ data.variation.variation_description }}}</div>
    <div class="woocommerce-variation-price">{{{ data.variation.price_html }}}</div>
    <div class="woocommerce-variation-custom_field">{{{ data.variation.custom_field_html}}}</div>
    <div class="woocommerce-variation-availability">{{{ data.variation.availability_html }}}</div>
</script>
<script type="text/template" id="tmpl-unavailable-variation-template">
    <p><?php esc_html_e( 'Sorry, this product is unavailable. Please choose a different combination.', 'woocommerce' ); ?></p>
</script>

经过测试并有效。

相关:WooCommerce: Add/display Product or Variation custom field everywhere