javascript - Woocommerce 实时计算 : qty x get_meta ('_value' ) = final value

Question

在这里，我们谈论的是以散装单位/单位/或公斤为单位销售产品(尤其是糕点或食品)。

所有的测量都是已知的重量和数量，因此我们必须能够估计以公斤为单位的产品将有多少个单位。

所以我创建了一个产品示例，只是为了在 woocommerce 中进行测试，
我设法实现了我的想法，即使用一段有用的代码 found here 估算每公斤的最小件数(或任何单位) .

(1) 我把它放在一个片段中。

之后，我开始阅读并尝试理解并遵循代码背后的逻辑。

(2) Add some fonctions.只是复制了几行..一些复制/粘贴..

(3) 尝试把相同的功能 在产品页面 (进行中未找到解决方案)

2019 年 9 月 12 日更新

代码修改后不再出现内部错误

// Backend: Add and display a custom field for simple and variable products

add_action( 'woocommerce_product_options_general_product_data', 'add_custom_price_field_to_general_product_data' );

function add_custom_price_field_to_general_product_data() {
    global $product_object;

    echo '<div class="options_group hide_if_external">';

    woocommerce_wp_text_input(array(
        'id'          => '_min_unit_price',
        'label'       => __('Min Unit price', 'woocommerce') . ' (' . get_woocommerce_currency_symbol() . ')',
        'description' => __('Enter the minimum unit price here.', 'woocommerce'),
        'desc_tip'    => 'true',
        'value'       => str_replace('.', ',', $product_object->get_meta('_min_unit_price') ),
        'data_type'   => 'price'
    ));


     // My custom field "Min price unit prefix"
    woocommerce_wp_text_input(array(
        'id'          => '_min_unit_prefix',
        'label'       => __('Min Unit prefix', 'woocommerce'),
        'description' => __(' Enter prefix unit price here.', 'woocommerce'),
        'desc_tip'    => 'true',
        'value'       => str_replace('.', ',', $product_object->get_meta('_min_unit_prefix') ),
        'data_type'   => 'texte'
    ));


    // My custom field "Estimated quantity"
    woocommerce_wp_text_input(array(
        'id'          => '_estimated_quantity',
        'label'       => __('Estimated Quantity', 'woocommerce'),
        'description' => __('Enter the quantity here.', 'woocommerce'),
        'desc_tip'    => 'true',
        'value'       => str_replace('.', ',', $product_object->get_meta('_estimated_quantity') ),
         'data_type'   => 'price'
    ));

    echo '</div>';
}

// Backend: Save the custom field value for simple and variable products

add_action( 'woocommerce_admin_process_product_object', 'save_product_custom_price_field', 10, 1 );

function save_product_custom_price_field( $product ) {

    if ( isset($_POST['_min_unit_price']) ) {
        $product->update_meta_data( '_min_unit_price', wc_clean( wp_unslash( str_replace( ',', '.', $_POST['_min_unit_price'] ) ) ) );
    }

     if ( isset($_POST['_min_unit_prefix']) ) {
        $product->update_meta_data( '_min_unit_prefix', wc_clean( wp_unslash( str_replace( ',', '.', $_POST['_min_unit_prefix'] ) ) ) );
    }

     if ( isset($_POST['_estimated_quantity']) ) {
        $product->update_meta_data( '_estimated_quantity', wc_clean( wp_unslash( str_replace( ',', '.', $_POST['_estimated_quantity'] ) ) ) );
    }

}

// Frontend variable products: Display the min price with "From" prefix label

add_filter( 'woocommerce_variable_price_html', 'custom_min_unit_variable_price_html', 10, 2 );
function custom_min_unit_variable_price_html( $price, $product ) {
    if( $min_unit_price = $product->get_meta('_min_unit_price') ){
        $price  = wc_price( wc_get_price_to_display( $product, array( 'price' => $min_unit_price ) ) );
        $price .= $product->get_meta('_min_unit_prefix');
    }
    return $price;
}

// Frontend simple products: Display the min price with "From" prefix label
add_filter( 'woocommerce_get_price_html', 'custom_min_unit_product_price_html', 10, 2 );
function custom_min_unit_product_price_html( $price, $product ) {
    if( $product->is_type('simple') && $min_unit_price = $product->get_meta('_min_unit_price') ){
        $price  = wc_price( wc_get_price_to_display( $product, array( 'price' => $min_unit_price ) ) );
        $price .= $product->get_meta('_min_unit_prefix');
    }
    return $price;
}

// Display the cart item weight in cart and checkout pages

add_filter( 'woocommerce_get_item_data', 'display_custom_item_data', 10, 2 );

