Dynamically filter looper content with terms buttons

[lbi_debase]

Hello,

I’m working on a new site which utilizes loopers and ACF Pro to dynamically display content. I’ve gone through several forum threads and have looked at Looper documentation and Themeco’s series of (terrific) looper YouTube vids.

ACF Pro and Loopers are working well on the templates set up so far however on several pages of the site I want visitors to be able to dynamically filter the items displayed in the looper by the Terms element or Buttons on the same page. For example, if the Flying Trapeze terms button is clicked then only the Flying Trapeze class content (in the category ‘flying-trapeze’) will show in the Looper below. I’d prefer to not use Essential Grid and stick with Cornerstone’s builder and looper functions if possible.

Is there any new documentation available that explain how to achieve this? Below is a screenshot of the Looper provider settings used to display the classes info.

Any advice on this topic would be amazing!

Thanks,
Rachel

[tristup]

Hi Rachel,

Thanks for reaching out.
In that case, you need to add the term_id with the Term URL and collect it as a URL parameter using the {{dc:url:param key=}}. And use that in the Query String instead of Query Builder. And for the first time, you can check if the parameter is blank, you can use the callback as the default value.
I would suggest you go through the following thread, which explains the URL param and how it can be used in Query String.

Get content of specific post added through Query String

Hey there, I used Post ID(Numeric) in their links and when I’m hitting that link I’m fetching the Variable from URL to Query String in the Looper on a DIV element. But when I’m trying to fetch the title and Excerpts of that specific (provided ID) post inside that DIV, it is not fetching the required data. Is there anything wrong I’m doing or this isn’t the way Cornerstone is going to fetch the data? Please let me know about it, Thanks. [image] [image]

How to setup provider for data from previous page

Hi Tristup, This is the query string I’m using in the provider: {{dc:woocommerce:product_id}}={{dc:url:param key=“product_id”}} What am I doing wrong here? Thanks, Darren.

Looper | URL Passback | Slug Targeting Problem

It’s fixed via p={{dc:url:param key="course" fallback="course"}} and using a {{dc:post:id}} element, but I do want the slug to power this instead. ?course={{dc:post:meta key="_wp_old_slug"}} paired with name={{dc:url:param key="course" fallback="course"}} doesn’t appear to work, is this the wrong element? – Additionally, when using a URL parameter such as this… does it mean that the Condition for “Looper Provider is empty/not empty” is off the table in terms of design? I’m not seeming to be …

If you are not proficient, I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called TOTAL CARE, where we offer small customizations

Thanks

[lbi_debase]

Thanks for the threads. These have been helpful but I haven’t been able to solve this yet: I’ve got the Term button URL value set as ?{{dc:term:id}} and this successfully changes the page URL but the looper content remains unchanged. The query string used is post_type=class&p={{dc:url:param key=“id”}}. Is there something I’m missing with the query string and param key id?

[lbi_debase]

The URL for this page on the dev site is https://rachelr30.sg-host.com/classes/

[tristup]

Hi Rachel,

In your Query String the p parameter is for the Post where you are sending the term_id which needs to be compared with taxonomy not with the post. You need to use the Tax Query, I would suggest you create the array of arguments of the Query and then just use the http_build_query function to format it into Query String. Please find the following thread which help you create the Query String.

Looper Query String: Featured Products

