Калькулятор займа

Нужно перенести калькулятор займа с сайта ligadeneg.ru

Начал переносить код, почему то не двигается ползунок в примере

Что я не учел? Или пропустил ?

Так там же выводит справа ошибку, правда фидл как-то странно это делает и я не понял где там номер строки.

Но проблемы явно уже с первых строк:

var moneyForm = wNumb({
	thousand: ' ',
	decimals: 0
});

вызывается нигде до этого не объявленная функция wNumb.

Я ничего не понимаю в JS я просто скачал сайт в папку

Взял код из файлов CSS

  1. indexcalculate.css
  2. nouislider.css
  3. template_4e0d87a8bd606de8c794116ea016b2b5_v1.css

И взял код из файлов JS

  1. indexcalculate.js
  2. nouislider.js
    • добавил код из wNumb.js

не работает

Может еще что то нужно добавить ? Порядок добавления кода JS имеет значение ?

liga.zip (1.6 МБ)

Все файлы с сайта в архиве.

Да.

Ну без понимания вы вряд ли далеко уедете, как минимум потому что вам ж наверно надо что-то изменить под свой сайт )

А зачем его копировать в новый общий файл, можно ж просто через <script> подключать как там и было.

calc.zip (43.5 КБ)

Мне скинули калькулятор, если его скачать то он на компе прекрасно работает

Вставил на свой сайт, подключил CSS, JS, он не работает почему то

Спойлер

сайт

Конфликт JS ? или что это ?

Похоже Joomla по умолчанию грузит jQuery так, что он недоступен через $.

J3.x:Javascript Frameworks - Joomla! Documentation

In order to load jQuery, use JHtml::_('jquery.framework');

This will load the jQuery version 1.12.4 library in no conflict mode. This means it is accessed via the jQuery namespace, not through $ .

To load it in normal mode, call JHtml::_('jquery.framework', false);

Так что либо сделать как тут написано, либо везде заменить $ на jQuery:
jQuery('.pop-up') вместо $('.pop-up') и т.д.

А где это править ? В каком файле ?

Во всем коде калькулятора.

Спасибо большое, заработало

Единственное на официальном сайте как только страница открывается сумма платежа сразу отображается.


А на моем сайте не отображается до тех пор пока не сдвинешь ползунок. Что нужно изменить и где ? Чтобы сумма еженедельного платежа всегда отображалась.

Про $ же все еще есть ошибки в template.js

То что сумма не отображается сразу, это не связано с template.js

В исходнике, который мне скинули и который я установил сумма тоже не отображается. calc.zip (99.5 КБ)

Вот официальный сайт тут сумма сразу видна

Я не могу понять в чем разница исходника с оф. сайтом. Что то упущено ?

Почему у меня не видна сразу сумма? Пока не сдвинешь ползунок

Потому что у Вас не такая последовательность загрузки.
На сайте грузится сначала всё содержимое страницы(сайта) DOM,
а уже потом срабатывает скрипт.
У Вас же наоборот, сначала срабатывает скрипт, а уже потом грузится содержимое страницы.

предлагаю просто перенести вызов скрипта ПОСЛЕ загрузки страницы.

вот так:

<div class="credit" ng-controller="creditCtrl">
    <div class="credit-container">
        <div class="credit-container-options">
            <div class="credit-container-options__inner">
                <div class="credit-container-options__top"><span class="credit-container-options__num">1</span>

                    <div class="credit-container-options__first" style="margin-bottom: 0px;">

                        <div class="col-sm-8" style="font-size:14px;">
                            <!--     <h3 class="mb-4" style="font-size:24px;color:#6f2282;">Выберите сумму займа</h3> -->
                            <div id="slideramount"></div>
                            <input style="display:none;" class="element-input-sum__field element-input-sum__field-nopdl" ng-model="creditSum" value="" name="credit">
                            <div class="slider-bottom" style="display: flex;margin-top: 35px;">
                                <div class="slider-bottom-l">
                                    для новых
                                </div>
                                <!--End Min-->
                                <div class="slider-bottom-r">
                                    для повторных
                                </div>
                                <!--End Max-->
                            </div>
                            <!--End D Flex-->
                        </div>

                        <script src="js/jquery.min.js"></script>

                        <!--No UI Slider-->
                        <link rel="stylesheet" href="css/nouislider.min.css">
                        <link rel="stylesheet" href="css/indexcalculate.css">
                        <link rel="stylesheet" href="css/styles.css">
                        <!--Stylesheet-->
                        <style>
                            .slider-bottom {
                                width: 100%;
                                color: #000;
                                font-size: 16px;
                            }
                            
                            .slider-bottom>.slider-bottom-l {
                                width: 45%;
                            }
                            
                            .slider-bottom>.slider-bottom-r {
                                width: 55%;
                            }
                            
                            .noUi-marker-normal {
                                display: none;
                            }
                            
                            .noUi-value.noUi-value-horizontal.noUi-value-large {
                                color: #6f2282;
                                ;
                                font-size: 16px;
                                font-weight: 600;
                            }
                            
                            .noUi-marker-horizontal.noUi-marker-large {
                                height: 11px;
                            }
                            
                            .noUi-marker-horizontal.noUi-marker-large {
                                background-color: #6f2282;
                            }
                            
                            .noUi-marker {
                                background-color: #6f2282;
                            }
                        </style>



                    </div>
                    <div class="credit-container-total">
                        <p class="credit-container-options__sectiontitle"><span>Вы отдаете</span></p>
                        <!--<h3 class="credit-container-options__total creditSumView"><span ng-bind="creditSum/52 | number:0 | noComma"></span> рублей в неделю</h3> -->
                        <h3 class="credit-container-options__total creditSumView"><span class="loan-repayment-display"></span> рублей в неделю</h3>
                        <h3 class="credit-container-options__total creditSumPdlView" style="display: none;"><span ng-bind="creditSumPdl | number:0 | noComma"></span> рублей</h3>
                        <p class="credit-container-options-center__post" ng-cloak>Это финальная сумма платежа для займа на сумму {{creditSum}} р. на 52 недели.</p>
                        <button class="credit-container-options-center__button element-button-send element-button-send" type="button" ng-click="openOverlay()">Отправить заявку</button>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<script src="js/wNumb.min.js"></script>
<script src="js/nouislider.min.js"></script>
<script src="js/indexcalculate.js"></script>

<script>

    document.querySelector('.noUi-handle').classList.add("element-input-sum__text");
    $('.element-input-sum__field-nopdl').attr('value', payload.amount);
</script>

и ещё мне не понятно

  1. для чего ссылка на оригинал
                   <link rel="stylesheet" href="https://ligadeneg.ru/local/templates/main/css/styles.css">

я бы заменил её на

                        <link rel="stylesheet" href="css/styles.css">
  1. почему не забрали себе с оригинального сайта нужные фонты и картинки (в консоли ошибки при попытке их загрузить)
    fonts.zip (184.6 КБ)