function display_custom_item_data( $cart_item_data, $cart_item ) {

    if ( $cart_item['data']->get_weight() > 0 ){
        $cart_item_data[] = array(
            'name' => __( 'Weight subtotal', 'woocommerce' ),
            'value' =>  ( $cart_item['quantity'] * $cart_item['data']->get_weight() )  . ' ' . get_option('woocommerce_weight_unit')
        );
    }

// Display the cart item "estimated quantity" in cart and checkout pages

        if ( $cart_item['data']->get_meta('_estimated_quantity') ){
        $cart_item_data[] = array(
            'name' => __( 'Estimated quantity ', 'woocommerce' ),
            'value' =>  ( $cart_item['quantity'] * $cart_item['data']->get_meta('_estimated_quantity') )
        );
    }

    return $cart_item_data;
}

// Save and Display the order item weight (everywhere)
add_action( 'woocommerce_checkout_create_order_line_item', 'display_order_item_data', 20, 4 );
function display_order_item_data( $item, $cart_item_key, $values, $order ) {
    if ( $values['data']->get_weight() > 0 ){
        $item->update_meta_data( __( 'Weight subtotal', 'woocommerce' ), ( $item['quantity'] * $values['data']->get_weight() )  . ' ' . get_option('woocommerce_weight_unit') );
    }
}

现在，我需要帮助来了解如何
Estimated quantity: <? Php echo get_post_meta (get_the_ID (), '_estimated_quantity', true); ?>
可以Update in real time with the quantity of add_to_cart.

公式在 jQuery 或 javascript 中必须非常简单？

_estimated_quantity * 数量。

这就是我现在所需要的。向客户展示他们可以在 1 或 xx 公斤中获得多少蛋糕(或任何其他东西)

所以我在后端放了一个 15 或 xx(近似值)。

我希望这对你有意义。

有关信息，我使用全新安装 wordpress + elementor + elementor hello 主题 + woocommerce。

2019 年 9 月 12 日更新

我纠正了最后一个 php 错误。

我要感谢 Snuwerd 的支持和相当大的帮助，如果没有他，我将没有勇气将自己投入到我学到了很多东西的 php 代码世界中。

再次感谢你

Answer 1

欢迎来到堆栈溢出!

要回答您的问题:

“验证代码是否有效”

代码看起来相当不错(特别是如果这真的是你第一次弄乱 PHP)

“并且(代码)不会在 future 的 woocommerce 更新中产生问题。”

这个问题真的很难回答。

“现在我正在尝试将这两行信息放在产品页面中。通过简码？还是再次通过 php？”

可能有更多过滤器/操作，就像您在当前代码中所做的那样。如果这似乎不可能，也许可以通过更改/覆盖某些模板。短代码不一定有意义，除非您想在添加/编辑产品时将数据插入后端的内容区域。

“还要改进代码”

这似乎没有必要。

“并为估计数量添加前缀。”

你能详细说明你的意思吗？

附言。我可能很快就要 sleep 了，所以我明天再检查一下。

更新

我使用 AJAX 将 qty 和 product_id 发送到服务器，然后服务器返回 qty * _estimated_quantity;

获取 qty从屏幕上的框中并在 Estimated quantity 中设置正确的值，我需要你对他们的代码进行截图。在谷歌浏览器中打开页面，在数量框上右键>检查元素，然后对Elements中的代码进行截图标签。也对 Estimated quantity 执行相同的操作框(在屏幕截图中有 15 个)。

我还假设您的网站位于您域的根目录上。所以在 www.example.com 而不是 www.example.com/wordpress/(Ajax 调用需要正确的位置)。

您可以将此 PHP 添加到您的 functions.php

<?php
add_action("wp_ajax_product_get_estimated_quantity", "product_get_estimated_quantity"); // calls our function if user is logged in
add_action("wp_ajax_nopriv_product_get_estimated_quantity", "product_get_estimated_quantity"); // calls our function if user is not logged in, we do not do any security checks on which user etc though, but I don't think it's relevant in our case.

function product_get_estimated_quantity () {        
    error_log('Snuwerd: Ajax call for estimated quantity is being called correctly.');
    $product_id = $_REQUEST["product_id"];
    if (!is_numeric($product_id)) { // check if really a number, for security purposes
        die();
    }
    $qty = $_REQUEST["qty"];
    if (!is_numeric($qty)) { // check if really a number, for security purposes
        die();
    }

    // No need to get product object, can get metadata directly with get_post_meta
    // // get estimated_quantity per kg by product_id
    // $args = array(
        // 'include' => array( $product_id ),
    // );
    // $products = wc_get_products( $args );
    // foreach ($products as $product) {
    // }
    // echo $product->get_id(); 

    $estimated_quantity_per_kg = get_post_meta( $product_id, '_estimated_quantity', true);

    // $estimated_quantity_per_kg = 15; // this line is only for my local testing, since my products dont have _estimated_quantity meta 

    echo ((int) $estimated_quantity_per_kg) * ((int) $qty);
    error_log('Snuwerd: Ajax call for estimated quantity returned to single-product page.');
    die();
}
?>

