Эластичный поиск Фильтр товаров
Я реализовал фильтр товаров с нумерацией страниц, используя Elastic Search & Logstash в PHP.
Тест-кейс-1:
я имею 1000 товары & каждая страница имеет 25 продукты, поэтому нумерация страниц будет 1,2 …. 40
ПРИМЕЧАНИЕ: нумерация страниц работает без использования фильтра.
Тест-кейс-2:
я имею 100 продукты, после фильтр с синим цветом & каждая страница имеет 25 продукты, поэтому нумерация страниц будет 1,2,3,4
ПРИМЕЧАНИЕ: когда я нажимаю на третий страница, которая ведет меня ко всем продуктам, вместо того, чтобы сохранять фильтрованные продукты и 3-ю страницу.
Дайте мне знать, как сохранить информацию отфильтрованных продуктов, чтобы искать против отфильтрованных продуктов.
Найдите мой полный исходный код ниже:
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://localhost/es/js/ajax.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#filter1">
Filter
</a>
<a class="pull-right" data-toggle="collapse" href="#filter1">
<span class="glyphicon glyphicon-filter"></span>
</a>
</h4>
</div>
<div class="panel-collapse collapse in">
<div class="panel-body">
<div class="filter-setting">
<form action="" mathod="post" id="refine_search">
<label>Search by Anything</label>
<a class="pull-right collapsed-icon-toggle" href="#coll-0" data-toggle="collapse">
</a>
<br/>
<div id="coll-4" class="scroll-v-250px collapse in">
<div class="padding-v-xs" data-toggle="buttons">
<input type="text" name="_all" placeholder="Search Title, Author, ISBN" class="refine_search_field" value=""/>
</div>
</div>
<button style ="display:none;" type="submit" class="btn btn-block btn-success">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-8 text-left" id="refine_search_result">
Welcome to JLG
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
<input type="button" value="next" id="load_more" />
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
action.php
<?php
include 'filter.php';
$object = new filter();
$filter_data = $_POST;
echo '<pre>'; print_r($_POST); echo '</pre>';
//echo $_POST["action"];
$action = $_POST["action"];
switch ($action) {
case "filter":
echo 'yes';
foreach($filter_data as $filter_key => $filter_val){
$check = array('action','size','pagenum');
if(!in_array($filter_key, $check)){
$query.= '"'.trim($filter_key).'":"'.trim(strtolower($filter_val)).'"';
}
}
$param = '{
"query": {
"match": {'.$query.'}
}}';
$object->get_books($size=5, $pagenum=1, $param);
break;
default:
if(isset($_POST["size"],$_POST["pagenum"])){
$size = $_POST["size"];
$pagenum = $_POST["pagenum"];
} else{
$size = 5;
$pagenum = 1;
}
$object->get_books($size, $pagenum);
}
?>
filter.php
<?php
class filter{
function __construct()
{
}
public function get_books($size, $pagenum, $param){
echo $size.'--'.$pagenum.'--'.$param;
$this->books_curl($size, $pagenum, $param);
$cnt = $this->json_books['hits']['total']; //no. of records
$last = ceil($cnt/$size); // no. of page
//this makes sure the page number isn't below one, or more than our maximum pages
// if ($pagenum < 1) {
// $pagenum = 1;
// } elseif ($pagenum > $last) {
// $pagenum = $last;
// }
$from = ($pagenum - 1) * $size;
$this->books_curl($size, $pagenum, $param);
echo '<div class="row">';
echo '<h4>'.$this->json_books['hits']['total'].' resutls found</h4>';
foreach($this->json_books['hits']['hits'] as $book){
echo '<div class="col-sm-3"> <div class="well">';
echo '<h4>'.$book['_source']['title'].'</h4>';
echo '<p>ISBN: '.$book['_source']['isbn'].'</p>';
echo '<p>'.strip_tags(substr($book['_source']['description'],0,150)).'</p>';
echo '$'.$book['_source']['publisher_price'];
echo '</div></div>';
}
echo '</div>';
echo '<ul class="pagination">';
if ( ($pagenum-1) > 0) {
echo '<li><a href="javascript:void(0);" class="page" data-size="'.$size.'" data-page="1">First</a></li>';
echo '<li><a href="javascript:void(0);" class="page" data-size="'.$size.'" data-page="'.($pagenum-1).'">Previous</a></li>';
}
//Show page links
for($i=1; $i<=$last; $i++) {
if ($i == $pagenum ) {
echo '<li class="active"><a href="javascript:void(0);">'.$i.'</a></li>';
} else {
echo '<li><a href="javascript:void(0);" class="page" data-size="'.$size.'" data-page="'.$i.'">'.$i.'</a></li>';
}
}
if ( ($pagenum+1) <= $last) {
echo '<li><a href="javascript:void(0);" class="page" data-size="'.$size.'" data-page="'.($pagenum+1).'">Next</a></li>';
} if ( ($pagenum) != $last) {
echo '<li><a href="javascript:void(0);" class="page" data-size="'.$size.'" data-page="'.$last.'">Last</a></li>';
}
echo '</ul>';
}
public function books_curl($size, $pagenum, $param){
$pagenum = $pagenum-1;
$from = $size*$pagenum;
// echo $param;
$this->curl = curl_init();
curl_setopt($this->curl, CURLOPT_URL, "http://localhost:9200/jlg_test2/data/_search?size=".$size.'&from='.$from);
curl_setopt($this->curl,CURLOPT_HTTPHEADER, 'Content-Type: application/json');
curl_setopt($this->curl, CURLOPT_RETURNTRANSFER, 1);
//if($param){
curl_setopt($this->curl, CURLOPT_POSTFIELDS, $param);
//}
$this->books = curl_exec($this->curl);
curl_close($this->curl);
$this->json_books = json_decode($this->books, true);
}
}
?>
ajax.js
(function($){
$(document).ready(function(){
// $(window).on("load", function() {
// //alert('d');
// $("a[data-page='10']").trigger('click');
// });
load_books('default'); //load all books by default
//filter
$(".refine_search_field").on('change keyup',function(){
load_books('filter'); //calling refine search function
});
function load_books(action){
var path = "http://localhost/es/action.php";
var input_data = $('#refine_search').serialize();
var action = (input_data.length > 5) ? action:"default"; //checking filter is empty or not
$.ajax({
type: "POST",
url:path,
data: input_data+"&action="+action,
//cache: false,
success: function(data){
$("#refine_search_result").html(data);
}
});
}
//books pagination
$('body').on('click','.page',function(){
console.log('ok');
var path = "http://localhost/es/action.php";
var size = $(this).attr('data-size');
var pagenum = $(this).attr('data-page');
var input_data = $('#refine_search').serialize();
var action = (input_data.length > 5) ? 'filter':"default"; //checking filter is empty or not
//if(action == 'filter'){
//}
//var action = 'load';
$.ajax({
type: "POST",
url: path,
// data:{action:action,size:size,pagenum:pagenum},
data: input_data+"&action="+action+"&size="+size+"&pagenum="+pagenum,
//data: input_data+"size="+size+"&pagenum="+pagenum,
//data:{action:action,size:size,pagenum:pagenum},
//cache: false,
// beforeSend: function() {
// $('#refine_search_result').html('<img src="https://web-answers.ru/wp-content/uploads/2019/02/loading.gif" alt="" style="display:block;height:auto;width:auto;margin:0 auto;"/>');
// },
success: function(data) {
console.log(this.data);
$("#refine_search_result").html(data);
//$('.loader').html('');
}
});
});
});
})(jQuery)
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …