Как поменять местами элементы в списке стран?

Question

[Евгений Рябцев]

В Тильде есть выпадающий список с кодом стран для ввода номера телефона. Список стран в выпадающем блоке расположен в алфавитном порядке.

Подскажите, пожалуйста, как можно изменить порядок стран в списке? Чтобы сначала шли определенные страны, а после все остальные? (Россия, Украина, Казахстан и т.п.)

Comments

[Сергей Соколов]

этот список там прямо сразу есть в разметке, или подгружается динамически уже после загрузки страницы?

[Евгений Рябцев]

Сергей Соколов, к сожалению, не смогу точно ответить вам на вопрос, без понятия как там все работает)

По этой ссылке можете увидеть в любой форме выпадающий список: https://batumiflats.ge/projects/comfort/bellevue-r...

[Сергей delphinpro]

Для начала стоило бы посмотреть, есть ли документация на этот виджет в тильде.
Может все просто и достаточно будет настроить приоритетные страны.

Answer 1

[Сергей Соколов]

У элементов, которые надо переставить, похоже, одинаковый принцип формирования id:
"t-phonemask_" и двухбуквенный код страны.

Нашли элемент очередной страны, переставили в начало. Т.к. вставляются в самое начало общего родителя, надо пройтись по списку переставляемых в обратном порядке.

В исходной разметке эти элементы отсутствуют — подгружаются/формируются динамически. Поэтому запускать перестановку надо не сразу, а после формирования менюшки. Проще всего, но ненадёжно – через таймаут.

const sortUp = () => {
  const parent = document.querySelector('div.t-input-phonemask__options-wrap > noindex');
  const goFirst = ['ru', 'ua', 'kz'];
  goFirst.reverse().forEach(cc => {
    parent.insertAdjacentElement('afterbegin', parent.querySelector('#t-phonemask_' + cc));
  });
};
setTimeout(sortUp, 1000);

P.S. стоит Тильде чуть что-то поменять, изменить названия классов — перестанет работать.

Comments

[Евгений Рябцев]

Сергей, спасибо за ответ!

Вставляю код в консоль, все сработало! Но если разместить код в самой тильде, почему-то ничего не происходит

[Сергей Соколов]

Евгений Рябцев, ну вот о чём и речь — этот список появляется в странице не сразу.
Вам надо решить теперь другую задачу: как выполнить функцию после того, как на странице появляются элементы с искомым классом.
Полное решение вашей рабочей оплачиваемой задачи бесплатно под ключ делать не хочется почему-то.

[imko]

А почему бы просто цсс-свойство order не поменять? айдишки можно считать статичными. Только noindex лучше в коммент взять, яндекс прочитает и так, зато никак влиять не будет

[Сергей Соколов]

imko, было бы элегантное решение типа

document.styleSheets[document.styleSheets.length - 1].insertRule('#t-phonemask_ru { order: 0 }', 0);

, и не надо дожидаться загрузки.

Но, увы, эти элементы не flex item'ы у них там.

[imko]

Сергей Соколов, было бы еще элегантнее если бы стили не вставлялись скирптом а были сразу написаны)
А про флекс я потому и говорю - комментить тег noindex, это просто служебный для индексации яндекса, и он будет прочтен даже закомментированный, а обертка выше уже флексбокс

[Сергей Соколов]

imko, у меня проф. деформация из-за тега "JavaScript" : )

[rifat2125]

Сергей Соколов, А что если использовать MutationObserver для определения изменений в верстке?

[Сергей Соколов]

rifat2125, вполне!