AJAX с WordPress и Изотопом - PullRequest
Новая
       11

AJAX с WordPress и Изотопом

0 голосов
/ 11 марта 2019

Я использовал макет изотопа в WordPress для кладки сетки. Я долго пытался реализовать кнопку «загрузить больше».

Мои шаги следующие:

Добавьте функцию, чтобы я мог использовать AJAX на стороне клиента. 

/**
 * Load in AJAX load more script
 */
add_action('wp_enqueue_scripts', 'add_ajax_javascript');

function add_ajax_javascript()
{
    wp_register_script('ajax_loader', get_template_directory_uri() . '/assets/scripts/ajax-load-more.js', array('jquery'));
    wp_enqueue_script('ajax_loader');

    wp_localize_script('ajax_loader', 'load_more_ajax', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
    ));
}

Добавлена ​​дополнительная функция загрузки 

/**
 * Load more AJAX backend
 *
 * @return void
 */
function load_more_ajax()
{
    // Verify the nonce for this function
    if (!wp_verify_nonce($_POST['nonce'], 'load_more_ajax')) {
        return;
    }

    // Set the offset for pagination
    $offset = $_POST['offset'];
    $init_offset = $_POST['init_offset'];

    if ($offset != null && absint($offset) && $init_offset != null && absint($init_offset)) {
        // Finally, we'll set the query arguments and instantiate WP_Query
        $args = array(
            'post_type'  =>  'post',
            'posts_per_page' =>  $init_offset,
            'offset' => $offset
        );

        $query = new WP_Query($args);

        if ($query->have_posts()) :
            while ($query->have_posts()) : $query->the_post();
                ?>


<div class="grid-item">
    <?php get_the_title() ?>
</div>

<?php
endwhile;

$response = [
    'status' => 200,
    'posts'  => ob_get_clean(),
];

endif;

wp_reset_query();
wp_reset_postdata();

die(json_encode($response));
}
}
add_action('wp_ajax_load_more_ajax', 'load_more_ajax');
add_action('wp_ajax_load_nopriv_my_action', 'my_action_callback');

Добавлена ​​кнопка загрузки еще на передней панели

<button class="load-more-posts" data-nonce="<?php echo wp_create_nonce('load_more_ajax'); ?>" data-offset="10">Load More Posts</button>

Затем добавил функцию AJAX 

jQuery(function ($) { // use jQuery code inside this to avoid "$ is not defined" error

  const $grid = $('#grid').isotope({
    itemSelector: '.grid-item',
    percentagePosition: true,
    animationEngine: 'best-available', //CSS3 if browser supports it, jQuery otherwise
    animationOptions: {
      duration: 800,
    },
    masonry: {
      columnWidth: '.grid-item',
      gutter: 30,
    },
  })

  var has_run = false;
  var init_offset = 0;

  $('button.load-more-posts').click(function (e) {
    console.log('Attempted to load more');

    e.preventDefault();

    var button = $(this);

    // Disable button
    button.prop("disabled", true);

    // Record Nonce
    var nonce = $(this).data("nonce");

    if (has_run == false) {
      button.data('offset', $(this).data("offset"));
      init_offset = $(this).data("offset");
    }

    $.ajax({
      url: load_more_ajax.ajaxurl,
      data: {
        action: 'load_more_ajax',
        nonce: nonce,
        init_offset: init_offset,
        offset: button.data('offset'),
      },
      type: 'POST',
      dataType: 'json',
      beforeSend: function (xhr) {
        button.text('Loading');
      },
      success: function (response) {
        // var response = JSON.parse(response);
        console.log(response);

        $grid.append($items).isotope('appended', $items, function () {
          console.log('appended');
        });

        // Undo Button Disable
        button.prop("disabled", false);

        // Set Offset
        var offset = button.data("offset");
        button.data("offset", offset + 10);

        // If Has Run
        has_run = true;

        return false;
      },
      error: function () {
        console.log("Error");
      }
    });
  });
});

Однако, когда я использую это, я либо получаю 400 неверных запросов, либо получаю ответ 0.

...