tessguefen
2/16/2015 - 7:39 PM
Powersearch - Page Count
Powersearch - Page Count
// I have a custom toggle filters.. you can remove that function.
// ---- Power Search ---- ///
var catID = $('body').attr('data-catid');
// ---- Toggle for mobile filters ---- //
function filterToggle() {
$('#mobile-refine').on('click',function(e) {
$('#filters-wrap').toggle('fast');
});
}
// ---- Load Products from Power Search ---- //
function loadProducts(category_id,attr1,cf1,cf2,cf3,perpage,sort,searchoffset) {
var siteUrl = '//' + $(location).attr('host') + '/mm5/merchant.mvc?';
var params = {
Screen: 'SRCH',
Screen2: 'CTGY',
Store_Code: 'GHJ',
Search: "*",
attropts1: 'fsize',
customfield1: 'fdesign',
filter_cf1: cf1,
customfield2: 'ftype',
filter_cf2: cf2,
customfield3: 'ffinish',
filter_cf3: cf3,
priceranges: '1',
filter_cat: category_id,
searchcatcount: '1',
ProductsPerPage: perpage,
sort: sort,
searchoffset: searchoffset
}
$.ajax({
url: siteUrl,
data: params,
type:'GET',
success: function(data){
$('#products-listed').html($(data).find('#products-listed').html());
$('#filters').html($(data).find('#filters').html());
$('#pagination').html($(data).find('#pagination').html());
}
}).done( function() {
$('#filters-wrap').css('display','block');
filterToggle();
filterChange();
viewChange();
cornerstoneUX.sharedFunctions.openQuickView();
});
}
// ---- Fancy powersearch ---- //
function viewChange() {
var attr1 = $('#filters form').find('[name=filter_ao1]').val(),
cf1 = $('#filters form').find('[name=filter_cf1]').val(),
cf2 = $('#filters form').find('[name=filter_cf2]').val(),
cf3 = $('#filters form').find('[name=filter_cf3]').val(),
sort = $('#sort-by').val(),
perpage = $('.ProductsPerPage.selected').attr('data-productsperpage'),
searchoffset = $('.searchoffset.page-links-active').data('data-offset');
$('.ProductsPerPage').on('click', function(e) {
e.preventDefault();
perpage = $(this).attr('data-productsperpage'),
loadProducts(catID,attr1,cf1,cf2,cf3,perpage,sort,searchoffset);
});
$('.searchoffset').on('click', function(e) {
e.preventDefault();
searchoffset = $(this).attr('data-offset');
loadProducts(catID,attr1,cf1,cf2,cf3,perpage,sort,searchoffset);
});
}
function filterChange() {
$('#filters form').on('change', function(e) {
e.preventDefault();
var attr1 = $(this).find('[name=filter_ao1]').val(),
cf1 = $(this).find('[name=filter_cf1]').val(),
cf2 = $(this).find('[name=filter_cf2]').val(),
cf3 = $(this).find('[name=filter_cf3]').val(),
perpage = $('.ProductsPerPage.selected').attr('data-productsperpage'),
sort = $('#sort-by').val(),
searchoffset = $('.searchoffset.page-links-active').data('data-offset');
loadProducts(catID,attr1,cf1,cf2,cf3,perpage,sort,searchoffset);
});
}
filterChange();
function getFacets(category_id){
var siteUrl = '//' + $(location).attr('host') + '/mm5/merchant.mvc?';
var params = {
Screen: 'SRCH',
Screen2: 'CTGY',
Store_Code: 'GHJ',
Search: "*",
attropts1: 'fsize',
customfield1: 'fdesign',
customfield2: 'ftype',
customfield3: 'ffinish',
priceranges: '1',
filter_cat: category_id,
searchcatcount: '1',
ProductsPerPage: 12,
searchoffset: 0
}
$.ajax({
url: siteUrl,
data: params,
type:'GET',
success: function(data){
$('#filters').html($(data).find('#filters').html());
$('#pagination').html($(data).find('#pagination').html());
}
}).done( function() {
$('#filters').addClass('bottom-shadow');
filterChange();
filterToggle();
viewChange();
cornerstoneUX.sharedFunctions.openQuickView();
});
}
getFacets(catID);
filterToggle();<mvt:comment>MAKE SURE THE AMOUNT OF CUSTOM FIELDS + ATTRIBUTEFIELDS ARE CORRECT. Style as you wish but make sure the data-offset is still there + class.</mvt:comment>
<div id="pagination">
<mvt:if expr="l.settings:cxp_total_pages GT 1">
<div class="row bg-white bottom-shadow filter-items-container bottom-pagination">
<div class="column whole align-center medium-align-right page-links" id="pagination">
<span class="page-links-container">
<mvt:foreach iterator="pages" array="cxp_offset">
<mvt:if expr="l.settings:pages:buffer GE 5
AND l.settings:pages:number NE 1 AND
l.settings:pages:number NE l.settings:cxp_total_pages">
<mvt:if expr="l.settings:pages:buffer EQ 5">
<mvt:if expr="l.settings:pages:number GT l.settings:cxp_current_page">
<a href="&mvt:global:sessionurl;Screen=SRCH&Store_Code=&mvta:store:code;&search=&mvta:global:search;&searchoffset=&mvt:pages:offset;&filter_cat=&mvta:global:filter_cat;&PowerSearch_Begin_Only=&mvta:global:PowerSearch_Begin_Only;&sort=&mvta:global:sort;&range_low=&mvta:global:range_low;&range_high=&mvta:global:range_high;&mvt:powersearch:field_url;&customfield1=&mvt:global:customfield1;&customfield2=&mvt:global:customfield2;&customfield3=&mvt:global:customfield3;&attropts1=&mvt:global:attropts1;&filter_cf1=&mvt:global:filter_cf1;&filter_cf2=&mvt:global:filter_cf2;&filter_cf3=&mvt:global:filter_cf1;&filter_ao1=&mvt:global:filter_ao1;&ProductsPerPage=&mvt:global:ProductsPerPage;&searchoffset=&mvt:global:sort;" class="searchoffset" data-offset="&mvt:pages:offset;">…</a>
<mvt:else>
<a href="&mvt:global:sessionurl;Screen=SRCH&Store_Code=&mvta:store:code;&search=&mvta:global:search;&searchoffset=&mvt:pages:offset;&filter_cat=&mvta:global:filter_cat;&PowerSearch_Begin_Only=&mvta:global:PowerSearch_Begin_Only;&sort=&mvta:global:sort;&range_low=&mvta:global:range_low;&range_high=&mvta:global:range_high;&mvt:powersearch:field_url;&customfield1=&mvt:global:customfield1;&customfield2=&mvt:global:customfield2;&customfield3=&mvt:global:customfield3;&attropts1=&mvt:global:attropts1;&filter_cf1=&mvt:global:filter_cf1;&filter_cf2=&mvt:global:filter_cf2;&filter_cf3=&mvt:global:filter_cf1;&filter_ao1=&mvt:global:filter_ao1;&ProductsPerPage=&mvt:global:ProductsPerPage;&searchoffset=&mvt:global:sort;" class="searchoffset" data-offset="&mvt:pages:offset;">…</a>
</mvt:if>
</mvt:if>
<mvt:else>
<mvt:if expr="l.settings:cxp_current_page EQ pos1">
<span class="searchoffset page-links-active" data-offset="&mvt:pages:offset;">&mvt:pages:number;</span>
<mvt:else>
<a href="&mvt:global:sessionurl;Screen=SRCH&Store_Code=&mvta:store:code;&search=&mvta:global:search;&searchoffset=&mvt:pages:offset;&filter_cat=&mvta:global:filter_cat;&PowerSearch_Begin_Only=&mvta:global:PowerSearch_Begin_Only;&sort=&mvta:global:sort;&range_low=&mvta:global:range_low;&range_high=&mvta:global:range_high;&mvt:powersearch:field_url;&customfield1=&mvt:global:customfield1;&customfield2=&mvt:global:customfield2;&customfield3=&mvt:global:customfield3;&attropts1=&mvt:global:attropts1;&filter_cf1=&mvt:global:filter_cf1;&filter_cf2=&mvt:global:filter_cf2;&filter_cf3=&mvt:global:filter_cf1;&filter_ao1=&mvt:global:filter_ao1;&ProductsPerPage=&mvt:global:ProductsPerPage;&searchoffset=&mvt:global:sort" class="searchoffset" data-offset="&mvt:pages:offset;">
&mvt:pages:number;</a>
</mvt:if>
</mvt:if>
</mvt:foreach>
</span>
</div>
</div>
</mvt:if>
</div><mvt:comment>MAKE SURE THE AMOUNT OF CUSTOM FIELDS + ATTRIBUTEFIELDS ARE CORRECT. Style as you wish but make sure the data-selected is still there + data-productsperpage + class.</mvt:comment>
<div class="filter-items-container clearfix">
<nav class="column whole medium-half large-push-five-twelfths large-three-twelfths align-right per-page">
<input type="hidden" name="ProductsPerPage" value="&mvt:global:ProductsPerPage;" />
<ul>
<li class="medium uppercase">View</li>
<mvt:if expr="g.ProductsPerPage EQ 12">
<li><a href="&mvt:global:sessionurl;Screen=SRCH&Store_Code=&mvta:store:code;&search=&mvta:global:search;&searchoffset=&mvt:pages:offset;&filter_cat=&mvta:global:filter_cat;&PowerSearch_Begin_Only=&mvta:global:PowerSearch_Begin_Only;&sort=&mvta:global:sort;&range_low=&mvta:global:range_low;&range_high=&mvta:global:range_high;&mvt:powersearch:field_url;&customfield1=&mvt:global:customfield1;&customfield2=&mvt:global:customfield2;&customfield3=&mvt:global:customfield3;&attropts1=&mvt:global:attropts1;&filter_cf1=&mvt:global:filter_cf1;&filter_cf2=&mvt:global:filter_cf2;&filter_cf3=&mvt:global:filter_cf1;&filter_ao1=&mvt:global:filter_ao1;&ProductsPerPage=12&searchoffset=&mvt:global:sort;" data-productsperpage="12" class="ProductsPerPage selected" data-selected="selected">12</a></li>
<mvt:else>
<li><a href="&mvt:global:sessionurl;Screen=SRCH&Store_Code=&mvta:store:code;&search=&mvta:global:search;&searchoffset=&mvt:pages:offset;&filter_cat=&mvta:global:filter_cat;&PowerSearch_Begin_Only=&mvta:global:PowerSearch_Begin_Only;&sort=&mvta:global:sort;&range_low=&mvta:global:range_low;&range_high=&mvta:global:range_high;&mvt:powersearch:field_url;&customfield1=&mvt:global:customfield1;&customfield2=&mvt:global:customfield2;&customfield3=&mvt:global:customfield3;&attropts1=&mvt:global:attropts1;&filter_cf1=&mvt:global:filter_cf1;&filter_cf2=&mvt:global:filter_cf2;&filter_cf3=&mvt:global:filter_cf1;&filter_ao1=&mvt:global:filter_ao1;&ProductsPerPage=12&searchoffset=&mvt:global:sort;" data-productsperpage="12" class="ProductsPerPage">12</a></li>
</mvt:if>
/
<mvt:if expr="g.ProductsPerPage EQ 24">
<li><a href="&mvt:global:sessionurl;Screen=SRCH&Store_Code=&mvta:store:code;&search=&mvta:global:search;&searchoffset=&mvt:pages:offset;&filter_cat=&mvta:global:filter_cat;&PowerSearch_Begin_Only=&mvta:global:PowerSearch_Begin_Only;&sort=&mvta:global:sort;&range_low=&mvta:global:range_low;&range_high=&mvta:global:range_high;&mvt:powersearch:field_url;&customfield1=&mvt:global:customfield1;&customfield2=&mvt:global:customfield2;&customfield3=&mvt:global:customfield3;&attropts1=&mvt:global:attropts1;&filter_cf1=&mvt:global:filter_cf1;&filter_cf2=&mvt:global:filter_cf2;&filter_cf3=&mvt:global:filter_cf1;&filter_ao1=&mvt:global:filter_ao1;&ProductsPerPage=24&searchoffset=&mvt:global:sort;" data-productsperpage="24" class="ProductsPerPage selected" data-selected="selected">24</a></li>
<mvt:else>
<li><a href="&mvt:global:sessionurl;Screen=SRCH&Store_Code=&mvta:store:code;&search=&mvta:global:search;&searchoffset=&mvt:pages:offset;&filter_cat=&mvta:global:filter_cat;&PowerSearch_Begin_Only=&mvta:global:PowerSearch_Begin_Only;&sort=&mvta:global:sort;&range_low=&mvta:global:range_low;&range_high=&mvta:global:range_high;&mvt:powersearch:field_url;&customfield1=&mvt:global:customfield1;&customfield2=&mvt:global:customfield2;&customfield3=&mvt:global:customfield3;&attropts1=&mvt:global:attropts1;&filter_cf1=&mvt:global:filter_cf1;&filter_cf2=&mvt:global:filter_cf2;&filter_cf3=&mvt:global:filter_cf1;&filter_ao1=&mvt:global:filter_ao1;&ProductsPerPage=24&searchoffset=&mvt:global:sort;" data-productsperpage="24" class="ProductsPerPage">24</a></li>
</mvt:if>
/
<mvt:if expr="g.ProductsPerPage EQ 9999">
<li><a href="&mvt:global:sessionurl;Screen=SRCH&Store_Code=&mvta:store:code;&search=&mvta:global:search;&searchoffset=&mvt:pages:offset;&filter_cat=&mvta:global:filter_cat;&PowerSearch_Begin_Only=&mvta:global:PowerSearch_Begin_Only;&sort=&mvta:global:sort;&range_low=&mvta:global:range_low;&range_high=&mvta:global:range_high;&mvt:powersearch:field_url;&customfield1=&mvt:global:customfield1;&customfield2=&mvt:global:customfield2;&customfield3=&mvt:global:customfield3;&attropts1=&mvt:global:attropts1;&filter_cf1=&mvt:global:filter_cf1;&filter_cf2=&mvt:global:filter_cf2;&filter_cf3=&mvt:global:filter_cf1;&filter_ao1=&mvt:global:filter_ao1;&ProductsPerPage=9999&searchoffset=&mvt:global:sort;" data-productsperpage="9999" class="ProductsPerPage selected" data-selected="selected">All</a></li>
<mvt:else>
<li><a href="&mvt:global:sessionurl;Screen=SRCH&Store_Code=&mvta:store:code;&search=&mvta:global:search;&searchoffset=&mvt:pages:offset;&filter_cat=&mvta:global:filter_cat;&PowerSearch_Begin_Only=&mvta:global:PowerSearch_Begin_Only;&sort=&mvta:global:sort;&range_low=&mvta:global:range_low;&range_high=&mvta:global:range_high;&mvt:powersearch:field_url;&customfield1=&mvt:global:customfield1;&customfield2=&mvt:global:customfield2;&customfield3=&mvt:global:customfield3;&attropts1=&mvt:global:attropts1;&filter_cf1=&mvt:global:filter_cf1;&filter_cf2=&mvt:global:filter_cf2;&filter_cf3=&mvt:global:filter_cf1;&filter_ao1=&mvt:global:filter_ao1;&ProductsPerPage=9999&searchoffset=&mvt:global:sort;" data-productsperpage="9999" class="ProductsPerPage">All</a></li>
</mvt:if>
</ul>
</nav>
<div class="column whole medium-half large-one-third sorting large-push-five-twelfths">
<select id="sort-by" name="sort" class="input-medium">
<mvt:if expr="ISNULL g.sort">
<option value="" selected>Sort By</option>
<mvt:else>
<option value="">Sort By</option>
</mvt:if>
<mvt:if expr="g.sort EQ 'name.asc'">
<option value="name.asc" selected>Name A-Z</option>
<mvt:else>
<option value="name.asc">Name A-Z</option>
</mvt:if>
<mvt:if expr="g.sort EQ 'name.desc'">
<option value="name.desc" selected>Name Z-A</option>
<mvt:else>
<option value="name.desc">Name Z-A</option>
</mvt:if>
<mvt:if expr="g.sort EQ 'price.asc'">
<option value="price.asc" selected>Price (lowest first)</option>
<mvt:else>
<option value="price.asc">Price (lowest first)</option>
</mvt:if>
<mvt:if expr="g.sort EQ 'price.desc'">
<option value="price.desc" selected>Price (highest first)</option>
<mvt:else>
<option value="price.desc">Price (highest first)</option>
</mvt:if>
<mvt:if expr="g.sort EQ 'code.asc'">
<option value="code.asc" selected>Code A-Z</option>
<mvt:else>
<option value="code.asc">Code A-Z</option>
</mvt:if>
<mvt:if expr="g.sort EQ 'code.desc'">
<option value="code.desc" selected>Code Z-A</option>
<mvt:else>
<option value="code.desc">Code Z-A</option>
</mvt:if>
</select>
</div>
</div><mvt:if expr="l.settings:psgroup1 OR l.settings:psgroup2 OR l.settings:psgroup3 OR l.settings:psgroup5">
<div id="filters">
<form action="&mvt:global:sessionurl;" method="get" class="clearfix relative">
<div class="bottom-shadow whole column" style="padding-bottom: 15px;margin-bottom: 10px;">
<span id="refine-by" class="black medium-align-right bold uppercase column medium-one-fifth hide medium-show">Filter By</span>
<div class="column medium-one-fifth half show medium-hide"><div id="mobile-refine" class="bg-sky white bold">Filter <span data-icon="L" style="float:right;font-size:17px;"></span></div></div>
<div id="filters-wrap" class="clearfix float-left column medium-four-fifths">
<input type="hidden" name="Screen" value="SRCH" />
<input type="hidden" name="search" value="&mvte:global:search;" />
<input type="hidden" name="filter_cat" value="&mvte:global:filter_cat;" />
<input type="hidden" name="customfield1" value="&mvte:global:customfield1;" />
<input type="hidden" name="customfield2" value="&mvte:global:customfield2;" />
<input type="hidden" name="customfield3" value="&mvte:global:customfield3;" />
<input type="hidden" name="attropts1" value="&mvte:global:attropts1;">
<input type="hidden" name="Store_Code" value="&mvte:store:code;" />
<input type="hidden" name="range_low" value="&mvte:global:range_low;" />
<input type="hidden" name="range_high" value="&mvte:global:range_high;" />
<input type="hidden" name="searchcatcount" value="&mvte:global:searchcatcount;" />
<!-- START Design -->
<mvt:if expr="l.settings:psgroup1">
<div class="column medium-one-fourth whole">
<select name="filter_cf1" class="input-medium">
<mvt:if expr="g.filter_cf1">
<option value="">Show all Designs</option>
<mvt:else>
<option value="">Select Design</option>
</mvt:if>
<mvt:foreach iterator="group1" array="psgroup1">
<mvt:if expr="l.settings:group1:count GT 0">
<mvt:if expr="l.settings:group1:name EQ g.filter_cf1">
<option value="&mvte:group1:name;" selected>&mvt:group1:name; (&mvt:group1:count;)</option>
<mvt:else>
<option value="&mvte:group1:name;">&mvt:group1:name; (&mvt:group1:count;)</option>
</mvt:if>
</mvt:if>
</mvt:foreach>
</select>
</div>
</mvt:if>
<!-- END Design -->
<!-- START Size -->
<mvt:if expr="l.settings:psgroup5">
<div class="column medium-one-fourth whole">
<select name="filter_ao1" class="input-medium">
<mvt:if expr="g.filter_ao1">
<option value="">Show all Sizes</option>
<mvt:else>
<option value="">Select Size</option>
</mvt:if>
<mvt:foreach iterator="group5" array="psgroup5">
<mvt:if expr="l.settings:group5:count GT 0">
<mvt:if expr="l.settings:group5:name EQ g.filter_ao1">
<option value="&mvte:group5:name;" selected>&mvt:group5:name; (&mvt:group5:count;)</option>
<mvt:else>
<option value="&mvte:group5:name;">&mvt:group5:name; (&mvt:group5:count;)</option>
</mvt:if>
</mvt:if>
</mvt:foreach>
</select>
</div>
</mvt:if>
<!-- END Size -->
<!-- START Type -->
<mvt:if expr="l.settings:psgroup2">
<div class="column medium-one-fourth whole">
<select name="filter_cf2" class="input-medium">
<mvt:if expr="g.filter_cf2">
<option value="">Show all Types</option>
<mvt:else>
<option value="">Select Type</option>
</mvt:if>
<mvt:foreach iterator="group2" array="psgroup2">
<mvt:if expr="l.settings:group2:count GT 0">
<mvt:if expr="l.settings:group2:name EQ g.filter_cf2">
<option value="&mvte:group2:name;" selected>&mvt:group2:name; (&mvt:group2:count;)</option>
<mvt:else>
<option value="&mvte:group2:name;">&mvt:group2:name; (&mvt:group2:count;)</option>
</mvt:if>
</mvt:if>
</mvt:foreach>
</select>
</div>
</mvt:if>
<!-- END Type -->
<!-- START Finish -->
<mvt:if expr="l.settings:psgroup3">
<div class="column medium-one-fourth whole">
<select name="filter_cf3" class="input-medium">
<mvt:if expr="g.filter_cf3">
<option value="">Show all Finishes</option>
<mvt:else>
<option value="">Select Finish</option>
</mvt:if>
<mvt:foreach iterator="group3" array="psgroup3">
<mvt:if expr="l.settings:group3:count GT 0">
<mvt:if expr="l.settings:group3:name EQ g.filter_cf3">
<option value="&mvte:group3:name;" selected>&mvt:group3:name; (&mvt:group3:count;)</option>
<mvt:else>
<option value="&mvte:group3:name;">&mvt:group3:name; (&mvt:group3:count;)</option>
</mvt:if>
</mvt:if>
</mvt:foreach>
</select>
</div>
</mvt:if>
<!-- END Finish -->
<!-- END POWER SEARCH -->
</div>
</div>
<mvt:item name="powrsrch" param="fields" />
</form>
</div>
</mvt:if>Add this to the body tag in CTGY
data-catid="&mvt:category:id;"