javascript - 如何操作 `get_price_html()` 函数？

Question

我正在开发一个具有 WooCommerce 功能的 WordPress 网站。

我创建了一个自定义字段，该字段显示在产品页面上，允许购物者输入自己的自定义文本。然后，该自定义文本将被雕刻到相关产品上，我的客户希望每输入一个字母收取 2 英镑的费用。我的客户还要求当购物者在自定义字段中输入/删除字母时实时更新产品价格。

因此，我需要操作 get_price_html() 函数来输出以下方程的总和:

Current Product Price + (Character Count * £2)

为了生成字符计数，我已将以下 jQuery 代码输入到单一产品模板中:

<script type="text/javascript"> 
jQuery(document).on('keyup', '.product-custom-text', updateCount);
jQuery(document).on('keydown', '.product-custom-text', updateCount);

function updateCount() {
    var cs = jQuery(this).val().length;
    jQuery('#letter_count').text(cs);
}
</script>

然后为了输出字符数，我将下一段代码输入到 functions.php 文件中:

function custom_letter_counter(){
    echo '<span id="letter_count"></span>';
}
add_action('woocommerce_single_product_summary', 'custom_letter_counter');

是否有人能够为我指明下一步需要做的正确方向，以便操纵/覆盖 get_price_html() 函数以反射(reflect)上述总和方程？

Answer 1

您的要求有点含糊，因为更改价格的 HTML 实际上并不会更改产品价格本身。

1. 您需要为需要雕刻的文本添加自定义输入框
2. 然后，您需要加入购物车并将此自定义字段值附加到产品
3. 将产品添加到购物车后，您需要通过计算字符数来计算总价
4. 然后，您需要将自定义字段与订单数据 Hook ，以便稍后查看

以下是实现所有这些的方法...

首先让我们添加文本输入:

function add_engrave_text_field() {
    echo '<table class="variations" cellspacing="0">
            <tbody>
                <tr>
                    <td class="label"><label>Engrave Text</label></td>
                    <td class="value">
                        <label><input type="text" name="engrave_text" placeholder="Engrave Text" /> £2 per letter</label>                        
                    </td>
                </tr>                             
            </tbody>
        </table>';
}
add_action( 'woocommerce_before_add_to_cart_button', 'add_engrave_text_field' );

然后，一旦用户点击“添加到购物车”按钮，我们就会将其附加到购物车订单中:

function save_engrave_text( $cart_item_data, $product_id ) {
    if( isset( $_POST['engrave_text'] ) && !empty( $_POST['engrave_text'] ) ) {
        $cart_item_data[ "engrave_text" ] = esc_attr( $_POST['engrave_text'] );     
    }

    return $cart_item_data;
}
add_filter( 'woocommerce_add_cart_item_data', 'save_engrave_text', 99, 2 );

然后我们计算一下需要雕刻的文字总共需要多少钱:

function calculate_engrave_text_fee( $cart_object ) {  
    foreach ( $cart_object->cart_contents as $key => $value ) {
        if( isset( $value["engrave_text"] ) ) {
            // Get how many characters there are
            $chars = strlen( $value["engrave_text"] );
            // Calculate the character count by 2 (£2)
            $engrave_text_fee = $chars * 2;
            $orgPrice = floatval( $value['data']->price );
            $value['data']->set_price( $orgPrice + $engrave_text_fee );
        }
    }
}
add_action( 'woocommerce_before_calculate_totals', 'calculate_engrave_text_fee', 99 );

(可选)您可以在每个产品的购物车/结帐处呈现雕刻文本:

function render_meta_on_cart_and_checkout( $cart_data, $cart_item = null ) {
    $meta_items = array();

    /* Woo 2.4.2 updates */
    if( !empty( $cart_data ) ) {
        $meta_items = $cart_data;
    }

    if( isset( $cart_item["engrave_text"] ) ) {
        $meta_items[] = array( "name" => "Engrave Text", "value" => $cart_item["engrave_text"] );
    }

    return $meta_items;
}
add_filter( 'woocommerce_get_item_data', 'render_meta_on_cart_and_checkout', 99, 2 );

最后，您需要添加以下内容以使雕刻文本出现在电子邮件、订单等上。

function engrave_text_order_meta_handler( $item_id, $values, $cart_item_key ) {
    if( isset( $values["engrave_text"] ) ) {
        wc_add_order_item_meta( $item_id, "Engrave Text", $values["engrave_text"] );
    }
}
add_action( 'woocommerce_add_order_item_meta', 'engrave_text_order_meta_handler', 99, 3 );

这是从我的一个旧项目中复制的，并根据您自己的需要进行了修改，因此尚未经过充分测试。调试应该相当简单，因为 WooCommerce 上的文档非常丰富。