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

问题描述

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

add_filter('woocommerce_variation_price_html','prices_custom_labels', 10, 2 );add_filter('woocommerce_price_html','prices_custom_labels', 10, 2);函数价格_custom_labels( $price, $product ){//在此处设置您的自定义标签名称$per_dozen = ' '.__('每打', 'woocommerce');$per_case = ' '.__('每箱 (20 打)', 'woocommerce');//1) 可变产品if ($product->product_type != 'simple' && $product->variation_id ) {//获取变体的现有属性值数组$variation_attribute_value = $product->variation_data;//这里我们只保留这个数组中的最后一个值$last_variation_attribute_slug_value = ' ' .结束($variation_attribute_value)；//在属性值 slug 中查找单词 'case'$has_case = strstr($last_variation_attribute_slug_value, 'case');//根据属性值设置正确显示的标签slug如果( $has_case )$attribute_quantity_name_value = $per_case;别的$attribute_quantity_name_value = $per_dozen;//这里是输出价格 + 自定义标签$price = '<ins class="highlight">'.woocommerce_price( $product- >regular_price ).$attribute_quantity_name_value.'</ins>';}//2) 简单的产品别的{//这里是输出价格 + 自定义默认标签$price = '<ins class="highlight">'.woocommerce_price( $product- >regular_price ).$per_dozen.'</ins>';}返回 $price;}

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

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

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

这个截图是我对所有情况的实际截图:

在我的网站上查看此问题<强>特定产品页面

<块引用>

因此，我需要获取属性数量"选定的值以将正确的标签附加到实时价格.

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

我尝试了很多代码，但我无法让它工作.

解决方案

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

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

<块引用>

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

我们的 PHP 代码将传递给 javascript 变体 ID 的数组，用于该可变产品，带有相应的数量"值. 属性.

然后我们可以在 html 标签上使用 on blur" javascript 事件来获得隐藏 variation ID 值，然后将价格附加到正确的标签".

这是该功能代码，它将根据客户选择为实时价格添加自定义标签(因此选择的产品变体):

add_action('woocommerce_after_add_to_cart_form', 'custom_get_variations_js');函数 custom_get_variations_js() {全球$产品；//在此处设置您的数量"；属性弹头$attribute_qty_slug = 'pa_quantity';$attribute_qty_slug_key = 'attribute_'.$attribute_qty_slug;foreach($product->get_available_variations() 作为 $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);}## JQUERY 脚本##?><脚本>(功能($){var $attributes;<?php//将产品变体属性数组传递给 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($variationsIdsAttr 中的键){if( 键 == $variationId ){$attributes = $variationsIdsAttr[key];休息;}}}if ( typeof $attributes !== 'undefined' ){$('.woocommerce-variation-price .woocommerce-Price-amount.amount').append( $attributes );}});})(jQuery);<?php}

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

add_filter('woocommerce_variation_price_html','prices_custom_labels', 10, 2 );add_filter('woocommerce_price_html','prices_custom_labels', 10, 2);函数价格_custom_labels( $price, $product ){//自定义标签名称$per_dozen = ' '.__('每打', 'woocommerce');//在此处设置您的数量"；属性弹头$attribute_qty_slug = 'pa_quantity';$attribute_qty_slug_key = 'attribute_'.$attribute_qty_slug;$append_label = '';//1) 可变产品if ($product->product_type != 'simple' && $product->variation_id ) {//获取属性数量"；价值$attribute_qty_is_set = $product->variation_data[$attribute_qty_slug_key];echo '
';print_r($product->variation_data[$attribute_qty_slug_key]);echo '</pre>';//如果数量"未设置我们显示每打"如果(！$attribute_qty_is_set)$append_label = $per_dozen;//输出价格+自定义标签$price = '<ins class="highlight">'.woocommerce_price( $product->regular_price ).$append_label.'</ins>';}//2) 简单的产品别的{//这里是输出价格 + 自定义默认标签$price = '<ins class="highlight">'.woocommerce_price( $product->regular_price ).$per_dozen.'</ins>';}返回 $price;}add_filter('woocommerce_variable_price_html', 'prices_custom_labels_min_max', 20, 2);函数价格_custom_labels_min_max( $price, $product) {//自定义标签名称$per_dozen = ' '.__('每打', 'woocommerce');$per_case = ' '.__('每个案例', 'woocommerce');//在此处设置您的数量属性 slug$attribute_qty_slug = 'pa_quantity';//获取最小和最大变化价格$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();如果( $variation_min_reg_price == $variation_max_reg_price ){$price = ''.woocommerce_price($variation_reg_price) .$per_dozen .'</ins>';}别的{if( !in_array( $attribute_qty_slug, array_keys( $product->get_attributes() ) ) ){$price = ''.woocommerce_price($variation_min_reg_price) .$per_dozen .' - ' .woocommerce_price($variation_max_reg_price) .$per_dozen .'</ins>';}别的{$price = ''.woocommerce_price($variation_min_reg_price) .$per_dozen .' - ' .woocommerce_price($variation_max_reg_price) .$per_case .'</ins>';}}//print_r($product->get_attributes());返回 $price;}
代码位于活动子主题(或主题)的 function.php 文件或任何插件文件中.
相关答案:
通过将选择的产品变体数据放入联系表 7 查询表
将自定义文本标签添加到产品价格取决于它们的类型
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:


If the selected value is "Dozen" I need to display after live price " per dozen",
If the selected value is "Case (20 dozens)" I need to display after live price " per case (20 dozens)".


This screenshot is what I have actually for all cases:



Check this issue on my web site specific product page

  
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.
解决方案
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.
First, Is not possible to detect the selected customer choice on the selectors as WooCommerce remove "selected" attribute from <option> html tags.

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".
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;
}
Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

Related answer:

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屋！
                        
                    
                    
                
				

                            
                        
                

            
        
        

            



        
        
        

            



        
    
    


    

    

        

            登录
            关闭
        
        

            

                扫码关注1秒登录
            
            

                
            
            

                

发送“验证码”获取 | 15天全站免登陆

友情链接： IT屋 Chrome插件 谷歌浏览器插件

IT屋 ©2016-2022 琼ICP备2021000895号-1 站点地图 站点标签 SiteMap <免责申明> 本站内容来源互联网,如果侵犯您的权益请联系我们删除.