可变产品选择器：获取实时选择的值

Posted 2023-05-08

技术标签:

【中文标题】可变产品选择器：获取实时选择的值【英文标题】：Variable product selectors: Getting the live selected values 【发布时间】：2017-07-10 00:50:52 【问题描述】：

在 WooCommerce 中，使用以下代码在简单和可变产品的产品价格后添加自定义标签：

add_filter('woocommerce_variation_price_html','prices_custom_labels', 10, 2    );
add_filter('woocommerce_price_html','prices_custom_labels', 10, 2 );
function prices_custom_labels( $price, $product )

    // Set HERE your custom labels names
    $per_dozen = ' '. __('per dozen', 'woocommerce' );
    $per_case = ' '. __('per case (20 dozens)', 'woocommerce' );


    // 1) Variable products
    if ($product->product_type != 'simple' && $product->variation_id ) 

        // Getting the array of existing attributes values for a variation
        $variation_attribute_value = $product->variation_data;
        // Here we keep only the last value in this array
        $last_variation_attribute_slug_value = ' ' .    end($variation_attribute_value);

        // Finding the word 'case' in the attribute value slug
        $has_case = strstr($last_variation_attribute_slug_value, 'case');

        // Setting the right displayed label depending on attribute value slug
        if( $has_case )
            $attribute_quantity_name_value = $per_case;
        else
            $attribute_quantity_name_value = $per_dozen;

        // Here the output price + custom label
        $price = '<ins class="highlight">'.woocommerce_price( $product-   >regular_price ).$attribute_quantity_name_value.'</ins>';
    
    // 2) Simple products
    else
    
        // Here the output price + custom default label
        $price = '<ins class="highlight">'.woocommerce_price( $product-  >regular_price ).$per_dozen.'</ins>';
    
    return $price;

但在可变产品中，我对实时显示价格中附加的自定义标签有疑问。我使用的代码仅显示在“每打”实时价格之后。

我需要在自定义“数量”选择器上获取所选值，以便在价格后添加正确的标签：

如果选择的值为“打”，我需要在实时价格“每打”之后显示，如果选择的值为“每箱（20 打）”，我需要在实时价格后显示“每箱（20 打）”。

这个屏幕截图是我对所有情况的实际截图：

在我的网站specific product page查看这个问题

所以我需要获取属性“数量”选择的值以将正确的标签附加到实时价格。

有什么帮助吗？我该怎么做才能让它发挥作用？

我尝试了很多代码，但都无法正常工作。

【问题讨论】：

无法打开链接！刚刚打开没有问题.. 你得到什么错误？再试一次。 【参考方案1】：

实现此功能的唯一方法是使用 javascript / jQuery，但这很复杂，因为 WooCommerce 已经在其上运行了一些 Javascript / Ajax 代码。

首先，不可能检测到选择器上选定的客户选择，因为 WooCommerce 从 <option> html 标签中删除了 "selected" 属性。

一旦客户做出了完整的选择（因此从该可变产品中选择了一个变体），Woocommerce 在隐藏的<imput> html 字段中添加相应的变体 ID 值并显示相应的价格。

我们的 php 代码将 此可变产品的变体 ID 数组传递给 javascript，每个变体带有相应的“数量”属性值。

然后我们可以在 <select> html 标签上使用 "on blur" javascript 事件获取隐藏的 variation ID 值然后用正确的“标签”附加价格。

这是功能代码，它将根据客户选择在实时价格中添加自定义标签（因此选择的产品变体）：

