处理WooCommerce选择的变化自定义字段条件显示

Question

我有一个代码，需要根据以下条件插入一个值：**////这里是“我的代码”//**

在这里，我通过我的活动主题覆盖了single product/add to cart/variation.phpWoocommerce模板文件：

<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

基于https://codex.wordpress.org/Javascript_Reference/wp.template和类似的模板引擎，如https://github.com/blueimp/JavaScript-Templates#evaluation，您需要构建一个带有评估的模板。

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

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

此外，在这里https://lkwdwrd.com/wp-template-js-templates-wp您可以找到一个if语句本身的示例。

Answer 2

没有必要为此使用额外的javascript（或jQuery）代码。

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

您需要用以下方法之一替换使用woocommerce_available_variation钩子的退出钩子函数。

主要有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文件。

然后在您的自定义模板单个产品/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：到处添加/显示产品或变化自定义字段