Как показать блок с месседжером в зависимости от параметра url

Published on 14 June, 2023 | Сниппеты с кодом | 872 views

Добавьте на страницу блоки со всеми нужными мессенджерами

Добавьте на страницу html блок с кодом:

<script>
// Получаем параметр "messenger" из URL
const urlParams = new URLSearchParams(window.location.search);
const messenger = urlParams.get('messenger');

// Здесь указываем значения параметра "messenger" для каждого мессенджера и соответствующий id блока, который нужно скрыть
const messengerIds = {
  viber: '239772',
  telegram: '239771',
  whatsapp: '239770'
};

// Проверяем, есть ли соответствующий id для указанного мессенджера
if (messenger && messengerIds.hasOwnProperty(messenger)) {
  const blockId = messengerIds[messenger];

  // Получаем все дивы на странице с атрибутом data-biolink-block-id
  const divs = document.querySelectorAll('div[data-biolink-block-id]');

  // Проходимся по каждому диву и скрываем все, кроме указанного блока
  for (let i = 0; i < divs.length; i++) {
    const div = divs[i];
    const dataBlockId = div.getAttribute('data-biolink-block-id');
    
    if (dataBlockId !== blockId) {
      div.style.display = 'none';
    }
  }
}

</script>

Замените в массиве messengerIds id блоков на свои.

Теперь, когда человек откроет вашу страницу с параметром ?messenger=viber - ему покажется только блок с Viber.

Если надо, чтобы не скрывались блоки, которых нет в массиве messengerIds, то используйте этот скрипт:

<script>
// Получаем параметр "messenger" из URL
const urlParams = new URLSearchParams(window.location.search);
const messenger = urlParams.get('messenger');

// Здесь указываем значения параметра "messenger" для каждого мессенджера и соответствующий id блока, который нужно скрыть
const messengerIds = {
    viber: '281568',
    telegram: '281569',
    whatsapp: '239770'
};

// Проверяем, есть ли соответствующий id для указанного мессенджера
if (messenger && messengerIds.hasOwnProperty(messenger)) {
    const blockId = messengerIds[messenger];

    // Получаем все дивы на странице с атрибутом data-biolink-block-id
    const divs = document.querySelectorAll('div[data-biolink-block-id]');

    // Создаем массив из id блоков, которые нужно скрыть, кроме указанного
    const hideIds = Object.values(messengerIds).filter(id => id !== blockId);

    // Проходимся по каждому диву и скрываем те, которые есть в массиве hideIds
    for (let i = 0; i < divs.length; i++) {
        const div = divs[i];
        const dataBlockId = div.getAttribute('data-biolink-block-id');

        if (hideIds.includes(dataBlockId)) {
            div.style.display = 'none';
        }
    }
}
</script>