0

I added a range price slider to my product checkout. Now adding the product works fine. So basically I have a Select input where it contains a dropdown of the price value but I hidden it and made the Range slider to be visible. Below is the code I have for the HTML

This is the code of my HTML

<div class="field required">
        <label class="label" for="amgiftcard_amount">
            <span><?= __('Card Value in %1', $_currencyShortName); ?></span>
        </label>
            
        <div class="control">

             <select style="display: none;" id="am_giftcard_amount" name="am_giftcard_amount" class="required-entry" data-amgiftcard-js="amgiftcard-amount">
                  <option value=""><?= $block->escapeHtml(__('Choose an Amount...')); ?></option>
                  <?php
                    // an array of prices
                   $listAmounts = $block->getListAmounts();
                   $selectedAmount = $block->getDefaultAmount();
                   foreach ($listAmounts as $_amount) : ?>
                        <option data-value="<?= $block->convertPrice($_amount); ?>"
                                value="<?= $block->convertPrice($_amount) ; ?>"
                                data-amgiftcard-js="amgiftcard-amount-item"
                               <?php if ($selectedAmount === $_amount) : ?> selected<?php endif; ?>><?= $block->getFormatPrice($_amount); ?></option>
                  <?php endforeach; ?>
                  <?php if ($_product->getAmAllowOpenAmount()) : ?>
                      <option value="custom"><?= $block->escapeHtml(__('Custom Amount')); ?></option>
                  <?php endif; ?>
            </select>
            <?php
                $numberOfSteps = count($listAmounts)  - 1;
            ?>
            <div class="slidecontainer">
                <input name="am_giftcard_amount_slider" id="am_giftcard_amount_slider" type="range" min="0" value="0" max="<?php echo $numberOfSteps; ?>" step="1" class="gg-slider">
                 <div class="price-range-labels">
                    <label><?= __('%1%2',$_currencySymbol,$listAmounts[0]); ?></label>
                    <label><?= __('%1%2',$_currencySymbol,end($listAmounts)); ?></label>
                 </div>
              </div>
       </div>
</div>

And this is the JS

var sliderInput = document.getElementById('am_giftcard_amount_slider');
var sliderValues = <?php echo json_encode($listAmounts); ?>;
sliderInput.oninput = function(){
    $('#am_giftcard_amount').val(sliderValues[this.value]);
    $('#am_giftcard_amount').trigger('change');
};
sliderInput.oninput();

Now when I try to edit the product content again then click on submit I get a JS error as shown below Please enter a value between NaN and NaN.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.