如何根据购物者在自定义字段中输入的字符数量动态更改产品的价格？

Question

我目前正在开发一个具有 WooCommerce 功能的 WordPress 网站。在产品页面上，我创建了一个自定义字段，允许购物者输入他们希望在相关产品上显示的一段文字。

每个产品都有一个起始价格，我的客户希望向购物者收取额外费用（例如）每封输入自定义字段的信件 1 英镑。

然后，我的客户希望产品页面上的产品价格实时更改以反映输入的字母数量。例如：

产品 A：20 英镑

当购物者输入 5 个字母时，产品实际价格变为 25 英镑 时间。

到目前为止，我已经使用以下代码在产品页面上创建了字符计数器：

JavaScript/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('#character_count').text(cs);
}
</script>

目前，我正在通过使用functions.php文件中的以下代码来输出这个字符计数器：

在functions.php文件中输入的代码：

function custom_character_counter(){
    echo 'Letters Entered:  <span id="character_count"></span>';
}
add_action('woocommerce_single_product_summary', 'custom_character_counter');

我可能是错的，但我认为我现在需要操纵产品价格以反映以下等式：

Original Product Price + (Characters Entered x £1)

有没有人知道我该如何实现这一点，或者是否有更好的方法？

提前致谢。

Answer 1

为产品价格/每个字母的价格/和新价格添加一个隐藏的输入，然后用它进行计算..新价格将作为其总价传递给表单。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="custom-letters-container">
    <h1>Product 1</h1>
    <input type="hidden" name="price" class="product-price" value="20" />
    <input type="hidden" name="price" class="letter-price" value="2" />
    
    <input type="text" name="letters" class="product-custom-text" />
    
    <input type="hidden" name="price" class="product-new-price-hidden" />
    <div class="character_count"></div>
</div>

<div class="custom-letters-container">
    <h1>Product 2</h1>
    <input type="hidden" name="price" class="product-price" value="25" />
    <input type="hidden" name="price" class="letter-price" value="5" />
    
    <input type="text" name="letters" class="product-custom-text" />
    
    <input type="hidden" name="price" class="product-new-price-hidden" />
    <div class="character_count"></div>
</div>

    <script type="text/javascript"> 
        jQuery(document).on('keyup', '.product-custom-text', updateCount);
        jQuery(document).on('keydown', '.product-custom-text', updateCount);
    
        function updateCount() {
            var strlen = jQuery(this).val().length;
            var lettertotal = parseInt(jQuery(this).parent().children('.letter-price').val()) * strlen;
            var totalprice = parseInt(jQuery(this).parent().children('.product-price').val()) + lettertotal;
            jQuery(this).parent().children('.product-new-price-hidden').val(totalprice);
        jQuery(this).parent().children('.character_count').text(totalprice);
        }
    </script>