// C какого товара будет осуществляться вывод
$startFrom = $_POST['startFrom'];
// Получаем 40 товаров отсортированных по цвету, начиная с последнего на сайте
$res = mysqli_query($db, "SELECT * FROM `products` ORDER BY `color` LIMIT {$startFrom}, 40");
// Формируем массив с товаром
$products = array();
while ($row = mysqli_fetch_assoc($res))
{
$products[] = $row;
}
// Превращаем массив товара в json-строку для передачи через Ajax-запрос
echo json_encode($articles);
$(document).ready(function(){
/* Переменная-флаг для отслеживания того, происходит ли в данный момент ajax-запрос. В самом начале даем ей значение false, т.е. запрос не в процессе выполнения */
var inProgress = false;
/* Переменная для определения первого цикла */
var firstCycle = true;
/* С какого товара надо делать выборку из базы при ajax-запросе */
var startFrom = 40;
$(window).scroll(function() {
/* Если высота окна + высота прокрутки больше или равны высоте всего документа и ajax-запрос в настоящий момент не выполняется, то запускаем ajax-запрос */
if($(window).scrollTop() + $(window).height() >= $(document).height() - 200 && !inProgress) {
$.ajax({
/* адрес файла-обработчика запроса */
url: 'obrabotchik.php',
/* метод отправки данных */
method: 'POST',
/* данные, которые мы передаем в файл-обработчик */
data: {"startFrom" : startFrom},
/* что нужно сделать до отправки запрса */
beforeSend: function() {
/* меняем значение флага на true, т.е. запрос сейчас в процессе выполнения */
inProgress = true;}
/* что нужно сделать по факту выполнения запроса */
}).done(function(data){
/* Преобразуем результат, пришедший от обработчика - преобразуем json-строку обратно в массив */
data = jQuery.parseJSON(data);
/* Узнаем размер массива*/
var productsCount = data.length;
/* Если массив не пуст */
if (productsCount > 0) {
/* Делаем проход по каждому результату, оказвашемуся в массиве,
где в index попадает индекс текущего элемента массива, а в data - сам товар*/
$.each(data, function(index, data){
/* Получаем реальный цвет для первого сравнения*/
if(!!firstCycle){
var color = data.color;
firstCycle = False;
}
/* Добавляем перенос на новую строчку если цвет отличается от предыдущего и запоминаем новый цвет*/
if (color != data.color){
$(".l-products-list").append("<div class='clearfix'></div>");
color = data.color;
}
/* Отбираем по классу блок с товарами и дозаполняем его новыми*/
$(".l-products-list").append("<div class='col-lg-3 l-category-model-wrap' data-product-id=" + data.id + ">" + data.text + "</div>");
});
/* По факту окончания запроса снова меняем значение флага на false */
inProgress = false;
// Увеличиваем на колличество подгруженного товара, с которой надо начинать выборку из базы
startFrom += productsCount;
}});
}
});
});
<script>
var results=[];
var myPromise;
function Parallel(setings,step,done) {
this.parallelJobs = setings;
this.job = function (step){
myPromise = new Promise((resolve, reject) => {
resolve(step);
});
myPromise.then((step) => {
step(function done(message) {
results[results.length] = message;
});
});
return this;
};
this.done = function (done) {
setTimeout(function () {
done(results);
}, 1700);
return this;
};
};
</script>
var results=[];
function Parallel(setings,step,done) {
this.parallelJobs = setings;
this.job = function (step){
step();
return this;
};
this.done = function (done) {
done();
return this;
};
};
function done(message) {
results.push(message);
console.log(results);
}
ACF'ом создавать кастомные оценки, аяксом пулить в бд
а вот и плагин