Hi,
I try to create CPT archive with ACF ajax filter with this link : https://www.advancedcustomfields.com/resources/creating-wp-archive-custom-field-filter/
When I select a filter, a page opens with this message “array(2) { [0]=> string(10) “alcool1” [1]=> string(7) “alcool2″ }”
And this in my console :
(index):226 GET https://mywebsite.fr/cocktails?alcool=alcool1,alcool2&caracteristiques=caracteristiques 500
(anonymous) @ (index):226
Navigated to https://mywebsite.fr/cocktails?alcool=alcool1,alcool2&caracteristiques=caracteristiques
My code :
functions.php
// array of filters (field key => field name)
$GLOBALS['my_query_filters'] = array(
//'field_1' => 'city',
//'field_2' => 'bedrooms'
'alcool' => 'alcool',
'caracteristiques' => 'caracteristiques'
);
// action
add_action('pre_get_posts', 'my_pre_get_posts', 10, 1);
function my_pre_get_posts( $query ) {
// bail early if is in admin
if( is_admin() ) return;
// bail early if not main query
// - allows custom code / plugins to continue working
if( !$query->is_main_query() ) return;
// get meta query
$meta_query = $query->get('meta_query');
// loop over filters
foreach( $GLOBALS['my_query_filters'] as $key => $name ) {
// continue if not found in url
if( empty($_GET[ $name ]) ) {
continue;
}
// get the value for this filter
// eg: http://www.website.com/events?city=melbourne,sydney
$value = explode(',', $_GET[ $name ]);
var_dump($value);
// append meta query
$meta_query[] = array(
'key' => $name,
'value' => $value,
'compare' => 'LIKE',
);
}
// update meta query
$query->set('meta_query', $meta_query);
}
archive-mycpt.php
<div id="archive-filters">
<?php foreach( $GLOBALS['my_query_filters'] as $key => $name ):
// get the field's settings without attempting to load a value
$field = get_field_object($key, false, false);
// set value if available
if( isset($_GET[ $name ]) ) {
$field['value'] = explode(',', $_GET[ $name ]);
}
// create filter
?>
<div class="filter" data-filter="<?php echo $name; ?>">
<?php create_field( $field ); ?>
</div>
<?php endforeach; ?>
</div>
<script type="text/javascript">
(function($) {
// change
$('#archive-filters').on('change', 'input[type="checkbox"]', function(){
console.log('ok');
// vars
var url = '<?php echo home_url('cocktails'); ?>';
args = {};
// loop over filters
$('#archive-filters .filter').each(function(){
// vars
var filter = $(this).data('filter'),
vals = [];
// find checked inputs
$(this).find('input:checked').each(function(){
vals.push( $(this).val() );
});
// append to args
args[ filter ] = vals.join(',');
});
// update url
url += '?';
// loop over args
$.each(args, function( name, value ){
url += name + '=' + value + '&';
});
// remove last &
url = url.slice(0, -1);
// reload page
window.location.replace( url );
});
})(jQuery);
</script>
Thank you !
