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

Question

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

每种产品都有一个起始价格，我的客户希望向购物者收取额外费用(例如，在自定义字段中输入的每个字母 1 英镑)。

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

Product A: £20

As shopper enters 5 letters, the Product Price changes to £25 in real time.

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

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

我可能是错的，但我认为我现在需要操纵产品价格以反射(reflect)以下等式:

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>