WooCommerce 可变产品的产品页面问题上显示的自定义文本字段

Question

我在名为 "Einheitspreis" 的变量下拉菜单下显示自定义文本字段。它以前可以工作，但在最新更新后停止工作。现在就像第一次打开页面时的图片一样（下拉列表中总是有一个预先select的值）

当 select 下拉列表中的另一个值时，它会正常工作

我猜 selected 前的值有问题

 <?php
   $custom_data = array();
   foreach ($available_variations as $prod_variation) :
    // get some vars to work with
    $variation_id = $prod_variation['variation_id'];
    $variation_object = get_post($variation_id);
    $variable_custom_field = get_post_meta( $variation_object->ID, '_text_field', true);

    $custom_data[$variation_id] = array(
        "custom_field_value" => $variable_custom_field
    );
endforeach;
?>
<?php if (!empty($variable_custom_field)) { ?>
           <span>Einheitspreis:  <span class="selected-variation-custom-field"><!-- Holds the value for the variation custom field --></span> </span>
 <?php } ?>
<script>
jQuery(function($) {
    var variation_custom_fields = <?php echo json_encode($custom_data); ?>,
        variations_data = JSON.parse( $('form.variations_form').first().attr( 'data-product_variations' ) ),
        $selected_variation_custom_field = $('.selected-variation-custom-field'); // see DIV above

    $('table.variations').on('change', 'select', function() {
        var $select = $(this),
            attribute_name = $select.attr('name'),
            selected_value = $select.val(),
            custom_field_value = "";

        // Loop over the variations_data until we find a matching attribute value
        // We then use the variation_id to get the value from variation_custom_fields
        $.each(variations_data, function() {
            if( this.attributes[ attribute_name ] &&  this.attributes[ attribute_name ] === selected_value ) {
                custom_field_value = variation_custom_fields[ this.variation_id ].custom_field_value;
                return false; // break
            }
        });

        // doing this outside the loop above ensures that the DIV gets emptied out when it should
        $selected_variation_custom_field.text( custom_field_value );
    });
});
</script>

Answer 1

这应该适合你。

本质上，您可以在函数内部获取逻辑。然后在 DOMReady 上执行一次该函数，然后将其与更改事件绑定。

<script>
jQuery(function($) {
    var variation_custom_fields = <?php echo json_encode($custom_data); ?>,
        variations_data = JSON.parse( $('form.variations_form').first().attr( 'data-product_variations' ) ),
        $selected_variation_custom_field = $('.selected-variation-custom-field'); // see DIV above

    var updateUnitPrice = function() {
        var $select        = $(this),
            attribute_name = $select.attr('name'),
            selected_value = $select.val(),
            custom_field_value = "";

        // Loop over the variations_data until we find a matching attribute value
        // We then use the variation_id to get the value from variation_custom_fields
        $.each(variations_data, function() {
            if( this.attributes[ attribute_name ] &&  this.attributes[ attribute_name ] === selected_value ) {
                custom_field_value = variation_custom_fields[ this.variation_id ].custom_field_value;
                return false; // break
            }
        });

        // doing this outside the loop above ensures that the DIV gets emptied out when it should
        $selected_variation_custom_field.text( custom_field_value );
    };

    $('table.variations select').updateUnitPrice();

    $('table.variations').on('change', 'select', function() {
        $( this ).updateUnitPrice();
    });
});
</script>

Answer 2

您需要在加载 DOM 时首先执行您的代码，就像您在 select 加载属性值时所做的那样。因此，为了使您的代码可重用（对于这 2 个事件），我们将其设置在一个函数中：

<?php
   $custom_data = array();
   foreach ($available_variations as $prod_variation) :
    // get some vars to work with
    $variation_id = $prod_variation['variation_id'];
    $variation_object = get_post($variation_id);
    $variable_custom_field = get_post_meta( $variation_object->ID, '_text_field', true);

    $custom_data[$variation_id] = array(
        "custom_field_value" => $variable_custom_field
    );
endforeach;

if (!empty($variable_custom_field)) { ?>
           <span>Einheitspreis:  <span class="selected-variation-custom-field"><!-- Holds the value for the variation custom field --></span> </span>
 <?php } ?>
<script>
    jQuery(function($) {
        var variation_custom_fields = <?php echo json_encode($custom_data); ?>,
            variations_data = JSON.parse( $('form.variations_form').first().attr( 'data-product_variations' ) ),
            $selected_variation_custom_field = $('.selected-variation-custom-field'); // see DIV above

        // We set everything in a reusable function 
        function getSelectOnChange( $select ){
            var attribute_name = $select.attr('name'),
                selected_value = $select.val(),
                custom_field_value = "";

            // Loop over the variations_data until we find a matching attribute value
            // We then use the variation_id to get the value from variation_custom_fields
            $.each(variations_data, function() {
                if( this.attributes[ attribute_name ] &&  this.attributes[ attribute_name ] === selected_value ) {
                    custom_field_value = variation_custom_fields[ this.variation_id ].custom_field_value;
                    return false; // break
                }
            });

            // doing this outside the loop above ensures that the DIV gets emptied out when it should
            $selected_variation_custom_field.text( custom_field_value );
        }

        // 1. AT START (Once Dom is loaded)
        $('select').each( function() {
            if ($(this).val() != '' )
                getSelectOnChange( $(this) );
        });

        // 2. WHEN SELECTING ATTRIBUTE VALUES (Live)
        $('table.variations').on('change', 'select', function() {
            getSelectOnChange( $(this) );
        });
    });
</script>

此代码已经过测试并有效……它显示默认 select 字段值（默认变体）的自定义字段值……

WooCommerce 可变产品的产品页面问题上显示的自定义文本字段

Custom text field displayed on product page issue for WooCommerce variable products

php

wordpress

jquery

variations

woocommerce