JSFiddle - React, Tailwind, and code Playground

by helgatheviking

HTML

<script src="https://openexchangerates.github.io/accounting.js/accounting.min.js"></script>
<h1>True Placeholder Attribute</h1>


<h2>With a suggested price only</h2>

<form class="cart">
    <div class="nyp" data-price="25" data-min-price="0" data-autoformat_null="no">
        <div class="woocommerce-nyp-message woocommerce-error" style="display:none"></div>
        <label for="nyp">Name Your Price ( € )</label>
        <input id="nyp" name="nyp" type="text" placeholder="25,00" value="" size="6" title="nyp" class="input-text amount nyp-input text" />
    </div>
    <div class="quantity">
        <input type="hidden" step="1" min="1" name="quantity" value="1" />
    </div>
    <input type="hidden" name="add-to-cart" value="319" />
    <button type="submit" class="single_add_to_cart_button button alt">Add to Cart</button>
</form>
<hr/>

<h2>With a suggested price and autoformat disabled</h2>

<form class="cart">
    <div class="nyp" data-price="25" data-min-price="0" data-autoformat_currency="no" data-autoformat_null="no" />
    <div class="woocommerce-nyp-message woocommerce-error" style="display:none"></div>
    <label for="nyp">Name Your Price ( € )</label>
    <input id="nyp" name="nyp" type="text" placeholder="25,00" value="" size="6" title="nyp" class="input-text amount nyp-input text" />
    </div>
    <button type="submit" class="single_add_to_cart_button button alt">Add to Cart</button>
</form>
<hr/>

<h2>With no suggested price</h2>

<form class="cart">
    <div class="nyp" data-price="0" data-min-price="0" data-autoformat_currency="yes" data-autoformat_null="no">
        <div class="woocommerce-nyp-message woocommerce-error" style="display:none"></div>
        <label for="nyp">Name Your Price ( € )</label>
        <input id="nyp" name="nyp" type="text" placeholder="0,00" value="" size="6" title="nyp" class="input-text amount nyp-input text" />
    </div>
    <button type="submit" class="single_add_to_cart_button button alt">Add to...

CSS

form.cart {
    width: 300px;
}
form.cart .button {
    background-color: #111111;
    border-color: #111111;
    color: #ffffff;
}

JavaScript

jQuery(document).ready(function ($) {

    var woocommerce_nyp_params = {
        "currency_format_num_decimals": "2",
            "currency_format_decimal_sep": ",",
            "currency_format_thousand_sep": ".",
            "currency_symbol": "\u20ac",
            "annual_price_factors": {
            "day": "365",
            "week": "52",
            "month": "12",
            "year": "1"
        },
            "add_to_cart_text": "Add to Cart",
            "minimum_error": "Please enter at least %s",
    };


    /*
     * woocommerce_nyp_update function
     * wraps all important nyp callbacks for plugins that maybe don't have elements available on load
     * ie: quickview, bundles, etc
     */

    $.fn.woocommerce_nyp_update = function () {

        /*
         * Name Your Price Handler for individual items
         */

        $(this).on('woocommerce-nyp-update', function () {

            // some important objects
            var $cart = $(this);
            var $nyp = $cart.find('.nyp');
            var $nyp_input = $cart.find('.nyp-input');
            var $submit = $cart.find(':submit');

            // the current price
            var form_price = $nyp_input.val();

            // if nothing is entered, accept the placeholder as the value
            if ($.trim(form_price) == '') {
                form_price = $nyp_input.val($nyp_input.data('placeholder'));
            }

            // add a div to hold the error message
            var $error = $cart.find('.woocommerce-nyp-message');

            if (!$error.length) $nyp.prepend('<div class="woocommerce-nyp-message woocommerce-error" style="display:none"></div>');

            // the default error message
            var error_message = woocommerce_nyp_params.minimum_error;
            var error = false;

            // convert price to default decimal setting for calculations
            var form_price_num = woocommerce_nyp_unformat_price(form_price);

            var min_price =...