Javascript 处理所选变量自定义字段条件显示

我有一个代码，需要根据以下条件插入一个值：

**////这里是“我的代码”//**

在这里，我通过我的活动主题覆盖了

single product/add to cart/variation.php

Woocommerce模板文件：

{{{data.variation.variation_description}}}
{{{data.variation.price_html}}
{{{data.variation.custom_field}}
/////////这是我的密码/////////
{{{data.variation.availability_html}}
条件应该检查变量{{{data.variation.custom_field}}}}的值，如果该数据大于10，则代码应该打印“Yes”。
**比如**：
如果（$data.variation.custom_字段>10）{
回应“是”；
}
但它不起作用。我想，这应该使用Javascript而不是php来完成，但我不知道如何获取变量值。

基于和类似的模板引擎，您需要构建一个带有评估的模板

在您的情况下，应该是这样的：

<div class="woocommerce-variation-custom_field">
  <#  if (data.variation.custom_field > 10) { #>
    yes
  <# } #>
</div>

10) { #>
对

---

另外，这里您可以找到一个if语句本身的示例。

不需要使用额外的javascript（或jQuery）代码

如果自定义字段值大于10（否则为零），下面将处理显示“是”的产品变体自定义字段

您需要使用以下方法之一替换使用

woocommerce\u available\u variation

hook的现有挂接函数

主要有两种方式：

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文件

然后在您的自定义模板

单个产品/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）.模板覆盖：

单个产品/添加到购物车/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>

{{{data.variation.variation_description}}}
{{{data.variation.price_html}}
{{{data.variation.custom_field_html}}
{{{data.variation.availability_html}}

测试和工作

---

相关：

您在这里使用的模板系统是什么？它没有标记。

数据。变量。自定义字段

可能是在这里使用的任何模板语言中访问此类嵌套变量的正确表示法-但在普通PHP中访问它肯定不是正确的方法。点

是t上的串联运算符帽子级别。我从未见过本机WooCommerce模板文件使用这种模板语法。我很确定这里一定有其他组件。好的，那么应该是这个文件，这意味着这些模板将由客户端上的下划线库使用，不确定数据是否可供P使用然后，直接在该模板文件中。（您可以尝试执行

var_dump（$data）；

，以查看该上下文中是否存在同名变量。）在下划线中执行此操作可能更有意义。

<?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>