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

Question

在 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;
}

但在可变产品中，我对实时显示价格中附加的自定义标签有疑问。我使用的代码只显示在实时价格 "per dozen".

之后

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

如果选择的值为"Dozen"我需要在实时价格“每打”之后显示，
如果选择的值为"Case (20 dozens)"我需要在现场价格后显示“每箱（20打）”。

这张截图是我所有情况下的实际截图：

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

So I would need to get the attribute "quantity" selected value to append the right label to the live price.

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

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

Answer 1

它不应该是 'case'，它应该是 'Case'，strstr 是一个区分大小写的函数，因为它是布尔值，所以下面的语句总是 return false。因为您的选择器中的值是 Case (20 dozens) 而不是 case (20 dozens) 请参阅下面的参考以了解更多信息。

因此更改以下行：

$has_case = strstr($last_variation_attribute_slug_value, 'case');

至：

$has_case = strstr($last_variation_attribute_slug_value, 'Case');

参考：https://www.w3schools.com/php/func_string_strstr.asp

Answer 2

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

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

Once customer have make a complete selection (so choosed one variation from this variable product), Woocommerce add the corresponding variation ID value in a hidden <imput> html field and display the corresponding price.

Our PHP code pass to javascript an array of the variations IDs for this variable product, with the corresponding value of the "quantity" attribute for each of them.

Then we can use the "on blur" javascript event on the <select> html tags to get that hidden variation ID value and then append the price with the right "label".

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

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 文件或任何插件文件。

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

Variable product selectors: Getting the live selected values

php

wordpress

jquery

variations

woocommerce