Blog

All Swiper.js Instances in Elementor are Now Exposed

Elementor uses Swiper, an external JS library, to power all of the sliders and carousels in the editor. Swiper has an extensive API which provides methods and events which can be utilized to control and manipulate the slider/carousel and its behavior.

Up until Elementor 2.9.0, the Swiper instances used in our widgets and other features were contained in our JS handler classes and not exposed in the front end. 

Following requests from our developer user base, we have decided to make all of the Swiper instances used in Elementor and Elementor Pro available in the frontend.

Swiper uses the class 'swiper-container' in the slider wrapper element. Starting in Elementor 2.9.0, the Swiper instance will now be available in the cache of this element’s jQuery instance. 

To access a slider or carousel’s Swiper instance, create a jQuery instance targeting the slider’s container, and query the element’s data cache with the key 'swipe'

How to Access a Swiper Instance

1. Add an image carousel to an Elementor page/post.

2. Edit the widget > Go to Advanced > Advanced

3. Give the widget a unique class name/ID in the “CSS ID” or “CSS Classes” field.

4. In your Javascript file, create a jQuery instance of the carousel’s 'swiper-container' element using the ID/class you chose and the 'swiper-container' class (replace #my-id with your ID/class):

const imageCarousel = jQuery ( '#my-id .swiper-container' );

5. Now, get the Swiper instance by querying your carousel instance’s data cache using the key 'swiper':

const swiperInstance = imageCarousel.data( 'swiper' );

The swiperInstance constant now holds a reference to our carousel’s Swiper instance. You can now call Swiper methods on this variable, add event listeners, and generally taking advantage of everything the Swiper API has to offer.

Usage Example

Here is an example code snippet you can use to change the active slide to the slide of your choice. Replace #my-id with your ID/class, and replace 0 with the slide number you want to change to:

const imageCarousel = jQuery ( '#my-id .swiper-container' ),
swiperInstance = imageCarousel.data( 'swiper' );
swiperInstance.slideTo( 0 );

Open the page with your image carousel (in the frontend), paste this into your developer console and run it to change the active slide to the slide of your choice.

Read More »

v2.9.0: Planned Deprecations


Hey all! we are getting ready to release version 2.9.0. Here is the planned deprecation list:


PHP

Functions & Methods

Soft Deprecation

Function / Method NameChanges Made
Controls_Stack::_content_template()
Core Plugin
Replaced by: Controls_Stack::content_template()
Located in: includes/base/controls-stack.php
Hard deprecation Version: 3.3.0
Deletion version: 3.7.0
Controls_Stack::_get_initial_config()
Core Plugin
Replaced by: Controls_Stack::get_initial_config()
Located in: includes/base/controls-stack.php
Hard deprecation Version: 3.3.0
Deletion version: 3.7.0
Controls_Stack::_init()
Core Plugin
Replaced by: Controls_Stack::init()
Located in: includes/base/controls-stack.php
Hard deprecation Version: 3.3.0
Deletion version: 3.7.0

Hard Deprecation

When a function/method is on hard deprecation phase, it means that the function/method will still work while it’s in this phase, but will add a PHP notice if the website WP_DEBUG property is set to true.

Function / Method NameChanges Made

Group_Control_Posts
Pro Plugin
Replaced by: Group_Control_Query
Located in: modules/query-control/controls/group-control-posts.php
In Soft deprecation since: 2.5.0
Deletion version: 3.3.0
Modules\QueryControl\Module::add_exclude_controls()
Pro Plugin
Replaced by: None
Located in: modules/query-control/module.php
In Soft deprecation since: 2.5.0
Deletion version: 3.3.0
Modules\QueryControl\Module::fix_query_found_posts()
Pro Plugin
Replaced by: Elementor_Post_Query:: fix_query_found_posts()
Located in: modules/query-control/module.php
In Soft deprecation since: 2.5.0
Deletion version: 3.3.0
Modules\QueryControl\Module::fix_query_offset()
Pro Plugin
Replaced by:  Elementor_Post_Query::fix_query_offset()
Located in: modules/query-control/module.php
In Soft deprecation since: 2.5.0
Deletion version: 3.3.0
Modules\QueryControl\Module::get_query_args()
Pro Plugin
Replaced by:  None
Located in: modules/query-control/module.php
In Soft deprecation since: 2.5.0
Deletion version: 3.3.0
\ElementorPro\Modules\LinkActions\Module::create_action_url()
Pro Plugin
Replaced by:  Plugin::elementor()->frontend->create_action_hash()
Located in: modules/link-actions/module.php
Deletion version: 3.3.0
(more…) Read More »

Migration of Modules from Pro to Core in Elementor 2.9

In order to support new features in Elementor Page Builder, we are moving the Link Actions module and the Social Share JS library from Elementor Pro into the Core version.

Link Actions

The Link Actions module allowed attaching Elementor event triggers to button links. For example, a hash could be added to a button link to trigger the opening/closing of a popup.

Up until Elementor and Elementor Pro 2.9.0, Link Actions existed as an Elementor Pro module located in the elementor-pro/modules/link-actions directory. In 2.9.0, we split the Link Actions module up into two separate parts and moved it to the Elementor Core plugin.

PHP

The PHP part of the Link Actions module was moved to the elementor/includes/frontend.php file. The original method, create_action_url, was replaced by a new method called create_action_hash, which accepts two parameters: an action (to perform on click), and additional settings related to the action:
create_action_hash( $action, array $settings ).

PHP Examples:

Deprecated Implementation:

<?php 
\ElementorPro\Modules\LinkActions\Module::create_action_url( 'popup:open', [
	'id' => $settings['popup'],
	'toggle' => 'toggle' === $settings['action'],
] );

New Implementation:

<?php 
\Elementor\Plugin::elementor()->frontend->create_action_hash( 'popup:open', [
'id' => $settings['popup'],
'toggle' => 'toggle' === $settings['action'],
] );

JS

The JS handler was located at elementor-pro/modules/link-actions/assets/js/frontend/frontend.js. moved to the JS utils folder at elementor/assets/dev/js/frontend/utils/url-actions.js. The handler runs by default on all elementor pages, scans links for actions, and if it finds any, it executes them. The script is mostly unchanged. Feel free to check out the source code in the GitHub repo.

JS Examples – Adding a link action:

Deprecated Implementation:

elementorProFrontend.modules.linkActions.addAction( 'popup:open',() => { 
// Do your action here
} );

New Implementation:

elementorFrontend.utils.urlActions.addAction( 'popup:open', () => 
{ 
// Do your action here
} );

Social Share (now Share Link)

The Social Share library enabled the integration of social sharing capabilities into some Elementor Pro widgets.

The library generates custom share links to a variety of social networks and exists both as an object on the global scope (object name: ShareLink), as well as a jQuery plugin (method name jQuery.fn.shareLink()).

Nothing has changed in the library’s functionality or the way it is used. To familiarize yourself with the library, feel free to visit the library’s source code on Elementor’s GitHub page: https://github.com/elementor/elementor.

Up until Elementor and Elementor Pro 2.9.0, Social Share existed as a library hosted in Elementor Pro (elementor-pro/assets/lib/social-share/social-share.js). In 2.9.0, we changed the file name to better reflect the library’s functionality and moved it to the Elementor Core plugin.

The newly named Share Link library is now located in elementor/assets/lib/share-link/

Read More »

Elementor 2.8: New Color Picker

Elementor 2.8.0 is just around the corner and with it, we are introducing a new Color Picker control and parting from the trusty old Iris color picker.

By doing so, we are removing all wpColorPicker assets:

  • Iris.js
  • wp-color-picker.js
  • wp-color-picker-alpha.js

Including all of their dependencies.

Other than that we are deprecating the elementor.helpers.wpColorPicker() method and it will probably won’t work as expected anymore.

So if you did call it directly for some reason (why would you do that??) you need to either update your code to work with the new color picker or enqueue the removed assets yourself.

Read More »

v2.8.0: Planned Deprecations


Hey all! we are getting ready to release version 2.8.0. Here is the planned deprecation list:


PHP

Functions & Methods

Hard Deprecation

When a function/method is on hard deprecation phase, it means that the function/method will still work while it’s in this phase, but will add a PHP notice if the website WP_DEBUG property is set to true .

Function / Method NameChanges Made

Core\Base\Document::get_container_classes()

Core Plugin
Replaced by: Core\Base\Document::get_container_attributes()
Located in: core/base/document.php
In Soft deprecation since: 2.4.0
Deletion version: 3.2.0
Core\Base\Document::get_remote_library_type()

Core Plugin
Replaced by: Core\Base\Document::get_remote_library_config()
Located in: core/base/document.php
In Soft deprecation since: 2.4.0
Deletion version: 3.2.0
Core\Documents_Manager::get_groups()

Core Plugin
Replaced by:  none
Located in: core/documents-manager.php
In soft deprecation since:2.4.0
Deletion version:3.2.0
Group_Control_Posts::on_export_remove_setting_from_element()

Pro Plugin
Replaced by: none
Located in: modules/query-control/controls/group-control-posts.php
In soft deprecation since: 2.4.0
Deletion version: 3.2.0

Deletion

(more…) Read More »

Elementor Pro 2.7: New Approach to WooCommerce mini-cart

Starting Pro v2.7, Elementor adds its own mini-cart template. Instead of having the Menu Cart widget print the mini-cart markup, we are introducing a new mini-cart template that will be used by the Elementor Menu Cart widget. This change doesn’t affect the majority of our users.


Want to revert to your theme’s mini-cart template instead of Elementor’s?
You can disable the Elementor mini-cart markup and keep using the custom mini-cart template.

In order to disable Elementor mini-cart template simply go to your Dashboard > Elementor > Settings > Integrations tab > WooCommerce section and choose Disable.

Read More »

Elementor Pro 2.7: Popup Events

In Elementor Pro 2.7 we are adding two event triggers to our Popups:

  • elementor/popup/show – when a Popup is opened/shown
  • elementor/popup/hide – when a Popup is closed/hidden

One thing we get a lot of requests for is a way to track Popups and a way to initialize JavaScript-based elements when a popup is shown. To allow that we added these to events mentioned above so now every time a Popup is shown we trigger the elementor/popup/show event and when a popup is closed we trigger the elementor/popup/hide event.

(more…) Read More »

v2.7.0: Planned Deprecations


Hey all! we are getting ready to release version 2.7.0. Here is the planned deprecation list:

Functions & Methods


Hard Deprecation

When a function/method is on hard deprecation phase, it means that the function/method will still work while it’s in this phase, but will add a PHP notice if the website WP_DEBUG property is set to true .

Function / Method NameChanges Made
Controls_Stack::_get_items()

Core Plugin
Replaced by: Controls_Stack::get_items()
Located in: includes/base/controls-stack.php
In Soft deprecation since: 2.3.0
Deletion version: 3.1.0
DB::get_new_editor_from_wp_editor()

Core Plugin
Replaced by: Plugin::$instance->documents->get( $post_id )->convert_to_elementor()
Located in: includes/db.php
In Soft deprecation since: 2.3.0
Deletion version: 3.1.0
Editor::add_editor_template()

Core Plugin
Replaced by:  Plugin::$instance->common->add_template()
Located in: includes/editor.php
In soft deprecation since:2.3.0
Deletion version:3.1.0
Editor::create_nonce()

Core Plugin
Replaced by: Plugin::$instance->common->get_component( 'ajax' )->create_nonce()
Located in: includes/editor.php
In soft deprecation since: 2.3.0
Deletion version: 3.1.0
Editor::verify_ajax_nonce()

Core Plugin
Replaced by: None
Located in: includes/editor.php
In soft deprecation since: 2.3.0
Deletion version: 3.1.0
Editor::verify_nonce()

Core Plugin
Replaced by: wp_verify_nonce()
Located in: includes/editor.php
In soft deprecation since: 2.3.0
Deletion version: 3.1.0
Editor::verify_request_nonce()

Core Plugin
Replaced by: Plugin::$instance->common->get_component( 'ajax' )->verify_request_nonce()
Located in: includes/editor.php
In soft deprecation since: 2.3.0
Deletion version: 3.1.0

Deletion

When a function/method is on deletion phase, it means that the function/method will not work anymore, and will most likely throw a Fatal Error when it’s called.

Function / Method NameChanges Made
Controls_Stack::_get_parsed_settings()

Core Plugin
Replaced by: Controls_Stack::get_init_settings()
Located in: includes/base/controls-stack.php
In soft deprecation since: 2.3.0
In hard deprecation since: 2.3.0

Actions and Filters

Soft Deprecation

Action / FilterChanges Made
elementor/element/post/before_section_start Replaced by: elementor/element/wp-{$post}/before_section_start
Context: $post depends on the document type and can be either page or post
Type: Action (core)
Hard deprecation: 3.1.0
Deletion: 3.5.0
elementor/element/post/after_section_start Replaced by: elementor/element/wp-{$post}/after_section_start
Context: $post depends on the document type and can be either page or post
Type: Action (core)
Hard deprecation: 3.1.0
Deletion: 3.5.0
elementor/element/post/before_section_end Replaced by: elementor/element/wp-{$post}/before_section_end
Context: $post depends on the document type and can be either page or post
Type: Action (core)
Hard deprecation: 3.1.0
Deletion: 3.5.0
elementor/element/post/after_section_end Replaced by: elementor/element/wp-{$post}/after_section_end
Context: $post depends on the document type and can be either page or post
Type: Action (core)
Hard deprecation: 3.1.0
Deletion: 3.5.0

You can download the latest release of Elementor Core from WordPress repository, and the latest release of Elementor Pro from your Elementor dashboard.

If you spot any issues, please log them in detail on Github.

Read More »

Never miss an update
Subscribe to our developer’s newsletter for every latest update