并在任何可以添加的地方添加这个 javascript/jquery(假设你知道怎么做，用谷歌也很容易找到(如何将 javascript 添加到 Wordpress))。

console.log('Snuwerd: Code planted in document.ready');
jQuery(document).ready(function($) {
    console.log('Snuwerd: JS code is being loaded.');
    if( $('body.single-product').length) { // if on a single product page
        console.log('Snuwerd: We are on the single product page');
       $( document ).on( 'change', '.quantity input[type=number]', function() { // selector for the qty box is probably already correct
            var qty = $( this ).val();
            // var product_id = $(this).closest('.product').attr('id');
            // product_id = product_id.split('-');
            // product_id = product_id[1];
            var product_id = get_current_post_id();
            console.log('Snuwerd: quantity changed. Sending ajax call with qty'+qty+' and product_id'+product_id);
            jQuery.ajax({
                type : "post",
                dataType : "json",
                url : '/wp-admin/admin-ajax.php', // only works if Wordpress is installed in root of your domain. if you installed in www.example.com/wordpress/, then add /wordpress/ before this
                data : {action: "product_get_estimated_quantity", product_id : product_id, qty: qty},
                success: function(response) {
                    console.log('Snuwerd: Ajax call returned succesfully');
                    // right click -> inspect element to find the right selector for estimated quantity (the 15 from your photoshop)
                    response = parseInt(response);                      
                    console.log('Snuwerd: Ajax call returned succesfully with value '+response);
                    $('#snuwerd > div').html('Estimated quantity: ' + response);

                }
            });

            return false;
        });
    }

    function get_current_post_id() {
        var page_body = $('body');

        var id = 0;

        if(page_body) {
            var classList = page_body.attr('class').split(/\s+/);

            $.each(classList, function(index, item) {
                if (item.indexOf('postid') >= 0) {
                    var item_arr = item.split('-');
                    id =  item_arr[item_arr.length -1];
                    return false;
                }
            });
        }
        return id;
    }

});

如果您想知道我是如何添加 javascript 的，我在 child-theme-directory/js/child.js 中创建了一个文件。
然后将 Jquery 添加到其中。然后我将此添加到 functions.php :

function theme_enqueue_child_scripts() {
    error_log('Snuwerd: js script being added in theme_enqueue_child_scripts.');
    $file = '/js/child.js';
    $cache_buster = date("YmdHis", filemtime( get_stylesheet_directory() . $file )); // no uri
    wp_enqueue_script( 'child', get_stylesheet_directory_uri() . $file, array( 'jquery' ), $cache_buster, true ); // true = footer

}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_child_scripts' );

更新

我在javascript中添加了估计数量字段的选择器，数量选择器已经正确，所以请重新复制javascript。

我查看了您添加 JS 和 PHP 的屏幕截图，但是您添加 PHP 的方式对于这个 PHP 来说还不够好。在屏幕截图中添加 PHP 的地方，它只适用于该页面，并且它需要是横向的。 Ajax 调用将无法访问添加到特定页面的 PHP。如果 Elementor 没有边宽的地方来添加 PHP 并且您不想更改 functions.php你的主题，那么也许你可以使用这个插件:https://wordpress.org/plugins/my-custom-functions/ .另外，不要忘记实际添加我提供的 PHP，我在您的 JS/PHP 屏幕截图中没有看到它。

更新

我添加了一些调试消息以找出哪些部分有效。你能输入用于 functions.php 的 PHP 代码吗？再次进入您的网站以及 JS 代码。

之后在 Google Chrome 中打开您的产品页面并按 ctrl+shift+i打开开发者工具窗口。现在通过按页面上数字框中的箭头来更改数量。开发人员工具窗口的控制台选项卡中应该有一些消息。您可以在此处粘贴控制台的屏幕截图吗？
如果此控制台中没有出现任何内容，请检查您是否没有缓存问题 > 转到开发人员工具窗口中的网络选项卡并检查 disable cache复选框，然后刷新页面并重试。

接下来，还要检查 PHP 错误日志，如果您不知道如何检查，请在此处了解 PHP 错误日志:https://www.loggly.com/ultimate-guide/php-logging-basics/
在错误日志中搜索 Snuwerd并将这些台词也展示给我。