@bobbybosler, no problem…happy to help. For a little more context on how I got that result, you might find this helpful if you need to create additional complex queries in the future… First, you’ll need a PHP environment to work in. If you’re developing locally, you can just throw any of this in your child theme’s functions.php file to ultimately get some output to work with. Start by writing out a query using the standard WP_Query syntax like so: $tax_query[] = array( 'taxo…

MEC Looper Order

Hello Jen, Your WP Query is not entirely correct. If you follow the detailed explanation of @Kory on this thread (Looper Query String: Featured Products), you should be having something like this: $meta_query[] = array( 'key' => 'mec_start_date', 'value' => date('Ymd'), 'compare' => '>=', ); $tax_query[] = array( 'taxonomy' => 'mec_category', 'terms' => 'take-action', ); $query = array( 'post_type' => 'mec-events', 'tax_query' => $tax_query, 'meta_ke…

Hope it helps.
Thanks

[lbi_debase]

Thanks again for the threads. I’ve got a query string built for the (section) looper provider that’s pulling in the relevant terms for this page. The query syntax is shown below:

$tax_query[] = array(
'taxonomy' => 'category',
'field'    => 'slug',
'terms'    =>  array( 'adult-classes', 'all-abilities', 'beginner-classes', 'flying-trapeze', 'intermediate-classes', 'kindy-classes', 'advanced-classes', 'specialist-classes', 'private-classes' ),
'operator' => 'IN',

);

$query = array(
    'post_type'           => 'class',
    'post_status'         => 'publish',
    'ignore_sticky_posts' => 1,
    'posts_per_page'      => -1,
    'orderby'             => 'title',
    'order'               => 'asc',
    'tax_query'           => $tax_query
);

And http_build_query output the following which I’ve used as the query string for the provider:

post_type=class&post_status=publish&ignore_sticky_posts=1&posts_per_page=-1&orderby=title&order=asc&tax_query%5B0%5D%5Btaxonomy%5D=category&tax_query%5B0%5D%5Bfield%5D=slug&tax_query%5B0%5D%5Bterms%5D%5B0%5D=adult-classes&tax_query%5B0%5D%5Bterms%5D%5B1%5D=all-abilities&tax_query%5B0%5D%5Bterms%5D%5B2%5D=beginner-classes&tax_query%5B0%5D%5Bterms%5D%5B3%5D=flying-trapeze&tax_query%5B0%5D%5Bterms%5D%5B4%5D=intermediate-classes&tax_query%5B0%5D%5Bterms%5D%5B5%5D=kindy-classes&tax_query%5B0%5D%5Bterms%5D%5B6%5D=advanced-classes&tax_query%5B0%5D%5Bterms%5D%5B7%5D=specialist-classes&tax_query%5B0%5D%5Bterms%5D%5B8%5D=private-classes&tax_query%5B0%5D%5Boperator%5D=IN

The term buttons URL is set to ?{{dc:term:slug}}

I realise there should be a dc:url:param key in the string query somehow to get the Looper contents to update to match the page URL change triggered by the terms buttons (e.g. /classes/?kindy-classes should only show content in the Kindy Classes category/term) but I’m not sure where in the string query to place it or how to write the syntax. Should it be p={{dc:url:param key=“tax_query” fallback=""}}?

Would appreciate advice on this.
Thanks

[ruenel]

Hello Rachel,

Please provide us access to your site so that we can check your Looper settings. We would also check out your element structure. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[lbi_debase]

Hello @ruenel,

I’ll attach a secure note below with requested info. Thanks in advance for looking into the issue.

[ruenel]

Hello There,

Your button link should be ?our_class={{dc:term:slug}}.

And then you will have this custom query string: post_type=class&post_status=publish&ignore_sticky_posts=1&posts_per_page=-1&orderby=title&order=asc&tax_query%5B0%5D%5Btaxonomy%5D=category&tax_query%5B0%5D%5Bfield%5D=slug&tax_query%5B0%5D%5Bterms%5D%5B0%5D={{dc:url:param key="our_class" fallback="all"}}&tax_query%5B0%5D%5Boperator%5D=IN

It is recommended that you will have two sets of Loopers. The first looper will display all classes. You can use the Looper Provider Query Builder for this to be able to display all the classes. As for the second loop, that is the time you will use the Looper Provider Query String with the URL Parameter in it.

Please check out the link to the demo I have created in the secure note below.

Best Regards.

[lbi_debase]

Hi @ruenel,

Thank you very much for looking at the site and providing the tutorials, these are extremely helpful for what I’m trying to achieve on this page and other similar pages on the site. I’ll work with the code, looper and layout structure you suggest and will reply back if there’s any further queries.

Many, many thanks!

[tristup]

Hi Rachel,

You are most welcome.