На одном из сайтов необходимо было сделать, чтобы во время нерабочего времени писалось, что офис...
Открыл для себя плагин WP Grid Builder. Попробовал его в Oxygen применить для EasyPosts и Repeater element, результат огонь. Можно выводить список записей в Oxygen, через EasyPosts или Repeater, или Woocomerce и применять к нему Facet (фильтр).
Для этого я использую такие настройки:
А также установил плагин-дополнение WP Grid Builder - Oxygen для удобства, чтобы не вставлять фильтры через шорткод, а добавлять их через соответствующие элементы.
Там задается фильтр который создается отдельно и для какого блока записей он применяется.
В настройках EasyPosts появляется соответствующее меню. Где можно указать сообщение о том, если результаты не найдены (No Results Message) и добавить анимацию, при фильтрации записей.
Но эта анимация представляет из себя плавное появление записей, поэтому я нашел решение которое эту анимацию кастомизирует и добавляет плавную прокрутку в начало записей при выборе фильтра.
Анимация записей при фильтрации записей через WP Grid Builder в Oxygen
В редакторе Oxygen нужно добавить блок Code Block, и добавить в него Javascript код:
Код следующий, пробовал его добавить через сниппет, не заработал, работает только через Code Block:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
window.WP_Grid_Builder && WP_Grid_Builder.on( 'init', onInit ); function onInit( wpgb ) { wpgb.facets.on( 'appended', onAppended ); } function onAppended( posts ) { posts.forEach( animate ); } function animate( post, index ) { post.style.opacity = 0; setTimeout( function() { requestAnimationFrame( function() { post.style.opacity = 1; post.classList.add( 'post-animation' ); } ); // это прокрутка вверх страницы по выбору фильтра до блока с ID const el = document.getElementById('div_block-69-1641'); el.scrollIntoView({behavior: "smooth"}); }, index * 60 ); } |
А затем нужно добавит CSS в любом удобном месте. Я добавляю через сниппеты следующий код CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@keyframes post-animation { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translatey(0); } } .post-animation { animation: post-animation 0.9s ease; } |
Данное решение я взял с этого сайта, но выбрал для себя CSS с простой анимацией, так как при применении более сложной анимации, у меня зависал редактор. Можно написать и свой CSS для фильтрации записей. Главное? что добавляется стиль при применении фильтра.
Если не нужна анимация каждой записи, то можно обойтись вообще просто CSS, так как при применении фильтра для блока с записями добавляется класс .wpgb-loading примерно на 1 секунду. Вот для этого класса можно прописать свой стиль появления блоков. Тем самым не будет надобности использовать Javascript, но тогда нужно будет что-то придумывать с плавной прокруткой до начала, а так это все реализовано в одном коде.
Проблемы: При активированном плагине Autoptimize данный скрипт не работает. Не помогло даже убирание всех галочек в настройках плагина оптимизации. Только его деактивация.