Как корректно загрузить страницу elementor через ajax

Как корректно загрузить страницу elementor через ajax?

Здравствуйте, возникла следующая проблема: пытаюсь загрузить страницу (или шаблон), сделанную через elementor
(визуальный редактор для wordpress) через ajax. Функция, возвращающая страницу, выглядит примерно так:

И полученная страница практически корректно отображается (html и css код страницы), за исключением динамических элементов, которым нужен js (напр., слайдер, галерея) — они не отображаются и соответственно работать не будут.

Elementor Infinite Scrolling with Ajax Load More

A guide for infinite scrolling Elementor single post articles

December 06, 2020 Darren Cooney Tutorial Comments

Elementor is an intuitive and user friendly page builder for WordPress. It powers more than 5 million websites across both the free and Pro versions of the plugin.

Today, we are going to take a look at implementing infinite scroll on your single (blog) post articles created with Elementor. For this, we will be using Elementor Pro, Ajax Load More and the Single Posts add-on for Ajax Load More.

By the end of this quick start guide I’m hopeful that you will have a better understanding of what it takes to implement infinite scrolling on Elementor post articles.

Implementation

There are 3 essential steps involved to begin infinite scrolling with Elementor and Ajax Load More – none of these steps are overly difficult or time consuming and should not require a background in website development to complete.

The implementation steps are as follows:

1. Create the Elementor Single Template
2. Build the Ajax Load More Repeater Template
3. Add the Ajax Load More Shortcode

Alright, let’s get started.

1. Creating the Elementor Single Template

The first step is to create your Elementor single template. For this you will go to Templates > Add New in your WordPress admin – this will pop up an Elementor lightbox asking for a few key details.

Users that have already built a custom Elementor Single Template can skip this step and move onto step 2.

Choose Single as the template type and give your template a name that will be easily remembered and referenced later on – e.g. Single Template ��

After the template has been created, Elementor will send you directly to the template edit screen. From there you can start dragging and dropping widgets to build out the template for your article pages.

Once you’ve got your Single Template built just right, go onto the next step and create the Ajax Load More Repeater Template.

2. Building the Ajax Load More Repeater Template

For those familiar with Ajax Load More, you know just how important it is to create the perfect Repeater Template. This is the code that will loop over and over as users load additional content via infinite scroll.

In your WordPress Admin, goto Templates > Saved Templates and locate your Single Template. Copy the contents of the elementor-template shortcode (on the right side) to your clipboard.

After copying the shortcode, goto Ajax Load More > Repeater Templates and add the elementor shortcode directly to a Repeater Template using the do_shortcode method.

Как корректно загрузить страницу elementor через ajax

Как корректно загрузить страницу elementor через ajax?

Full ajax или cкажи нет перезагрузкам, ключевые моменты в черновиках

• пользователь посещает страницу
• достаются все необходимые данные, делается авторизация пользователя, распихивается все по нужным переменным
• делается echo всей этой кухни что мы наварили

• пользователь заходит на страницу
• делается авторизация и распихивается по нужным переменным
• делается echo хидера где эти переменные используются
• достаются необходимые данные для следующего блока (скажем список категорий)
• выводится список категорий

1. Проблемы с тайтлами страниц. Если раньше достаточно было в начале скрипта получить все нужные для тайтлов данные, а дальше, просто отобразить всю страницу на основе этих же данных, то теперь мы в начале скрипта незнаем какой контент на текущей странице должен отобразится, так как все страницы меняются через pushState из history.js. Поэтому для тайтлов нужно сделать отдельную обработку REQUEST_URI, что влечет за собой некие дополнительные телодвижения для того, чтобы потом эти данные передавать дальше по дереву блоков. Хотя наши блоки и самостоятельные и не нуждаются в этих данных, но дабы избавится от повторяющихся запросов к базе данных и т.д., то все же эти данные лучше передавать от места генерации тайтла до идентичного (похожего) запроса в блоке. Да, есть вариант с кешированием вывода конечно, но в наш шаблонизатор он никак не врезается.
2. Проблема разных запросов. Если раньше можно было взять, допустим, с базы сразу название сериала + список эпизодов этого сериала одним запросов, положить в один массив и отобразить его, то теперь мы должны получать отдельным запросом название сериала и отдельным запросом список эпизодов. Так как это разные блоки и один блок находится в самом верху страницы, а второй где-то после 10 прокруток вниз и любой из этих блоков может быть изменен с помощью javascript’a