add_action( 'woocommerce_after_add_to_cart_form', 'custom_get_variations_js' );
function custom_get_variations_js() 
    global $product;

    // Set HERE your "quantity" attribute slug
    $attribute_qty_slug = 'pa_quantity';
    $attribute_qty_slug_key = 'attribute_'.$attribute_qty_slug;

    foreach($product->get_available_variations() as $values)
        $attribute_qty_slug_value = $values['attributes'][$attribute_qty_slug_key];
        $attribute_qty_name_value = get_term_by( 'slug', $attribute_qty_slug_value, $attribute_qty_slug );
        $variations_id_arr[$values['variation_id']] = __(' per ', 'woocommerce' ) . strtolower($attribute_qty_name_value->name);
    

    ## THE JQUERY SCRIPT ##
    ?>
    <script>
        (function($)
            var $attributes;
            <?php
                // Passing the product variations attributes array to javascript
                $js_array = json_encode($variations_id_arr);
                echo 'var $variationsIdsAttr = '. $js_array ;
            ?>
            $('td.value select').blur(function() 
                var $variationId = $('input[name="variation_id"]').val();
                if (typeof $variationId !== 'undefined' )
                    for(key in $variationsIdsAttr)
                        if( key == $variationId )
                            $attributes = $variationsIdsAttr[key];
                            break;
                        
                    
                
                if ( typeof $attributes !== 'undefined' )
                    $('.woocommerce-variation-price .woocommerce-Price-amount.amount').append( $attributes );
                
            );
        )(jQuery);
    </script>
    <?php

然后我们需要更改您现有的代码以避免在此特定变量产品上显示第二个自定义标签（在第一个挂钩函数中）：

add_filter('woocommerce_variation_price_html','prices_custom_labels', 10, 2 );
add_filter('woocommerce_price_html','prices_custom_labels', 10, 2 );
function prices_custom_labels( $price, $product )

    // Custom label name
    $per_dozen = ' '. __('per dozen', 'woocommerce' );

    // Set HERE your "quantity" attribute slug
    $attribute_qty_slug = 'pa_quantity';

    $attribute_qty_slug_key = 'attribute_'.$attribute_qty_slug;
    $append_label = '';

    // 1) Variable products
    if ($product->product_type != 'simple' && $product->variation_id ) 

        // Getting the attribute "quantity" value
        $attribute_qty_is_set = $product->variation_data[$attribute_qty_slug_key];
        echo '<pre>'; print_r($product->variation_data[$attribute_qty_slug_key]); echo '</pre>';

        // if "quantity" not set we display " per dozen"
        if( ! $attribute_qty_is_set )
            $append_label = $per_dozen;


        // Outputed price + custom label
        $price = '<ins class="highlight">'.woocommerce_price( $product->regular_price ).$append_label.'</ins>';
    
    // 2) Simple products
    else
    
        // Here the output price + custom default label
        $price = '<ins class="highlight">'.woocommerce_price( $product->regular_price ).$per_dozen.'</ins>';
    
    return $price;


add_filter('woocommerce_variable_price_html', 'prices_custom_labels_min_max', 20, 2);
function prices_custom_labels_min_max( $price, $product) 

    // Custom label name
    $per_dozen = ' '. __('per dozen', 'woocommerce' );
    $per_case = ' '. __('per case', 'woocommerce' );

    // Set HERE your quantity attribute slug
    $attribute_qty_slug = 'pa_quantity';


    // Getting the min and max variations prices
    $variation_min_reg_price = $product->get_variation_regular_price('min', true);
    $variation_max_reg_price = $product->get_variation_regular_price('max', true);
    $variation_reg_price = $product->get_variation_regular_price();


    if( $variation_min_reg_price == $variation_max_reg_price )
    
        $price = '<ins class="highlight">'.woocommerce_price($variation_reg_price) . $per_dozen . '</ins>';
    
    else
    
        if( !in_array( $attribute_qty_slug, array_keys( $product->get_attributes() ) ) )
        
            $price = '<ins class="highlight">' . woocommerce_price($variation_min_reg_price) . $per_dozen . ' - ' . woocommerce_price($variation_max_reg_price) . $per_dozen . '</ins>';
        
        else
        
            $price = '<ins class="highlight">' . woocommerce_price($variation_min_reg_price) . $per_dozen . ' - ' . woocommerce_price($variation_max_reg_price) . $per_case . '</ins>';
        
    
    // print_r($product->get_attributes());
    return $price;

代码进入您的活动子主题（或主题）的 function.php 文件或任何插件文件中。