ACF Repeater (повторитель) – AJAX загрузка

Сегодня разберёмся, как реализовать загрузку полей ACF Repeater (повторитель) с помощью технологии AJAX. При нажатии на кнопку будем подгружать вложенные поля (пусть это будут изображения).
ACF Repeater Images

Выведем изображения, предварительно создав три переменные:

  • $total_rows - получим общее число вложенных полей;
  • $count - заведём счётчик для подсчёта;
  • $number - добавим ограничение, по сколько вложенных полей (изображений) выводить при каждом AJAX запросе.
<?php
$total_rows = count(get_field('acf_repeater_row')); # всего изображений

$count = 0;  # счётчик

$number = 8; # сколько изображений отображать на каждой странице

?>

<?php
// Если есть вложенные поля (изображения)

if (have_rows('acf_repeater_row')) { ?>

    <div class="ajax-container">

        <?php
        while (have_rows('acf_repeater_row')) {
            the_row();

            if ($count == $number) {
                break; # если показали все изображения, выходим из цикла

            } ?>

            <?php $img_object = get_sub_field('acf_repeater_field'); ?>

            <a data-fancybox="gallery" href="<?php echo esc_url($img_object['sizes']['large']); ?>">
                <img src="<?php echo esc_url($img_object['sizes']['medium']); ?>" alt="alt">
            </a>

            <?php
            $count++;
        } ?>

    </div>

<?php } ?>

<button class="btn acf-loadmore" onclick="javascript: acf_repeater_show_more();"
    <?php if ($total_rows < $count) { ?> style="display: none;" <?php } ?>>
    показать ещё
</button>

Далее, под кнопкой, поместим скрипт AJAX загрузки изображений, добавленных при помощи повторителя ACF.

<!-- AJAX загрузка -->
<script>
    let my_repeater_field_post_id = <?php echo $post-> ID; ?>;
    let my_repeater_field_offset = <?php echo $number + 1; ?>;
    let my_repeater_field_nonce = '<?php echo wp_create_nonce('my_repeater_field_nonce'); ?>';
    let my_repeater_ajax_url = '<?php echo admin_url('admin-ajax.php'); ?>';
    let my_repeater_more = true;

    function acf_repeater_show_more() {
        // делаем AJAX запрос

        jQuery.post(my_repeater_ajax_url, {
            // AJAX, который мы настроили в PHP

            'action': 'acf_repeater_show_more',
            'post_id': my_repeater_field_post_id,
            'offset': my_repeater_field_offset,
            'nonce': my_repeater_field_nonce
        }, function (json) {
            // добавляем контент в контейнер

            // этот идентификатор должен соответствовать контейнеру

            // к которому вы хотите добавить контент

            jQuery('.ajax-container').append(json['content']);
            // обновим смещение

            my_repeater_field_offset = json['offset'];
            // проверим, есть ли еще что загрузить

            if (!json['more']) { // если нет, то скроем кнопку загрузки

                jQuery('.acf-loadmore').css('display', 'none');
            }
        }, 'json');
    }
</script>

Итак, мы сегодня реализовали AJAX загрузку изображений, добавленных с помощью плагина Advanced Custom Fields с типом «Повторитель».

admin