可变产品选择器:获取实时选定的值 [英] Variable product selectors: Getting the live selected values

问题描述

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

In WooCommerce use the code below to add a custom label after product prices in simple and variables products:

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

但是在可变产品中，我在实时显示的价格中附加了自定义标签时遇到了问题.我使用的代码仅在实时价格每打"之后显示.

But in variable products, I have an issue with the appended custom label in the live displayed price. The code that I use only display after the live price "per dozen".

我需要在自定义数量"选择器上获得选定的值，以便在价格后添加正确的标签:

I will need to get the selected value on the custom "quantity" selector to add the right label after the price:

• 如果所选值为打"，我需要在实时价格之后显示每打"，
• 如果选择的值为案例(20打)"，我需要在实时价格之后显示每箱(20打)".

此屏幕快照是我在所有情况下实际拥有的:

This screenshot is what I have actually for all cases:

在我的网站上检查此问题 特定产品页面

Check this issue on my web site specific product page

因此，我需要选择属性"quantity"以将正确的标签附加到实时价格上.

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

有帮助吗?我该怎么做才能使它正常工作?

Any help? How can I do to get that working?

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

I have tried many code, and I can't get it working.

推荐答案

实现此目的的唯一方法是使用Javascript/jQuery，但由于WooCommerce已经在其上运行了一些Javascript/Ajax代码，所以它很复杂.

The only way to get this working is to use Javascript / jQuery, but it's complicated as WooCommerce is already running some Javascript / Ajax code on it.

首先，随着WooCommerce从<option> html标记中删除"selected"属性，不可能在选择器上检测到选定的客户选择.

First, Is not possible to detect the selected customer choice on the selectors as WooCommerce remove "selected" attribute from <option> html tags.

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

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.

我们的PHP代码将为此变量产品传递给javascript 变体ID的数组，并为每个变量产品提供相应的数量"属性值.

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.

然后，我们可以在 <select> html标签上使用模糊" javascript事件，以获取隐藏的variation ID 值然后在价格上加上正确的标签" .

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".

这里是功能代码，它将根据客户选择(因此，所选产品的变化形式):

Here is that functional code, that will add a custom label to the live price depending on the customer selection (so the selected product variation):

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
}

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

Then we need to change your existing code to avoid displaying a second custom label on this specifics variable products (in the first hooked function):

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文件中，也可能会出现在任何插件文件中.

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

相关答案:

• 通过选择的产品变化数据进入联系表7查询表
• 将自定义文本标签添加到产品价格取决于其类型

• Pass the chosen product variations data into Contact Form 7 enquiry form
• Adding custom text labels to the product prices depending on their type

这篇关于可变产品选择器:获取实时选定的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！