Woocommerce 产品使用 jQuery 显示价格操纵答案

【问题标题】：Woocommerce product displayed price manipulation using jQueryWoocommerce 产品使用 jQuery 显示价格操纵
【发布时间】：2019-03-05 10:39:38
【问题描述】：

根据我最后一个问题的 "Get selected variation price in jQuery on Woocommerce Variable products" 答案代码，此代码获取用户对产品选项的输入，我正在尝试使用这些值来计算显示的价格给用户，但我无法弄清楚。

所有代码都有效，除了窗口警报消息上方的部分。我也尝试在警报消息上方的 php 标记内添加过滤函数get_price_html()，但它显示了各种错误。

是否可以只使用 javascript 来更改显示的价格？

这是我实际使用的代码：

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

                    var rope_price = length*vprice;
                    document.cookie = 'rope_price_cookie='+rope_price;

                    ////////// This is where I would like to add some code to change the displayed price //////
                    $('price') = rope_price;  /// something like this, only it doesn't work :(

                    alert('variation Id: '+vid+' || Length: '+length+' || Diameter: '+diameter+' || Variantprice: '+vprice+' ||Rope price: '+rope_price);

                        }
                    }
            });
        });
        </script>
        <?php       
    }   
}

任何帮助表示赞赏。

【问题讨论】：

你可以这样做$('price').html(rope_price);不确定price是标签还是类。
要恢复，您似乎想要设置根据长度 x 价格计算的所选变体显示价格。但是长度的代码在哪里......所以：1）你应该给出“长度”，“直径”的所有相关代码...... 2）你还应该解释你为什么使用document.cookie = 'rope_price_cookie='+rope_price;以及它的用途。跨度>
长度由用户输入到单个产品页面的数字字段中。直径变量实际上并没有使用，我只是想看看我是否可以在警报中打印它。这是网站seiltau.no/produkt/ssr cookie 只是为了看看我是否可以制作一个 cookie：p
@designtocode $('.price').html(rope_price);工作:) 你知道是否有一个网站可以让我看到我可以在 Wordpress/woocommerce 中使用的所有课程？
太好了@Paudun 就类列表而言，我还没有找到任何列出类的存储库。即使有一个列表，它也可能会在 Woocommerce 发布的版本中更新。所以我建议在你的浏览器中检查和检查 DOM。

标签： php jquery wordpress woocommerce product

【解决方案1】：

您可以为<span> 元素分配一个ID，例如<span id="price"></span>，然后在您的JS 中执行以下操作：

$("#price").html(rope_price);

请注意，# 表示一个 ID，如果您在页面的多个部分显示价格，您也可以使用类别选择器 (.price)。然后，您可以在使用类时一次性更新这些元素（使其成为更具描述性的类，然后 price 以防止名称冲突）

【讨论】：

我该怎么做呢？ span 标签去哪了？
@Paudun，您的 HTML 看起来像什么价格？你能用那个更新问题吗？
像这样使用类选择器 $('.price').html(rope_price);工作！ :D 但是在操纵价格时我不应该使用类选择器吗？代码应该只在单个产品页面上运行，那么我使用类选择器还是特定 ID 是否重要？
我不写任何 HTML。该代码适用于单个产品页面。
@Paudun，如果您只使用默认页面并在那里使用类选择器 .price，那很好:) 这部分只是在编写您自己的自定义 HTML 时的建议