Menu
Menu
It could be that you only want to show certain elementor popups in a certain language. This is not possible with the current tools. That is why I have developed my own extension which makes this possible.
To make it as seamless as possible I wanted to add an extra rule to Elementor’s “advanced rules”. Unfortunately the elementor documentation regarding this part is not that extensive.
In fact, this piece only talks about injecting controls to the standard widgets. But I want to show my control at the bottom of the “Advanced rules” section of the popup Publish Settings, as shown on the screenshot below.
elementor/element/{$stack_name}/{$section_id}/after_section_end hook. The actual popup timing controls are specifiek in timing.php, if you’re interested, here is the full code of that file.
There are two interesting bits that we should take a closer look at.
public function get_name() {
return 'popup_timing';
}
$this->start_controls_section( 'timing' );
The above pieces of code are the missing pieces we need to complete our action hook. This would now become: elementor/element/popup_timing/timing/after_section_end.
Where {$stack_name} was replaced with the return value of get_name() namely popup_timing'. And {$section_id} was replaced with the value passed to $this->start_controls_section namely timing
With this information in mind we can start building. The first thing I did was run some checks to make sure that elementor edit mode is active, that elementor itself is running and that polylang is running.
$edit_mode = \Elementor\Plugin::$instance->editor->is_edit_mode();
if (!$edit_mode || !is_plugin_active('elementor/elementor.php') || !function_exists('pll_languages_list')) {
return;
}
Afterwards we need to start injecting our controls. Also we add the first control which functions as a header.
$element->start_injection([
'at' => 'after',
'of' => 'browsers',
]);
$element->add_control('polylang_heading', [
'type' => Elementor\Controls_Manager::HEADING,
'label' => esc_html__('Show in languages', 'elementor-pro'),
]);
After that I’ve performed some hocus pocus on the given languages to popuplate the most important control. I’m not going in details what this bit of code does. If it’s unclear, feel free to let me know via the comments down below.
$default_languages = pll_languages_list();
$popup_display_settings = end(get_post_meta(get_the_ID(), '_elementor_popup_display_settings'));
$chosen_languages = [];
if ($popup_display_settings['timing'] !== null) {
!array_key_exists('active_languages', $popup_display_settings['timing']) ? $chosen_languages = $popup_display_settings['timing']['active_languages'] : null;
}
empty($chosenLanguages) ? $chosen_languages = $default_languages : null;
$languageOptions = [];
foreach ($default_languages as $key => $lang) {
$languageOptions[$lang] = $lang;
}
Then we add the last two controls. First one is the languages select, second one is the switcher.
$element->add_control(
'active_languages',
[
'type' => Elementor\Controls_Manager::SELECT2,
'multiple' => true,
'default' => array_values($chosen_languages),
'options' => $languageOptions,
]
);
$element->add_control(
'polylang',
[
'type' => Elementor\Controls_Manager::SWITCHER,
'classes' => 'elementor-popup__display-settings__group-toggle',
'frontend_available' => true,
]
);
All that’s left is the end the injection.
$element->end_injection();
If we wrap all that code in an action hooks which calls the action we spoke about previously you will end up with this bit of code:
add_action(
'elementor/element/popup_timing/timing/after_section_end',
function ($element, $args) {
$edit_mode = \Elementor\Plugin::$instance->editor->is_edit_mode();
if (!$edit_mode || !is_plugin_active('elementor/elementor.php') || !function_exists('pll_languages_list')) {
return;
}
$element->start_injection([
'at' => 'after',
'of' => 'browsers',
]);
$element->add_control('polylang_heading', [
'type' => Elementor\Controls_Manager::HEADING,
'label' => esc_html__('Show in languages', 'elementor-pro'),
]);
$default_languages = pll_languages_list();
$popup_display_settings = end(get_post_meta(get_the_ID(), '_elementor_popup_display_settings'));
$chosen_languages = [];
if ($popup_display_settings['timing'] !== null) {
!array_key_exists('active_languages', $popup_display_settings['timing']) ? $chosen_languages = $popup_display_settings['timing']['active_languages'] : null;
}
empty($chosenLanguages) ? $chosen_languages = $default_languages : null;
$languageOptions = [];
foreach ($default_languages as $key => $lang) {
$languageOptions[$lang] = $lang;
}
$element->add_control(
'active_languages',
[
'type' => Elementor\Controls_Manager::SELECT2,
'multiple' => true,
'default' => array_values($chosen_languages),
'options' => $languageOptions,
]
);
$element->add_control(
'polylang',
[
'type' => Elementor\Controls_Manager::SWITCHER,
'classes' => 'elementor-popup__display-settings__group-toggle',
'frontend_available' => true,
]
);
$element->end_injection();
}, 10, 2);
Once we got all that work done I had to figure out a way to conditionally show the popup based on the defined languages. For that we need one more thing: A script that listens for elementor popup events which we can hijack to perform our conditional checks
Below is the script which we will put in the footer. This script listens for elementor/popup/show events. If such an event is triggered we temporarily hide the popup, untill we receive response from an AJAX request to the back-end.
add_action('wp_footer', function () {
// Make sure we don't hide the popup in editor mode
if (\Elementor\Plugin::$instance->preview->is_preview_mode()) return;
?>
<script>
jQuery(document).on('elementor/popup/show', (event, id, instance) => {
jQuery('#elementor-popup-modal-' + id).hide();
jQuery.ajax({
url: "/wp-admin/admin-ajax.php",
type: "POST",
data: {
'action': 'fetch_popup_timing_triggers',
'postid': id
},
success(response) {
if (response.meta.timing.active_languages.includes(response.current_lang)) {
jQuery('#elementor-popup-modal-' + id).show();
}
}
});
});
</script>
<?php
});
All that’s left is to add the following action which will run when an ajax request is sent. This will get all the required data from the databank and return it so that the appropriate check can be completed.
function fetch_popup_timing_triggers()
{
$meta = get_post_meta($_POST['postid'], '_elementor_popup_display_settings', false);
wp_send_json([
'current_lang' => pll_current_language(),
'meta' => end($meta)
]);
wp_die();
}
add_action('wp_ajax_nopriv_fetch_popup_timing_triggers', 'fetch_popup_timing_triggers');
add_action('wp_ajax_fetch_popup_timing_triggers', 'fetch_popup_timing_triggers');
When done correctly, you should now be able to conditionally show elementor popup based on a language setting, dictated by Polylang. If you are stuck, feel free to leave a comment and I’ll try to help you out.
Do you have any questions? Please feel free to leave a comment below, and I will do my best to respond as quickly as possible.
If you’re interested in more tutorials or engaging content, be sure to check out my YouTube channel
I’m really impressed with your website and this post in particular. It’s evident that you have a deep understanding of the subject and have presented it in an easily digestible manner. Great job!
Thank you for sharing your expertise through this post. It has been incredibly beneficial and has expanded my knowledge on the subject. Your efforts in creating such a helpful resource are commendable!
Großartige Arbeit an diesem Beitrag! Der Inhalt ist aufschlussreich, gut recherchiert und gut organisiert. Man merkt, dass Sie sich mit dem Thema gut auskennen. Danke, dass Sie Ihr Fachwissen mit uns teilen!
I just wanted to express my gratitude for this post. It has been immensely helpful in solving a problem I was facing. Thank you for sharing your knowledge and expertise!
I’m really impressed with your website and this post in particular. It’s evident that you have a deep understanding of the subject and have presented it in an easily digestible manner. Great job!
Thank you for this well-structured and insightful post. It’s evident that you have a thorough understanding of the topic, and your explanations are clear and concise. Keep up the great work!
Thank you for this informative post! It has shed light on a topic I was struggling to understand. Your writing style is engaging and the information is presented clearly. Great job!
Great post! I appreciate the effort you put into explaining the topic in a clear and concise manner. It’s really helpful for someone like me who is new to this subject. Thank you!
I wanted to express my appreciation for this post. It’s concise yet informative, and I’ve gained valuable insights from reading it. Thank you for sharing your expertise with us!
I can’t thank you enough for this post. It’s exactly what I was looking for and has helped me immensely. Your dedication to providing helpful content is truly commendable!
Your post is a true gem! It’s packed with useful information, and I appreciate the practical tips you’ve included. Thank you for creating such a valuable resource!
Your post is a goldmine of information! It’s evident that a lot of research and effort went into creating this valuable resource. Great job!