Arhn - архитектура программирования

Woocommerce создает больше продуктов с помощью Ajax

Я пытаюсь создать функцию, которая загружает больше продуктов, используя запрос Ajax в Woocommerce. Моя идея состоит в том, чтобы создать кнопку «Загрузить больше продуктов», которая заменяет разбиение на страницы woocommerce и загружает 2-ю, 3-ю и т. Д. Страницы с использованием запроса ajax. Я создал скрипт, который создает кнопку «Загрузить больше» с запросом ajax, и он работает, но я пытаюсь создать функцию php, которая извлекает остальные продукты с помощью запроса ajax.

Ниже моего кода для создания кнопки «Загрузить больше»:

    <?php 

    $max_num_pages = $wp_query->max_num_pages;

    if ($max_num_pages > 1) {
        $output .=
    '<script type="text/javascript">
    var page = 1,
    max_page = '.$max_num_pages.'
    jQuery(document).ready(function(){
    jQuery(".woocommerce-pagination").hide();
    jQuery("#woo_load_more").click(function(){
    jQuery(this).hide();
    jQuery("#spinner").show();
    jQuery.ajax({
         type: "POST",
        url: "http://demo.ecquadro.com/transport/wp-admin/admin-ajax.php",
        data: {
            action: "wooPagination",
            page: page+1,
            per_page: 4,
        },
        success: function(data, textStatus, XMLHttpRequest){
            page++;
             jQuery(".prova").append(data);
            jQuery("#spinner").hide();
            if (max_page > page) {
                 jQuery("#woo_load_more").show();
            }
         },
         error: function(MLHttpRequest, textStatus, errorThrown){
             jQuery("#spinner").hide();
             jQuery(this).show();
        }
        });
        });
        });
     </script>
     <div class="woo-products-load">
     <a href="javascript:void(0);" id="woo_load_more" class=""><span>'.__('Load More Posts', '').'</span></a>
     <img id="spinner" src="'.get_template_directory_uri().'/img/loader.gif" style="display: none;">
     </div>';

     }

    echo $output;

    ?>

Любая идея, как создать функцию под названием «wooPagination», которая загружает остальные страницы?

Заранее спасибо.


  • Можете ли вы точно описать, в чем проблема? С чем у вас проблемы? Гораздо проще помочь, если знаешь, что искать. 04.07.2014
  • Привет, спасибо за ваш комментарий. У меня в демо-магазине 12 товаров, по 4 товара на странице. Я хочу создать функцию, которая загружает 2-ю и 3-ю страницы продуктов с помощью вызова ajax. Вы можете увидеть скрипт выше в действии здесь. demo.ecquadro.com/transport/products Как вы можете видеть, вызов ajax возвращает значение 0 как У меня проблема с созданием функции php, которая загружает остальные продукты, содержащиеся на 2-й и 3-й странице моего магазина. Надеюсь, вы можете мне помочь, так как я новичок в woocommerce. Спасибо. 05.07.2014

Ответы:


1

Самым лучшим решением, вероятно, было бы использование сценария бесконечной прокрутки. Вы найдете его здесь http://www.infinite-scroll.com/

Сделайте так, чтобы вы не удаляли обычную нумерацию страниц из HTML-вывода, а затем подключите ее следующим образом (вам, вероятно, нужно изменить селекторы, чтобы они соответствовали вашему сайту):

var infinite_scroll = {
    loading: {
        //img: "/img/loading-animation.gif",
        msgText: '',
    },
    nextSelector: ".pagination a.next",
    navSelector: ".pagination",
    itemSelector: "#main-content ul.products .product-small",
    contentSelector: "#main-content ul.products"
};

//Unbind load more on scroll
$(window).unbind('.infscr');

//
$("#load-more-button").click( function() {
    $(document).trigger('retrieve.infscr');
});
06.07.2014
  • Спасибо за ваши усилия :-) 08.07.2014
  • Привет, спасибо за ваш ответ. Решение работает, как я и ожидал, но у меня есть дополнительная проблема. Я использую Isotope jQuery для фильтрации категорий продуктов, но кажется, что запрос работает только для первой загруженной страницы. Любая идея, как обновить Isotope jQuery после вызова ajax? Спасибо. 08.07.2014
  • попробуйте добавить этот код $container.isotope('insert',data); после jQuery(.prova).append(данные); 04.09.2014
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..