Javascript

1. Размер localStorage
   На каждом устройстве localStorage имеет заранее определенный максимальный размер. Поэтому если ваша страница в него не влезает, то она будет просто откинута и возможность у пользователя перейти назад или вперед просто не будет. Поэтому приходится заранее ограничивать глубину похода пользователя назад или вперед, а также создавать пул страниц. В среднем оно ограничено 5МБайтами, но на мобильных устройствах более-менее безопасно брать 2МБ. И это все при условии, что пользователь сам не tweak’ал его.
2. Необходимость в различных состояниях страницы перед сохранением
   К примеру, вы зашли на страницу где по вашему хотению вылетел popup, в нём вы кликнули еще на одну ссылку и перешли на следующую. И тут вы решили перейти обратно. Конечно же при переходе обратно этот popup также там остался, потому что на момент перехода мы сохранили полную копию страницы с видимым popup’ом. Для решения этой проблемы приходится создавать callback pull запрос, который выполняет все необходимые эвенты при уходе со страницы. При этом состояние javascript переменных нужно сохранять в DOM дереве, иначе при возращении на эту страницу ничего работать так как нужно не будет, потому что при доставании с localStorage мы не достаем значение переменных javascript
3. Отключить автоудаление javascript’a
   А вот здесь уже действительно нас ожидала засада. Дело в том, что когда мы сохранили исходный код страницы в локальное хранилище, то при вытягивании его оттуда нужно также чтобы и javascript’ы были рабочими. Так как у нас блочная структура, то скрипты могут находится в начале страницы, в середине, да где угодно. Кроме этого при загрузке блока нужно еще выполнить всякие $(document).ready(…), $().ready() (ой, это кажется одно и тоже ;))и т.д. Итак, приступим к реализации.

1. Каждый блок который будет меняться на сайте должен быть самодостаточен и не зависеть ни от каких переменных выше. Максимально что он может это использовать уже полученные данные ранее и то если их нету он должен уметь их сам доставать
2. Решить проблему повторной загрузки блока (так как .ready() срабатывает только единожды) при помощи своей структуры функций или же выковыривать closure из jquery и потом их вызывать. В любом из этих случаев все равно придется их самостоятельно вызвать
3. Отключить кнопку назад (просто полностью перезагружать страницу) или попробовать способ, описанный выше с LocalStorage и распарсиванием всего javascript кода

Ajax handling in Elementor widget

How to get an ajax request in the context of a class that extends from \Elementor\Widget_Base. The problem is that the widget is registered later on the «elementor/widgets/widgets_registered» hook, later on the hook responsible for registering ajax requests in wordpress.

Obviously, I can create a file in my plugin to connect it and process ajax requests in it, but I would like to implement this task within the widget class, how can I do this? I suspect there is a hook for this in the elementor, but I can’t find it 🙂

1 Answer 1

I know it’s not what you are looking for, but in my case changing «elementor/widgets/widgets_registered» to «init» hook solved that problem. Eventually init hook register widgets as well

How to rerender Elementor posts widget with an ajax call

I am working with Elementor in Wordpress. I display my Custom Post Type with the posts widget. I have created an AJAX filter which additionally filters my posts by different values — which works so far.

Now I am facing the problem that I am not able to rerender the elementor post widget. This is mandatory to get the filtered results within the widget because elementor only allows server-site filtering by default.

I am using Custom Query Filter (https://developers.elementor.com/custom-query-filter/) to push the filter results into the elementor post widget.

Basically my question is if there is an elementor function which I can call with ajax to rerender elementor widgets.