我为 Elementor 插件开发了一个名为carousel slider的自定义小部件。在那里,我为多项选择设置了 elementor 默认设置字段select2
。我在该 select2 字段中填充 Elementor Libray 模板。通常工作正常。但我想添加从编辑器预览 iframe 创建的新创建的模板。在这里,模板是使用不加载页面的 ajax 方法创建的。
为了添加新创建的项目,我使用了 Elementor JS 挂钩elementor.hooks.addAction( 'panel/open_editor/widget/widget-type
,当要编辑任何小部件或打开该小部件类型的编辑器时会触发该挂钩。使用 jQuery ajax 我设法将新创建的模板添加到该select2
字段。但问题是“当我第一次在预览 iframe 中单击该小部件类型(在我的情况下为轮播滑块)并打开编辑器时,新创建的模板已添加并出现在 select2 选项值中。现在我关闭该编辑器并再次我通过单击轮播小部件打开我的小部件的编辑器,新添加的模板消失了。我无法弄清楚问题。我的代码如下..
(function( $ ) {
$(document).ready( function() {
elementor.hooks.addAction( 'panel/open_editor/widget/premium-carousel-widget', function( panel, model, view ) {
$.ajax({
url : template_update.ajax_url,
type : 'POST',
data : {
action : 'update_template',
whatever : 'yes'
},
success : function( data ) {
if( data !== '' ) {
console.log( data );
$('select[data-setting=premium_carousel_slider_content]').append( $(data ) );
}
console.log( 'hello' );
}
});
});
});
})(jQuery);
PHP代码如下。我使用了 WordPress ajax API。
public function updating_template_after_save() {
if( $_POST['whatever'] ) {
$pagelist = get_posts(array(
'post_type' => 'elementor_library',
'showposts' => 999,
));
$options = array();
if ( ! empty( $pagelist ) && ! is_wp_error( $pagelist ) ){
foreach ( $pagelist as $post ) {
$options[ $post->ID ] = __( $post->post_title, 'premium_elemnetor' );
}
}
$old_items = get_option( 'temp_count' );
if( $old_items != $options ) {
$html = '';
$new_item = array_diff( $options, $old_items );
foreach( $new_item as $key => $value ) {
$html .= '<option value="'.$key.'">'. $value .'</option>';
}
echo $html;
update_option( 'temp_count', $options );
}
}
die();
}