https://atlant3d.com/wp-content/themes/hub/liquid/vendors/woocommerce/js/liquid_filter_ajax.js

1; ( function ( $ ) {
2
3	let options = wcLiquid.options || {},
4		currentPage = wcLiquid.paged || 1,
5		loaderHtml = '<span class="row-bg-loader"></span>',
6		ajaxFilter = options.wcAjaxFilter || 'off',
7		ajaxPagination = options.wcAjaxPagination || 'off',
8		paginationType = options.wcAjaxPaginationType || 'classic',
9		paginationButtonText = options.wcAjaxPaginationButtonText || 'Load more products',
10		whatClicked = 'filter', //filter or pagination
11		scrollTracking = true;
12
13	$( document ).ready( ready );
14
15	function ready() {
16
17		let priceFilterWidget = $( '.widget_price_filter' ),
18			productCategoriesWidget = $( '.widget_product_categories, .wc-block-product-categories' ),
19			layeredNavWidget = $( '.widget_layered_nav' ).not( '[class*=yith-woo-ajax-]' ),
20			wcNoticesWrapper = $( '.woocommerce-notices-wrapper' ),
21			ldShopTopbar = $( '.ld-shop-topbar' ),
22			ulProducts = $( 'ul.products' ),
23			wcPagination = $( '.woocommerce-pagination' ),
24			$wcAjaxBtn = null;
25
26		$( 'span.count' ).each( function () {
27			$( this ).text( $( this ).text().replace( /[()]/g, '' ) );
28		} );
29
30		//Enable AJAX pagination
31		if ( isOn( ajaxPagination ) && ulProducts.length && wcPagination.length ) {
32			ajaxPaginationInit();
33		}
34
35		//Enable AJAX filter
36		if ( isOn( ajaxFilter ) && ulProducts.length ) {
37			ajaxFilterInit();
38		}
39
40		let urlParams = new URLSearchParams( window.location.search );
41
42		if (
43			( urlParams.get( 'min_price' ) || urlParams.get( 'max_price' ) || ~window.location.search.indexOf( 'filter_' ) ) &&
44			( isOn( ajaxFilter ) || isOn( ajaxPagination ) )
45		) {
46			updateProducts();
47		}
48
49		//Update all products by filters
50		function updateProducts() {
51
52			let filters = {},
53				url = new URL( location.href ),
54				selectOrderBy = $( 'select.orderby' ),
55				orderBy = selectOrderBy.val() || 'menu_order',
56				s = urlParams.get( 's' ) || '',
57				chosenFilters = [];
58
59			//if price filter enabled, add price to filter
60			if ( priceFilterWidget.length ) {
61
62				let minPrice = priceFilterWidget.find( '#min_price' ),
63					maxPrice = priceFilterWidget.find( '#max_price' );
64
65				if ( parseInt( minPrice.val() ) !== parseInt( minPrice.data( 'min' ) ) ||
66					parseInt( maxPrice.val() ) !== parseInt( maxPrice.data( 'max' ) ) ) {
67					filters[ 'min_price' ] = parseInt( minPrice.val() );
68					filters[ 'max_price' ] = parseInt( maxPrice.val() );
69				}
70
71			}
72
73			//Add some attributes to filter
74			if ( layeredNavWidget.length ) {
75				$.each( layeredNavWidget.find( '.chosen .count' ), function ( key, chosen ) {
76					let value = filters[ $( chosen ).data( 'filter' ) ] ? filters[ $( chosen ).data( 'filter' ) ] + ',' : '';
77					filters[ $( chosen ).data( 'filter' ) ] = value + $( chosen ).data( 'slug' );
78				} );
79			}
80
81			//Add GET variable to Href
82			$.each( filters, function ( filterKey, filterValue ) {
83				url.searchParams.set( filterKey, filterValue );
84			} );
85
86			url.searchParams.set( 'orderby', orderBy );
87
88			if ( whatClicked === 'filter' ) {
89				url.pathname = url.pathname.replace( 'page/' + currentPage, '' );
90				currentPage = 1;
91			}
92
93			if ( whatClicked === 'pagination' ) {
94				let currentPagination = $( 'span.page-numbers.current' ),
95					oldPage = currentPagination.length ? parseInt( currentPagination.text() ) : 1;
96
97				url.pathname = url.pathname.replace( 'page/' + oldPage, '' ) + 'page/' + currentPage;
98			}
99
100
101			//Add some categiry to filter
102			if ( productCategoriesWidget.length && $( '.woocommerce .widget_product_categories li.chosen a input' ).length ) {
103				const chosenCats = $( '.woocommerce .widget_product_categories li.chosen' ).get();
104				const catsIds = chosenCats.map( cat => cat.querySelector( 'input' ).getAttribute( 'data-term-id' ) );
105				filters[ 'term_id' ] = catsIds;
106			} else if ( wcLiquid.termId ) {
107				filters[ 'term_id' ] = wcLiquid.termId;
108			}
109
110			//Ajax request
111			$.ajax( {
112				type: "post",
113				url: wcLiquid.ajaxUrl,
114				data: {
115					action: "liquid_wc_filter_ajax",
116					filters: filters,
117					page: currentPage,
118					orderby: orderBy,
119					s: s,
120				},
121				beforeSend: function () {
122					if ( 'classic' === paginationType || whatClicked === 'filter' ) {
123						ulProducts.addClass( 'items-loading' ).append( loaderHtml );
124					}
125
126					if ( whatClicked === 'pagination' && 'scroll' === paginationType ) {
127						$wcAjaxBtn.addClass( 'lqd-ajax-btn-loading' );
128					}
129
130					if ( whatClicked === 'pagination' && 'button' === paginationType ) {
131						$wcAjaxBtn.addClass( 'lqd-ajax-btn-loading' );
132					}
133				},
134				success: function ( response ) {
135
136					if ( response.success === true ) {
137
138						let wcNoticesWrapperHtml = $( response.data.html ).find( '.woocommerce-notices-wrapper' ).html() || '',
139							ldShopTopbarHtml = $( response.data.html ).find( '.ld-shop-topbar' ).html() || '',
140							ulProductsHtml = $( response.data.html ).find( 'ul.products' ).html() || '',
141							wcPaginationHtml = $( response.data.html ).find( '.woocommerce-pagination' ).html() || '';
142
143						//Update HTML
144						if ( 'classic' === paginationType || 'filter' === whatClicked ) {
145
146							wcNoticesWrapper.html( wcNoticesWrapperHtml );
147							// ldShopTopbar.html(ldShopTopbarHtml);
148
149							ulProducts.removeClass( 'items-loading' ).html( ulProductsHtml );
150							wcPagination.html( wcPaginationHtml );
151
152							//Init for woocommerce ordering select
153							$( '.woocommerce-ordering' ).on( 'change', 'select.orderby', function () {
154								$( this ).closest( 'form' ).submit();
155							} );
156
157							$( 'form' ).liquidFormInputs();
158
159							$( 'html, body' ).animate( {
160								scrollTop: ( ulProducts?.offset()?.top || 0 ) - $( '.main-header[data-sticky-header]' ).outerHeight() - 130
161							} )
162
163						}
164
165						if ( 'pagination' === whatClicked && ( 'button' === paginationType || 'scroll' === paginationType ) ) {
166							ulProducts.removeClass( 'items-loading' ).html( ulProducts.html() + ulProductsHtml );
167							wcPagination.removeClass( 'lqd-ajax-btn-loading' );
168							wcPagination.html( wcPaginationHtml );
169						}
170
171						//change URL
172						if ( history.pushState ) {
173							history.pushState( { path: url.href }, '', decodeURIComponent( url.href ) );
174						}
175
176						updatePaginationLinks();
177
178						if ( 'button' === paginationType ) {
179							changeClassicPaginationToButton();
180						}
181
182						if ( 'scroll' === paginationType ) {
183							scrollTracking = true;
184							changeClassicPaginationToScroll();
185						}
186
187						//Remove loader
188						$( '.row-bg-loader' ).remove();
189
190					}
191
192				}
193
194			} );
195
196		}
197
198		function updatePaginationLinks() {
199			$( 'a.page-numbers' ).each( function () {
200				let pathName = location.pathname.replace( '/page/' + currentPage, '' ) + $( this ).attr( 'href' );
201				$( this ).attr( 'href', location.origin + pathName + location.search );
202			} );
203		}
204
205		function changeClassicPaginationToButton() {
206
207			$( '.next.page-numbers', wcPagination )
208				.html( `<span>${ paginationButtonText }</span>` )
209				.parent().addClass( 'wc-pagination-button' );
210
211			$wcAjaxBtn = $( '.wc-pagination-button a', wcPagination );
212
213			wcPagination
214				.addClass( 'wc-pagination-type-button' )
215				.find( 'li:not(.wc-pagination-button)' ).hide();
216		}
217
218		function changeClassicPaginationToScroll() {
219
220			wcPagination
221				.addClass( 'wc-pagination-type-scroll' )
222				.find( 'li' ).hide();
223		}
224
225		function ajaxPaginationInit() {
226
227			if ( 'scroll' === paginationType ) {
228
229				$( window ).on( 'scroll', function () {
230					let scrollHeight = $( this ).scrollTop() + window.innerHeight,
231						ulProductsBottom = ulProducts.offset().top + ulProducts.height();
232
233					if ( scrollTracking && scrollHeight >= ulProductsBottom ) {
234						scrollTracking = false;

235						$( '.next.page-numbers' ).trigger( 'click' );
236					}
237				} );
238
239				changeClassicPaginationToScroll();
240			}
241
242			if ( 'button' === paginationType ) {
243				changeClassicPaginationToButton();
244			}
245
246			$( document ).on( 'click', 'a.page-numbers', function ( e ) {
247				e.preventDefault();
248
249				let currentPagination = $( 'span.page-numbers.current' );
250
251				currentPage = currentPagination.length ? parseInt( currentPagination.text() ) : 1
252
253				if ( $( this ).hasClass( 'next' ) ) {
254					currentPage++;
255				}
256
257				if ( $( this ).hasClass( 'prev' ) ) {
258					currentPage--;
259				}
260
261				if ( $.isNumeric( $( this ).text() ) ) {
262					currentPage = parseInt( $( this ).text() );
263				}
264
265				whatClicked = 'pagination';
266
267				updateProducts();
268			} );
269		}
270
271		function ajaxFilterInit() {
272			//Price filter submit
273			if ( priceFilterWidget.length ) {
274
275				priceFilterWidget.find( 'form' ).on( 'submit', function ( e ) {
276					e.preventDefault();
277					whatClicked = 'filter';
278					updateProducts();
279				} );
280
281			}
282
283			//Change orderby select
284			$( document ).on( 'submit', 'form.woocommerce-ordering', function ( e ) {
285				e.preventDefault();
286				whatClicked = 'filter';
287				updateProducts();
288			} );
289
290			//Categories click
291			if ( productCategoriesWidget.length ) {
292
293				productCategoriesWidget.find( 'a' ).on( 'click', function ( e ) {
294					e.preventDefault();
295					$( this ).parent().toggleClass( 'chosen' );
296					whatClicked = 'filter';
297					updateProducts();
298				} );
299
300			}
301
302			//Attributes filter click
303			if ( layeredNavWidget.length ) {
304
305				layeredNavWidget.find( 'a' ).on( 'click', function ( e ) {
306					e.preventDefault();
307					$( 'a[href="' + $( this ).attr( 'href' ) + '"]' ).parent().toggleClass( 'woocommerce-widget-layered-nav-list__item--chosen chosen' );
308					whatClicked = 'filter';
309					updateProducts();
310				} );
311
312			}
313		}
314
315	}
316
317	function isOn( option ) {
318		return option === 'on';
319	}
320
321} )( jQuery );