Ajax sort using two compounded dropdowns - php

Question

Currently, I am using a nav menu to display the categories of items, using Ajax to sort/limit items shown to the chosen category, and using lazyload to display additional items on scroll.
I am wanting to change the nav menu to two button dropdowns – one for categories, and the other for locations. I would like the user to be able to sort by category OR store, independently, or by category AND store, in conjunction.
Scenario:
User chooses Category A
Category A items for ALL locations are shown
User then chooses Location A
Category A items for Location A are shown
User then chooses Location B
Category A items for Location B are shown
User then chooses Category B
– Category B items for Location B are shown
I am hoping that this can be usable in reverse order as well, i.e. if the user chooses location first, and then category.
I am knee-deep in code - aren't we all! ;) - and think I need another pair of eyes to slap me back straight! Where am I going wrong?!? TIA for the help.
FYI, currently when I select the category, it works fine. When I then select a location, it just shows that location's items within the last category, regardless of the category previously chosen, and then when I scroll, lazyload begins displaying items from all locations and all categories. If I choose the location first, it shows that location's items from the last category. Any help is much appreciated.
Here are the buttons: (include-menu)
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose Category <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li'; if (!$_REQUEST || $_REQUEST['show']) { echo ' class="active"'; } echo '><a class="pawn-sort" href="?show=all">Show All</a></li>'."\n";
$result = $site->query("SELECT * FROM CATEGORIES ORDER BY NAME ASC");
while ($data = $result->fetch_array())
{
$category_id = $data['ID'];
$cats = $site->query("SELECT * FROM PRODUCTS WHERE CATEGORIES LIKE '%$category_id%'");
if ($cat = $cats->fetch_array())
{
echo '<li'; if ($category_id == $_REQUEST['category']) { echo ' class="active"'; } echo '>
' . ucwords($data['NAME']) . '
<!-- <a data-index="' . $category_id . '" name="cat" href="#">' . ucwords($data['NAME']) . '</a> -->
</li>'."\n";
}
}
echo '</ul>
</div>
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose Store <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Show All</li>
<li class="divider"></li>
<li>location1</li>
<li>location2</li>
<li>location3</li>
<li>location4</li>
<li>location5</li>
<li>location6</li>
<li>location7</li>
</ul>
</div>
Here is where ajax gets the items and displays them: (ajax-get-items)
define('ITEMS_PER_PAGE',8);
$category = $_GET['category'] ? $_GET['category'] : null;
$kingdom = $_GET['kingdom'] ? $_GET['kingdom'] : null;
if ($kingdom)
{
$this_store = " AND STORE = '$kingdom'";
} else {
$this_store = '';
}
$page = $_GET['page'] ? ($_GET['page']) : 1;
if($page < 1)
{
$page = 1;
}
$first = $_GET['first'] ? ($_GET['first']) : 0;
$next = $page + 1;
$start = ($page - 1 ) * ITEMS_PER_PAGE;
$offset = ITEMS_PER_PAGE;
if ($category) {
$que = "SELECT * FROM PRODUCTS WHERE QUANTITY != '0' AND STATUS = '1' AND CATEGORIES LIKE '%$category%' $this_store ORDER BY DATE DESC LIMIT $start, $offset";
$queAll = "SELECT * FROM PRODUCTS WHERE QUANTITY != '0' AND STATUS = '1' AND CATEGORIES LIKE '%$category%' $this_store ORDER BY DATE DESC";
} else {
$que = "SELECT * FROM PRODUCTS WHERE QUANTITY != '0' AND STATUS = '1' $this_store ORDER BY DATE DESC LIMIT $start, $offset";
$queAll = "SELECT * FROM PRODUCTS WHERE QUANTITY != '0' AND STATUS = '1' $this_store ORDER BY DATE DESC";
}
// COUNT HOW MANY ITEMS AVAILABLE
$resultsAll = $site->query("$queAll");
$countAll = count($resultsAll->fetch_assoc());
// MAIN QUERY
$results = $site->query("$que");
$output = "";
$counter = 0;
while ($cupon = $results->fetch_array()) {
$name = $cupon['NAME'];
$price = $cupon['PRICE'];
$store = $cupon['STORE'];
$sku = $cupon['SKU'];
$upc = $cupon['UPC'];
$img_id = $cupon['IMAGE_ID'];
$notify = $cupon['NOTIFY'];
$store_sku = $cupon['STORE_SKU'];
$out = "&out=true";
$img = "img/l/{$img_id}_1.jpg";
$output .= '<div class="pin">
<div id="pin_' . $counter . '">
<div class="thumbnail" style="overflow: hidden;">
<ul class="img-list">
<li>
<a href="/buy.php?sku=' . $sku . '">
<img class="radius" src="/' . $img . '">
<span class="text-content"><span>View Product Info</span></span></a>
</li>
</ul>
<div class="caption pinkish" style="margin-top:-9px;">
<h4 class="pin-title">' . $name . '</h4>
<hr style="margin-bottom:5px;">' . "\n";
$kingdoms = $castle->query("SELECT NAME, CITY, STATE FROM KINGDOMS WHERE ID = '$store' LIMIT 1");
$kingdom = $kingdoms->fetch_array();
$output .= '#' . $store_sku . '
<span class="glyphicon glyphicon-map-marker"></span> ' . $kingdom['CITY'] . '
<hr style="margin-top:5px;margin-bottom:3px;">
<p class="pin-price">
<a href="/buy.php?sku=' . $sku . '" class="btn btn-info btn-sm pull-right btn-green" style="margin-top:3px;" role="button">
<span class="glyphicon glyphicon-search small"></span> More info
</a>
<span class="price">$' . number_format($price, 2) . '</span>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>' . "\n";
$counter++;
}
$output.= '<script type="text/javascript">
var container = document.querySelector(\'#container\');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container, {
// options
itemSelector: \'.pin\'
});
});
</script>';
if($category)
{
if(((($page -1) * ITEMS_PER_PAGE + $counter)< $countAll) )
{
$output.= '<div id="page-nav"></div>';
} else {
$output.= "<script>$('#container').infinitescroll('unbind', {debug: true});</script>";
}
} else {
if(((($page -1) * ITEMS_PER_PAGE + $counter)< $countAll) )
{
$output.= '<div id="page-nav"></div>';
} else {
$output.= "<script>$('#container').infinitescroll('unbind', {debug: true});</script>";
}
}
echo $output;
Here is the jquery:
<script>
$('.filter').on('click',function(){
var filterValue = $(this).attr('data-filter');
$('#alist').isotope({filter: filterValue});
})
var $container = $('#container');
function customMasonry(newElements)
{
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( $container, function() {
msnry = new Masonry( container, {
// options
itemSelector: '.pin'
});
});
});
}
function customScroll()
{
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
debug: false,
animate : false,
errorCallback : function() {
$container.infinitescroll('destroy');
$.removeData(this);
},
nextSelector : '#page-nav:first a:first', // selector for the NEXT link (to page 2)
itemSelector : '.pin', // selector for all items you'll retrieve
loading: {
finishedMsg: '',
img: 'loading.gif',
msgText: ''
}
},
// trigger Masonry as a callback
function( newElements ) {
customMasonry(newElements)
}
);
}
$(function(){
var isMobile = window.matchMedia("only screen and (min-width: 760px)");
if (isMobile.matches) {
$("#categories").sticky({topSpacing: 70});
}
customScroll();
$('.pawn-sort').click(function(event){
$('#container').html('');
$('#container').infinitescroll('bind');
$('html, body').animate({
scrollTop: $("#container").offset().top -369
}, 0);
$url = $(this).attr('href');
var res = $url.split("&");
var cat = res[0].split("=");
var $category = cat[1];
var king = res[1].split("=");
var $kingdom = king[1];
if($category == 'all' )
{
$category = null;
}
if($kingdom == 'all' )
{
$kingdom = null;
}
$('#container').css({height:500});
$.ajax({
method: "GET",
url: "ajax-get-items.php",
data: { page: "1", category: $category, kingdom: $kingdom, first: true }
})
.done(function( msg ) {
$('#container').html("<div id='gif'><img src='loading.gif'/></div>");
setTimeout(
function()
{
$('#container').html(msg);
// Reset the plugin before intializing it again
$('#container').infinitescroll('destroy');
$('#container').data('infinitescroll', null);
// Initialize plugin
$('#container').infinitescroll(
{
state: {
isDestroyed: false,
isDone: false,
isDuringAjax : false
}
}
);
customScroll();
}, 500);
});
event.preventDefault();
})
});
</script>