Combining multi filter and pagination with url filtering unsecsessful

[macreixa]

Hello, I was able to implement URL filtering based on your tutorial, but when I tried to integrate it with multifiltering and pagination, I was unsuccessful.

I leave here the code that is working ok (without url filtering), can you lead me to a solution, as the instructions I found online were not effective.

<section id="filters" class="filterbox main-grid">
	<form class="controls">
		<div class="control-search">
			<fieldset data-filter-group>
				<input type="text" data-search-attribute="class" placeholder="Search"/>
			</fieldset>
		</div>
		<fieldset data-filter-group class="select-wrapper">
			<select>
				<option value="">Tipos de Massa</option>
				<option value=".massa-acucarada">Massa Açucarada</option>
				<option value=".massa-batida">Massa Batida</option>
				<option value=".massa-brioche">Massa Brioche</option>
				<option value=".massa-choux">Massa Choux</option>
				<option value=".massa-de-restos">Massa de Restos</option>
				<option value=".massa-folhada">Massa Folhada</option>
				<option value=".outras-massas">Outras Massas</option>
			</select>
		</fieldset>
		<fieldset data-filter-group class="select-wrapper">
			<select>
				<option value="">A—Z</option>
				<option value=".a-">A</option>
				<option value=".b-">B</option>
				<option value=".c-">C</option>
				<option value=".d-">D</option>
				<option value=".e-">E</option>
				<option value=".f-">F</option>
				<option value=".g-">G</option>
				<option value=".h-">H</option>
				<option value=".i-">I</option>
				<option value=".j-">J</option>
				<option value=".k-">K</option>
				<option value=".l-">L</option>
				<option value=".m-">M</option>
				<option value=".n-">N</option>
				<option value=".o-">O</option>
				<option value=".p-">P</option>
				<option value=".q-">Q</option>
				<option value=".r-">R</option>
				<option value=".s-">S</option>
				<option value=".t-">T</option>
				<option value=".u-">U</option>
				<option value=".v-">V</option>
				<option value=".w-">W</option>
				<option value=".x-">X</option>
				<option value=".y-">Y</option>
				<option value=".z-">Z</option>
			</select>
		</fieldset>
		<div class="control-group">
			<button type="button" class="control control-sort" data-sort="default:desc">&darr;</button>
			<button type="button" class="control control-sort" data-sort="default:asc">&uarr;</button>
		</div>
		<button type="reset" class="control control-text">&times;</button>
	</form>
</section>
<!-- /FILTER ENCYCLOPEDIA -->

<section class="main-grid list-encyclopedia container">
	(...)
</section>

<script> easydropdown.all(); // MIXIT UP var containerEl = document.querySelector('.container'); var activePage = 1; var activeLimit = 16; var mixer = mixitup(containerEl, { multifilter: { enable: true }, animation: { effects: 'fade translateZ(-100px)', duration: 800 }, load: { page: activePage }, pagination: { limit: activeLimit, hidePageListIfSinglePage: true }, callbacks: { onMixEnd: function(state) { if (state.activePagination.limit === activeLimit && state.activePagination.page === activePage) return; // Pagination state has changed: activePage = state.activePagination.page; activeLimit = state.activePagination.limit; paginationCallback(); } } }); function paginationCallback() { // do something only when pagination state has changed $('html,body').animate({ scrollTop: $('#page').offset().top }, 'default'); }; </script>

thank you