Elementor Pro - Показать/Скрыть блок по условию

Elementor Pro — Показать/Скрыть блок по условию

22 ноября, 2020
14:52

Elementor Pro — Является отличным пейдж билдером для небольших проектов, и дает возможность после запуска сайта, получить полный контроль над всем дизайном. В прямых руках с помощью Elementor Pro можно создавать неплохие проекты на WordPress.

Но иногда возникает необходимость показывать или скрывать блоки или секции по определенным условиям. Например в проекте gigonline.ru — было необходимо настроить логику на странице таким образом, что бы показ блока портфолио в карточке товара, происходил только при наличии загруженных фото в той же карточке.

Elementor Pro из коробки такой возможности не дает, и мы решили эту задачу следующим образом:

Шаг 1. Помечаем секцию которую нужно скрыть, присвоив ей класс .hide-section-active. Делается это в настройках секции — расширенные — поле CSS Классы. (Рис. 1)

Elementor Pro Помечаем секцию назначением CSS Класса — Рис. 1 Помечаем секцию назначением CSS Класса

Шаг 2. Для примера работ мы использовали виджет карусели, подгружая в нее фотографии их карточки товара WooCommerce. Вы можете использовать для этого любой виджет из Elementor Pro.

Его (виджет) мы помечаем, присваивая класс .portfolio-trigger-all. Делается это в настройках виджета — расширенные — поле CSS Классы. (Рис. 2)

Elementor Pro Помечаем виджет назначением CSS Класса — Рис. 2 Помечаем виджет назначением CSS Класса

Шаг 3. Добавляем на страницу виджет — HTML Код. Его можно разместить в любом удобном месте. Мы его разместили непосредственно возле скрываемой секции. И добавляем в виджет следующий код(Рис. 3):

JQUERY Код для виджета HTML-код:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <!-- ... -->
<script>
jQuery(document).ready(function($){
if(!$(".portfolio-trigger-all").length>0) {
  $('.hide-section-active').hide();
}
})
</script>

Elementor Pro вписываем код — Рис. 3 Добавление виджета HTML-код. Вписываем код.

Сохраняем страницу и проверяем работу логики. Работает!

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

if(!$(".portfolio-trigger-all").length>0) {
  $('.hide-section-active').hide();

Переведем на человеческий язык: Если не найден класс .portfolio-trigger-all — скрыть виджет с классом .hide-section-active.

Если в работах не загружены фотографии, то виджет карусели не появляется на странице, и секция, которую мы пометили скрывается.

Это самый простой пример использования логики на сайте. Вы же сможете с помощью JQUERY строить более сложные логики, используя Elementor PRO!

Заказывайте создание сайта под ключ в Интернетика.рф. Мы с радостью выполним любой Ваш заказ на выбранной Вами платформе.

Elementor Pro — Показать/Скрыть блок по условию