Gera11

Нужно объединить все действия в одну функцию и присвоить её к onStart и onChange

$(document).ready(function() {
  var $range = $(".range_slider"),
    $min = $(".min-price"),
    $max = $(".max-price"),
    ionValues = function(data) {
      $min.text(data.from + ' руб.');
      $max.text(data.to + ' руб');
    }

  $range.ionRangeSlider({
    type: "double",
    min: 10000,
    max: 10000000,
    from: 26000,
    to: 900000,
    hide_from_to: true,
    onStart: ionValues,
    onChange: ionValues
  });
});

$('#filter').on('input', function() {
	$('#ffilter').val($(this).val());
});

$('#ffilter').on('input', function() {
	$('#filter').val($(this).val());
});

Обычный box-shadow

Привет у тебя кажется DLE, для того чтобы достать доп поля в виде массивов $arr[название доп поля][значение].
Делал себе вот это:

//Запрос к dle пост в новость с id 1
$result = $db->query("SELECT * FROM ` dle_post` WHERE `id` = 1");

//Проводим через цикл
while ($row = mysqli_fetch_array($result , true)) {
  $arr[] = $row;
}

$infodop = $arr[0]['xfields']; //Получаем все значения доп полей
$infodop = explode('||', $infodop); //Разделяем тем самым делаем массив

foreach ($infodop as $key => $value) {
  $filist[] = explode("|", $value);  //Еще делим
}

foreach ($filist as $key => $value) {
  $xflist[$value[0]] = $value[1];  //Тут определяем массив[название поля][значение поля]
}

Дальше можешь получать значение из доп поля с базы так: $xflist[названия доп поля]

Для начала научись декомпозировать задачи.
Иначе у тебя вопросы будут типа подскажите как на тоёте доехать в магазин за бухлом.
Когда ты едешь в магазин, то абсолютно не важно, какой марки у тебя машина
Когда тебе надо добавить данные в БД, то абсолютно неважно, откуда ты их взял
Когда тебе надо прочитать данные из файла, то абсолютно неважно, что потом будет с ними.

Поэтому разбей задачу на три части

- получение файла по ссылке
- чтение YML файла в массив
- запись данных из массива в БД

По всем трем информации в интернете - вагон.
И не надо искать высосанный из пальца пример, "подскажите как мне носить треники адидас купленные с рук в ларьке у китайца после обеда в пятницу". да так же, как и любые другие

вместо тысячи слов

loginEl.value = emailEl.value.replace(/(@.*)/, '');

Так а в чем проблема пройтись по массиву и вывести?

типо примерно так:

foreach($values as $book) {
 echo '<li>'.$book.'</li>';
}

$('.coll').on('click', function () {
    $('.zind').removeClass('zind');
    $(this).parent('div').addClass('zind');
})

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

Вот в этой строке

$("body").on("change", "#punpun_filter", function() {

Заменить событие на click, а "#punpun_filter" - на id вашей кнопки

$("body").on("click", "#vasha_knopka", function() {

И кстати, вот это часть, у вас что-то подобное и делает:
$("body").on("click", "#bottom-nav", function() {

С сервера по адресу dle_root + "engine/ajax/field_search.php" в ответ приходит вместо JSON какой-то текст начинающийся на букву "F".
Открой инструменты разработчика(F12), вкладку Сеть(Network) и посмотри что именно.

При запросе к БД, переменная $row будет содержать массив с данными пользователя. В массиве будет элемент $row['pay_news'], в котором в свою очередь будет строковое значение "id новостей через запятую".

Вам нужно
1) Разбить строку на массив используя разделитель запятую
2) Посчитать количество элементов в получившемся массиве

$idNewsArray = explode(',' , $row['pay_news']);
$countNews = count($idNewsArray );

Переменная $count будет содержать количество записей, далее все что нужно, это просто вывести это значение на странице:

echo $countNews;

Градиентом вот так:

Вариант 1

ul {
    columns: 2;
}

Вариант 2

ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

Это не в стилях дело. Проблема в изображениях. Страница загружается - стили по изображению на месте, но нет картинок с их шириной. Как только браузер получает информацию о ширине - всё стабилизируется.
Варианта два:
1. определить стили для изображений с указанием фиксированной ширины, добавить, к примеру, фоны под будущие изображения
2. поставить прелоадер на всю страницу, который будет ждать загрузки и картинок тоже. Но это минусанет в поисковиках, т.к. перекрывает контент.

$arr = compact('var1', 'var2', 'var3' ....);
$res = array_sum($arr);

$n = 10;

$var1 = 1;
$var3 = 1;
$var5 = 1;

$sum = 0;

for ($i=1; $i <= $n; $i++){
    if (isset(${"var$i"}))
    {
        $sum += ${"var$i"};
    }
}

echo $sum; // 3

UPD:

$vars = [];

$zwvola = 1;
$wuvola = 1;
$zwvola = 1; // дубликат
$duvola = 1;
$wdvola = 1;

foreach (get_defined_vars() as $name => $value)
{
        if (is_int($value)){
            $vars[$name] = $value;
        }
}

echo array_sum($vars); // 4

https://www.php.net/manual/ru/function.get-defined...

Сделал так:

JS

var timeout = 5000;
    var owl = $('.right_content .slider .owl-carousel').owlCarousel({
        items: 1,
        dots: true,
        nav: false,
        loop:true,
        autoplay: true,
        autoplayTimeout: timeout,
        dotsContainer: '#owldots',
        onChanged: function () {
            $(function() {
                var loader = $('.right_content .slider .owl-dot.active .loader').ClassyLoader({
                    width: 60,
                    height: 60,
                    percentage: 100,
                    speed: 20,
                    animate: true,
                    showRemaining: false,
                    showText: false,
                    diameter: 20,
                    lineColor: 'rgba(245,206,12,1)',
                    lineWidth: 2
                });
            })
        }
    });

HTML

<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.classyloader.min.js"></script>
<div class="slider">
                <div class="owl-carousel">
                    <div class="slide">
                         слайд 1
                    </div>
                    <div class="slide">
                        слайд 2
                    </div>
                </div>
                <div class="owl-dots" id="owldots">
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                </div>
            </div>

SCSS

.owl-dots {
      position: absolute;
      right: 50px;
      top:250px;
      z-index: 20;
      .owl-dot {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        margin-bottom: 20px;
        position: relative;
        cursor: pointer;
        span {
          position: relative;
          top: 15px;
          left: 16px;
        }
        canvas {
          display: none;
          position: absolute;
          left: -9px;
          top: -10px;
        }
        &.active canvas {
          display: block;
        }
        &:hover,
        &.active {
          span {
            background: #fdcf09;
          }
        }
        span {
          width: 10px;
          height: 10px;
          display: block;
          border-radius: 50%;
          background: #00a651;
        }
      }
    }

....

$infa = json_decode($response, true);
$search;

foreach ($infa['tickers'] as $val) {
    if ($val['base'] == 'USDC' && $val['target'] == 'WETH') {
        $search = $val;
        break;
    }
}

$basezrx = $search['base'];

.....