Как вывести значения ACF wordpress в модальном окне?
Столкнулся с такой проблемой, что при просмотре записи в модальном окне с аяксом показывается контент из группы полей (ACF) только для первой записи и не показывается слайдер (flexslider), точнее он показывается но только точки и стрелки навигации.
functions.php
function artisansweb_scripts() {
wp_enqueue_style('bootstrapcss', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css', array(), false, 'all');
wp_register_script('bootstrapjs', 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js', array('jquery'), false, true);
wp_enqueue_script('bootstrapjs');
wp_register_script('custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true);
// Localize the script with new data
$script_data_array = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'security' => wp_create_nonce( 'view_post' ),
);
wp_localize_script( 'custom-script', 'blog', $script_data_array );
wp_enqueue_script('custom-script');
}
add_action('wp_enqueue_scripts', 'artisansweb_scripts');
function load_post_by_ajax_callback() {
check_ajax_referer('view_post', 'security');
$args = array(
'post_type' => 'post',
'p' => $_POST['id'],
);
$posts = new WP_Query( $args );
$arr_response = array();
if ($posts->have_posts()) {
while($posts->have_posts()) {
$posts->the_post();
$arr_response = array(
'title' => get_the_title(),
'content' => get_the_content(),
);
}
wp_reset_postdata();
}
echo json_encode($arr_response);
wp_die();
}
add_action('wp_ajax_load_post_by_ajax', 'load_post_by_ajax_callback');
add_action('wp_ajax_nopriv_load_post_by_ajax', 'load_post_by_ajax_callback');
Вывод цикла с модальным окном
// Start posts query
if( $query->have_posts() ): ?>
<div class="<?php echo esc_attr( "am_post_grid am__col-3 am_layout_{$args['layout']} {$args['animation']} " ); ?>">
<?php while( $query->have_posts()): $query->the_post(); ?>
<!-- Modal -->
<div class="modal" id="postModal">
<div class="modal-dialog" style="max-width:70%">
<div class="modal-content" >
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="float:right"></button>
<div class="row-popup">
<div class="col-popup" style="min-width: 545px;">
<?php if( have_rows('portfolio-gallery') ): ?>
<div class="flexslider">
<ul class="slides">
<?php while( have_rows('portfolio-gallery') ) : the_row();
$image = get_sub_field('image');
$imageurl = $image['sizes']['slider'];
?>
<li><img src="<?php echo $imageurl; ?>"></li>
<?php endwhile; ?>
</ul>
</div>
<?php endif; ?>
</div>
<div class="col-popup" style="width:40%">
<div class="portfolio-title">Игра <?php $value = get_field("portfolio-game-type"); echo $value;?></div>
<div class="portfolio-customer">заказчик: <?php the_field('portfolio-customer'); ?></div>
<div class="portfolio-review"><?php the_field('portfolio-review'); ?></div>
<div class="portfolio-price"><?php the_field('quantity-and-price'); ?></div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php if($args['layout'] == "1"){ ?>
<div class="am_grid_col" >
<div class="am_single_grid view-post">
<div class="am_thumb">
<?php the_post_thumbnail('full'); ?>
</div>
<div class="am_cont">
<a href="<?php echo get_the_permalink(); ?>"><h2 class="am__title"><?php echo get_the_title(); ?></h2></a>
</div>
</div>
</div>
<?php } else if( $args['layout'] == 2 ){ ?>
<?php } ?>
<?php endwhile; ?>
</div>
Скрипт
jQuery(function($) {
$('body').on('click', '.view-post', function() {
var data = {
'action': 'load_post_by_ajax',
'id': $(this).data('id'),
'security': blog.security
};
$.post(blog.ajaxurl, data, function(response) {
response = JSON.parse(response);
$('#postModal h5#postModalLabel').text(response.title);
$('#postModal .modal-body').html(response.content);
var postModal = new bootstrap.Modal(document.getElementById('postModal'));
postModal.show();
});
});
});
Источник: Stack Overflow на русском