• Resolved karus

    (@karus)


    Maybe this can help someone.

    I wanted to stop the feature of reformatting the input when the user type a number inside the accepted range (between min and max and number of decimals below the woocommerce settings) so I made small changing on the file frontend.js :

    'use strict';

    (function($) {
    var woonp_timeout = null;

    $(function() {
    $('.woonp-input').each(function() {
    woonp_init($(this));
    });
    });

    $(document).on('woosq_loaded', function() {
    woonp_init($('#woosq-popup .woonp-input'));
    });

    $(document).on('found_variation', function(e, t) {
    var $input = $(e['target']).
    closest('.variations_form').
    find('.woonp-input');

    if ($input.length && woonp_vars.default_value === 'price') {
    var value = parseFloat($input.val());

    if ($input.data('price') === undefined) {
    // save the default value to reset
    $input.data('price', value);
    }

    if (t['display_price'] !== undefined && t['display_price'] !== '') {
    // Set the input value to the variation's display price if available
    $input.val(t['display_price']);
    }

    woonp_init($input);
    }
    });

    $(document).on('reset_data', function(e) {
    var $input = $(e['target']).
    closest('.variations_form').
    find('.woonp-input');

    if ($input.length && woonp_vars.default_value === 'price') {
    if ($input.data('price') !== undefined) {
    // Restore the default value (if previously saved)
    $input.val($input.data('price'));
    }

    woonp_init($input);
    }
    });

    $(document).on('keyup click', '.woonp-input', function() {
    var $this = $(this);

    if (woonp_timeout != null) clearTimeout(woonp_timeout);
    woonp_timeout = setTimeout(woonp_init, 1000, $this);
    });

    function woonp_init($input) {
    var val = parseFloat($input.val());
    var min = parseFloat($input.attr('min'));
    var max = parseFloat($input.attr('max'));
    var step = parseFloat($input.attr('step'));
    var out_of_range_flag = false;

    if ((val !== '') && !isNaN(val)) {

    var fix = Math.pow(10, Number(woonp_decimal_places(step)) + 2);

    if ((step === '') || isNaN(step) || step <= 0) {
    // Ensure step has a valid value, defaulting to 1 if not
    step = 1;
    }

    if ((min === '') || isNaN(min) || min < 0) {
    // Ensure minimum value is valid, defaulting to step if not
    min = step;
    }

    if (val < 0 || val < min) {
    // If the value is less than the minimum, set it to the minimum
    out_of_range_flag = true;
    val = min;
    }

    var remainder_before = woonp_float_remainder(
    (val * fix - min * fix) / fix, step);

    if (remainder_before > 0) {
    // Adjust the value if there's a remainder (based on rounding direction)
    if (woonp_vars.rounding === 'up') {
    val = (val * fix - remainder_before * fix + step * fix) / fix;
    } else {
    val = (val * fix - remainder_before * fix) / fix;
    }
    }

    if (!isNaN(min) && (val < min)) {
    // Ensure the value is not below the minimum
    out_of_range_flag = true;
    val = min;
    }

    if (!isNaN(max) && (val > max)) {
    // Ensure the value is not above the maximum
    out_of_range_flag = true;
    val = max;
    }

    var remainder = woonp_float_remainder((val * fix - min * fix) / fix,
    step);

    if (remainder > 0) {
    // Round the value if there's a remainder
    val = (val * fix - remainder * fix) / fix;
    }

    // Check if the value has more than the number of decimals set in Woocommeerce settings or if the flag out_of_range_flag is at true
    if (getDecimalPlaces(parseFloat($input.val())) > woonp_vars.price_decimals || out_of_range_flag === true) {
    // If the value has more than 2 decimals or flag is at false, apply rounding and set the value
    $input.val(val.toFixed(woonp_vars.price_decimals)).trigger('change');
    } else {
    // If 2 or fewer decimals and flag is false, leave the value unchanged
    $input.trigger('change');
    }
    }

    // Trigger a custom event to notify other parts of the code about the value update
    $(document.body).trigger('woonp_init', [$input, val, min, max, step]);
    }

    // Helper function to get the number of decimal places in a number
    function getDecimalPlaces(num) {
    var match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
    return match && match[1] ? match[1].length : 0;
    }

    // Function to calculate the number of decimal places in the step value
    function woonp_decimal_places(num) {
    var match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);

    if (!match) {
    return 0;
    }

    var result = Math.max(0, // Number of digits right of decimal point.
    (match[1] ? match[1].length : 0)
    // Adjust for scientific notation.
    - (match[2] ? +match[2] : 0));

    return result;
    }

    // Function to calculate the remainder when dividing by the step value
    function woonp_float_remainder(val, step) {
    var valDecCount = (val.toString().split('.')[1] || '').length;
    var stepDecCount = (step.toString().split('.')[1] || '').length;
    var decCount = valDecCount > stepDecCount ? valDecCount : stepDecCount;
    var valInt = parseInt(val.toFixed(decCount).replace('.', ''));
    var stepInt = parseInt(step.toFixed(decCount).replace('.', ''));
    return (valInt % stepInt) / Math.pow(10, decCount);
    }

    })(jQuery);

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Janilyn T

    (@janilyn409)

    Thanks for sharing, @karus .

    I will mark this thread as Resolved just to notify that this is not a support topic.

    Have nice day and best regards.

    I propose updating the event trigger from change to blur to enhance the user experience and improve the precision of the value formatting workflow. While the change event captures updates to the input field, it can trigger prematurely in some cases, such as when users are still editing or interacting with the field programmatically.

    Switching to the blur event would ensure that the formatting and subsequent actions are executed only after the user explicitly moves focus away from the input field. This adjustment could provide the following benefits:

    1. Better Alignment with User Intent: Ensures that the formatting process occurs only after the user has finished editing the input.
    2. Fewer Redundant Updates: Reduces unnecessary formatting or event triggers during active editing.
    3. Enhanced Consistency: Follows common UI/UX patterns where data validation and formatting happen upon leaving a field.

    This change would help create a smoother, more intuitive experience for users while maintaining robust data handling.

    Code bellow:

    $input.on(‘blur’, function() {
    const val = parseFloat($input.val()) || 0;
    $input.val(val.toFixed(woonp_vars.price_decimals)).trigger(‘change’);
    });

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Stop reformatting input’ is closed to new replies.