在 Woocommerce 可变产品上获取 jQuery 中选定的变体价格

Posted 2023-05-08

【中文标题】在 Woocommerce 可变产品上获取 jQuery 中选定的变体价格

【英文标题】：Get selected variation price in jQuery on Woocommerce Variable products

【发布时间】：2019-07-22 09:54:17

【问题描述】：

如何使用变体 ID 使用 javascript 查找变体价格？ 这就是我到目前为止所得到的。我有变体ID，但我无法弄清楚。我已经用谷歌搜索了好几个小时了。

add_action( 'woocommerce_before_add_to_cart_quantity', 'func_option_valgt' );
function func_option_valgt() 

    global $product;
    global $woocommerce;

    if ( $product->is_type('variable') ) 

        ?>
        <script>
        jQuery(document).ready(function($) 

            $('input').change( function()
                if( '' != $('input.variation_id').val() ) 

                    var var_id = $('input.variation_id').val();

                    var var_length = $('#cfwc-title-field').val(); //LENGTH

                    var var_diameter =$('#diameter').val();  //DIAMETER

                    alert('Du valgte variant #' + var_id + "    Lengde: " + var_length + "     Diameter: " + var_diameter + "    Variantpris: " + var_variant_pris);    
                
            );
        );
        </script>
        <?php
    

任何帮助表示赞赏。

【问题讨论】：

我猜你需要这个：woocommerce.github.io/woocommerce-rest-api-docs/#introduction 然后进行 AJAX/fetch 调用以获取你需要的信息。

我看到您提供的链接中有一个名为“价格”的属性与产品变体相关联。是不是可以只写类似 var variant_price = $('variation_id.price').val();还是什么？

Ajax 不是必需的……您只需将变体 ID/价格对的数组传递给 jQuery，即可获得选定的变体价格。在下面的答案中检查它

【参考方案1】：

使用以下重新访问的代码，您将在您的 jQuery 脚本中获得来自变体 ID 的价格：

add_action( 'woocommerce_before_add_to_cart_quantity', 'func_option_valgt' );
function func_option_valgt() 
    global $product;

    if ( $product->is_type('variable') ) 
        $variations_data =[]; // Initializing

        // Loop through variations data
        foreach($product->get_available_variations() as $variation ) 
            // Set for each variation ID the corresponding price in the data array (to be used in jQuery)
            $variations_data[$variation['variation_id']] = $variation['display_price'];
        
        ?>
        <script>
        jQuery(function($) 
            var jsonData = <?php echo json_encode($variations_data); ?>,
                inputVID = 'input.variation_id';

            $('input').change( function()
                if( '' != $(inputVID).val() ) 
                    var vid      = $(inputVID).val(), // VARIATION ID
                        length   = $('#cfwc-title-field').val(), // LENGTH
                        diameter = $('#diameter').val(),  // DIAMETER
                        vprice   = ''; // Initilizing

                    // Loop through variation IDs / Prices pairs
                    $.each( jsonData, function( index, price ) 
                        if( index == $(inputVID).val() ) 
                            vprice = price; // The right variation price
                        
                    );

                    alert('variation Id: '+vid+' | Lengde: '+length+' | Diameter: '+diameter+' | Variantpris: '+vprice);
                
            );
        );
        </script>
        <?php
    

代码在您的活动子主题（或活动主题）的 function.php 文件中。经过测试并且可以工作。

【讨论】：

哇！非常感谢，效果很好 :D 我可以使用上面的代码从添加的下拉菜单中获取正确的值吗？

@Paudun 是的，我想，可能正在做一些添加和更改......你需要尝试......只有在尝试和搜索时我们才会学习。

我可以使用用户的输入来更改产品价格吗？我曾尝试在警报消息下使用过滤器 get_price_html 及其功能，但它显示了各种错误。有没有办法操纵 javascript 显示的价格？

@Paudun 请提出一个新问题，提供所有必要的详细信息（要求和上下文）+ 对您不起作用的代码解释您遇到的错误（以及何时）......

【参考方案2】：

更新代码以更新显示选择变量价格的类..

add_action( 'woocommerce_before_add_to_cart_quantity', 'func_option_valgt' );
function func_option_valgt() 
    global $product;

    if ( $product->is_type('variable') ) 
        $variations_data =[]; // Initializing

        // Loop through variations data
        foreach($product->get_available_variations() as $variation ) 
            // Set for each variation ID the corresponding price in the data array (to be used in jQuery)
            $variations_data[$variation['variation_id']] = $variation['display_price'];
        
        ?>
        <script>
        jQuery(function($) 
            var jsonData = <?php echo json_encode($variations_data); ?>,
                inputVID = 'input.variation_id';

            $('input').change( function()
                if( '' != $(inputVID).val() ) 
                    var vid      = $(inputVID).val(), // VARIATION ID
                        length   = $('#cfwc-title-field').val(), // LENGTH
                        diameter = $('#diameter').val(),  // DIAMETER
                        vprice   = ''; // Initilizing

                    // Loop through variation IDs / Prices pairs
                    $.each( jsonData, function( index, price ) 
                        if( index == $(inputVID).val() ) 
                            vprice = price; // The right variation price
                        
                    );

                    //alert('variation Id: '+vid+' | Lengde: '+length+' | Diameter: '+diameter+' | Variantpris: '+vprice);
                    // Update the need class to show price
                    var csymbol = '&pound;'
                    // SET YOUR CURRANCY SYMBOL ABOVE
                    $(".availability").html(csymbol+vprice);
                
            );
        );
        </script>
        <?php