Нужно перенести калькулятор займа с сайта ligadeneg.ru
Начал переносить код, почему то не двигается ползунок в примере
Что я не учел? Или пропустил ?
Так там же выводит справа ошибку, правда фидл как-то странно это делает и я не понял где там номер строки.
Но проблемы явно уже с первых строк:
var moneyForm = wNumb({
thousand: ' ',
decimals: 0
});
вызывается нигде до этого не объявленная функция wNumb.
Я ничего не понимаю в JS я просто скачал сайт в папку
Взял код из файлов CSS
- indexcalculate.css
- nouislider.css
- template_4e0d87a8bd606de8c794116ea016b2b5_v1.css
И взял код из файлов JS
- indexcalculate.js
- nouislider.js
-
- добавил код из wNumb.js
не работает
Может еще что то нужно добавить ? Порядок добавления кода JS имеет значение ?
Да.
Ну без понимания вы вряд ли далеко уедете, как минимум потому что вам ж наверно надо что-то изменить под свой сайт )
А зачем его копировать в новый общий файл, можно ж просто через <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
jQuerynamespace, not through$.To load it in normal mode, call
JHtml::_('jquery.framework', false);
Так что либо сделать как тут написано, либо везде заменить $ на jQuery:
jQuery('.pop-up') вместо $('.pop-up') и т.д.
А где это править ? В каком файле ?
Во всем коде калькулятора.
Спасибо большое, заработало
Единственное на официальном сайте как только страница открывается сумма платежа сразу отображается.
А на моем сайте не отображается до тех пор пока не сдвинешь ползунок. Что нужно изменить и где ? Чтобы сумма еженедельного платежа всегда отображалась.
То что сумма не отображается сразу, это не связано с 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>и ещё мне не понятно
- для чего ссылка на оригинал
<link rel="stylesheet" href="https://ligadeneg.ru/local/templates/main/css/styles.css">
я бы заменил её на
<link rel="stylesheet" href="css/styles.css">
- почему не забрали себе с оригинального сайта нужные фонты и картинки (в консоли ошибки при попытке их загрузить)
fonts.zip (184.6 КБ)
Я долго работал в банках.
Если будут сложности с расчетами - зови. Именно в логике расчетов.
Буду рад оказаться полезным 