Как показывать виджет на определенных страницах?
По умолчанию в настройках каждого виджета Convead можно задать условие показа по URL страницы — например, показывать только на странице определённого товара или категории. Это удобно, когда вы точно знаете, где должен отображаться виджет.
Однако бывают случаи, когда нужно показать виджет на всех страницах, кроме некоторых. Например:
- вы хотите отображать промо-баннер только на страницах товаров в наличии, но не показывать его на страницах распродажи или архивных товаров;
- вам нужно скрыть виджет в личном кабинете пользователя или на страницах оформления заказа;
- вы хотите исключить из показа определённые лендинги или технические страницы.
Для таких ситуаций лучше использовать дополнительную проверку в коде виджета.
Как это работает
На страницах сайта часто используется определённая структура и CSS-классы, по которым можно понять, где находится пользователь. Вы можете использовать это для ограничения показа виджета.
Например, чтобы скрыть виджет на страницах с классом .restricted-class
, добавьте следующий код в начало скрипта виджета:
const restrictedElement = document.querySelector('.restricted-class'); if (restrictedElement) { document.querySelector('.cnv-widget_workarea').style.display = 'none' return }
Что делает этот код?
- Ищет на странице элемент с заданным классом (
.restricted-class
). - Если такой элемент найден, значит мы на нужной странице — и виджет не отображается.
- В противном случае виджет работает, как обычно.
Как использовать на практике
- Определите класс, который точно присутствует только на тех страницах, где не нужно показывать виджет.
- Замените
.restricted-class
на ваш конкретный класс. - Вставьте код в начало тега
<script>
с кодом виджета на сайте.
Пример
Если вы хотите, чтобы виджет не показывался на страницах оформления заказа, и такие страницы имеют класс .checkout-page
, ваш код будет выглядеть так:
const restrictedElement = document.querySelector('.checkout-page'); if (restrictedElement) { document.querySelector('.cnv-widget_workarea').style.display = 'none' return }
Когда использовать код, а когда настройки?
- Используйте стандартные настройки URL в виджете, если нужно показать его только на одной или нескольких страницах.
- Используйте код, если нужно показывать виджет на всём сайте, кроме определённых страниц.