NYP true placeholder tests
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 =...