Looper Discussion

[alexander]

This is a huge part of the Layout Builder update and what powers the Archive Mode. We don’t have videos or docs yet, so I wanted to provide a rough outline of how it works so you can start building things with the archive builder beta. For the sake of the notes below, Layout Elements are: Section, Row, Column, Grid, Cell, and Div

Overview

• A Looper Consumer is an element that begins consuming data from a provider.
  • From the Customize tab of a Layout Element, turn on the Looper Consumer setting. Assuming you’re in the archive mode, your element will “consume” the next post from the WP query.
  • Any child elements that use Dynamic Content will be referencing that post.
  • A Looper Consumer can have Items set to One, Many, or All.
    • One simply consumes the data.
    • Many/All allow you to consume the data and cause the element to repeat.
  • Using different combinations of single and repeating elements will allow you to create post loops where some posts are styled differently or output completely different content. For example:
    • You could make a Row consume data once and use an entire column layout to feature your most recent post.
    • Then you could add another Row and make the first Column consume data and repeat All to output the rest of the query items in a standardized format.
• A Looper Provider is a data source that elements can consume to begin a new context for Dynamic Content.
  • If you’re in the archive mode of the Layout Builder, the main WordPress query is your top level Looper Provider. If you begin consuming data, you’ll be pulling elements off that list
  • You can enable a new Looper Provider on any Layout Element.
    • Using one of the included provider types, you can create a new data context. If you’re already inside a Provider, the one above will be paused until this element finishes rendering.
    • We have no limit on query nesting, but it isn’t a great practice to have too many nested queries because you’re polling the database so many times.

I know this isn’t super descriptive/detailed but hopefully it’s enough to get you started. Try out some of the archive and WooCommerce starter templates to get a better idea of how it works.

Improvements

• Yes, we will be adding a way to filter the Query Builder by taxonomies
• We have a hook based looper provider working, where you can use a custom WordPress hook to supply data but it’s disabled at the moment because I’m not happy with how it could let people potentially trigger hooks in WordPress core or other plugins. Once we lock that down it could be a very interesting technique because you could even develop a way to source content remotely via APIs and pipe it into your designs.
• It might not be in this release, but we do plan to add a Looper Provider type to support ACF repeater fields (even nested repeaters).

Let us know if you have any questions or feedback on the feature!

[Maratopia_Digital]

Hey @alexander,

It took me a while to understand what you meant by the looper feature but once I got to work with it, it made loads more sense and it will be such a powerful feature to have.

I’m having a slight issue here where it’s not displaying the looper elements on the frontend. I may very well be doing this wrong and misunderstood this feature completely but here are some screenshots of what’s going on.

On this screenshot, I have the row selected as the Looper Provider as I want any child of this row to have information of the most recent posts.

Here, I have the column set as Looper Consumer.

Here is the frontend not showing any of the loopers elements.

I know I have that column in the middle that is not a looper consumer but even if all the columns are the looper consumer it still isn’t showing on the frontend.

Also, really liked how you guys made the color on hover of the rows and columns different when they are looper elements, very nice UI touch!

Jonathan

[alexander]

Hi Jonathan,

Thanks for reaching out. Looks like it’s not working properly in the Content builder and Global Blocks. Will confirm here once we get that sorted out.

Update: Looper not working in the content builder is fixed be corrected for the next patch (Beta 7) which we will release after a few more things are tightened up.

[cgMultimedia]

I’ve tried using it in the Layout Builder with a custom post type and it doesn’t seem to be working either… not in the back-end or the front-end. I think I set it up correctly…

[alexander]

@cgMultimedia, if you want I can take a look at your site. Just open a new thread with login credentials.

[RubberDuckers]

What’s the best practice way of showing a ‘loop’ of 3 custom post types (or any post type) on a page that’s not an archive?
Archive in the layout builder where you tell it which archive is for is straight forward and works a treat.
But if you want say your latest 3 blog posts on the home page, or an a ‘mini archive’ of a set number of items on a page - how do you assign the source outside of the an archive?
I see in the ‘looper provider’ you can set a source and amount, but nothing seems to show in the columns like on the archive page. Not sure where I’m missing something!

[alexander]

Sure! You can pretty much break it out however you want. Dragging in one of the “Posts” elements might give you an idea, but here’s a rough overview that might help with your example:

• Add a new Section and enable the Looper Provider. Use Recent Posts or set to Query Builder and configure to pull your custom post type. Now you have some posts to work with. Set the Count to the max number of posts you want to query from the database.
• On any element (usually a Column/Cell) inside that Section, enable the Looper Consumer. When this is turned on, any elements inside that parent will have Dynamic Content available and scoped to the current post in the loop. Just drag in “The Title” to get the current post title for example.
• By adjusting the count on the Looper Consumer to One you can gain full control over every post in the loop. Instead of repeating, you need to add more columns, but each one will be fully styleable.

hopefully that helps!

[alexander]

Hey everyone, with the release candidate being imminent we have pushed the new documentation live. Here’s some helpful article on this subject:

• https://theme.co/docs/dynamic-content-and-loopers
• https://theme.co/docs/posts

[Misho]

@alexander, I am pretty sure it is possible to build our own “Related Products” using the Looper, but I am having difficulties figuring it out.

The Idea is to build a loop on the Single product page, that basically examines the Primary category of the current product, and displays other products from the same category. My hunch is that this should be a Query string paired with some Dynamic Custom key.

It seems to me that the easiest way to do this would be if you had Current primary category listed as an option among the taxonomies inside the Query builder.

Thanks!

[alexander]

@Misho

I am pretty sure it is possible to build our own “Related Products” using the Looper, but I am having difficulties figuring it out.

Unfortunately it isn’t accessible like that right now. We’d need a way to dynamically populate a category from the current query, and there’s no way to access Dynamic Content in the Query Builder controls. And it wouldn’t be a this fully WooCommerce compatible loop (running their additional loop management calls) without a new Looper Provider type.

[alexander]

Hey everyone! I wanted to share two interesting techniques that we discovered ourselves after the release that will give you more milage from Loopers. Both take a little PHP coding

1. Query String like a boss.

Write out any query in PHP like:

$tax_query[] = array(
    'taxonomy' => 'product_visibility',
    'field'    => 'name',
    'terms'    => 'featured',
    'operator' => 'IN',
);

$query = array(
    'post_type'           => 'product',
    'post_status'         => 'publish',
    'ignore_sticky_posts' => 1,
    'posts_per_page'      => 2,
    'orderby'             => 'rand',
    'order'               => 'asc',
    'tax_query'           => $tax_query
);

Then output somehow:

var_dump( http_build_query( $query ) );

You should get this ugly thing, but it’s a WordPress valid query string.

post_type=product&post_status=publish&ignore_sticky_posts=1&posts_per_page=4&orderby=rand&order=asc&tax_query%5B0%5D%5Btaxonomy%5D=product_visibility&tax_query%5B0%5D%5Bfield%5D=name&tax_query%5B0%5D%5Bterms%5D=featured&tax_query%5B0%5D%5Boperator%5D=IN

This is very handy when you don’t want to need extra PHP that is part of a child theme. You’ll just need PHP running somewhere to do the preparation. Here’s the support thread where we first tried this out for some additional context: Looper Query String: Featured Products

2. Use a Custom Looper

In a recent update we allowed the custom looper to manage WP_Post objects. This is more technical, but you could in theory do something like this:

add_filter( 'cs_looper_custom_my_query', function( $result, $args, $element ) { 
  return get_posts( $args );
}, 10, 3);

With that code in place, set your Looper Provider to Custom and the “hook” field to: my_query. Then in the Params editor you can build out any kind of WordPress query you want:

{
  "offset": 1
}

This could be a useful way to do things beyond what’s possible with the Query Builder. Here’s another write up I did a few days ago with some custom looper examples: 4.1 release and ACF field element conditions

[Maratopia_Digital]

Hey @alexander,

I know this is an old thread and it’s a little off topic so I do apologise, but I’m getting slightly frustrated with the Support Team and the mixed messages they are giving in regards to the Related Products query builder.

@alexander

We’d need a way to dynamically populate a category from the current query, and there’s no way to access Dynamic Content in the Query Builder controls.

You have very explicitly said that it is not possible to have Dynamic content on query string/builders but when it comes to the support team they have mentioned multiple times that it is doable and even other users have been able to as well.

I have followed step by step the instructions from the support team and some pro users that managed to get this to work but I had no luck whatsoever.

Here is one thread that people managed to get it to work but I’ve had no luck with it:

Looper for related products

Hi there, I’ve been trawling through lots of posts to find a solution for my problem, but can’t see one that’s relevant. I have developed a layout for a woocommerce product. In this I would like to use a looper and output my own styled Related Products. I have set up a provider on a row using this query string. category_name={{dc:term:name}}&post_type=product&posts_per_page=3&offset=0&ignore_sticky_posts=1&post__not_in%5B0%5D={{dc:post:id}} This should provide 3 related products, excluding th…

The related product looper is such a commonly asked feature on the Facebook group and the support team, would you know when we would be able to get this feature in? Maybe even a quick cheeky PHP custom hook magic?

Cheers,
Jonathan

[alexander]

Hi Jonathan,

No problem, happy to provide an update here.

You have very explicitly said that it is not possible to have Dynamic content on query string/builders but when it comes to the support team they have mentioned multiple times that it is doable and even other users have been able to as well.

Dynamic Content will run for Query String, but not the more visual Query Builder Looper Provider. This is how people are able to get some of the workarounds working.

Here is one thread that people managed to get it to work but I’ve had no luck with it:

I’ll chime in over there as well.

The related product looper is such a commonly asked feature on the Facebook group and the support team, would you know when we would be able to get this feature in?

I’m sorry, it’s going to be a while before we get back to WooCommerce improvements, including a Related Products looper. This will likely be at the tail end of the Theme Options cycle. Once this cycle is done we’re jumping into Theme Options requirements, but it will likely be months before we start on anything WooCommerce related.

Maybe even a quick cheeky PHP custom hook magic?

At this point, we don’t really want to add changes that aren’t a full solution. I know it’s a bit limited right now but we don’t want to just add things that might be half baked. We’ll be coming back to all these WooCommerce improvements but unfortunately not soon so the workarounds others are using might be the best solution for now.

[Maratopia_Digital]

Hey @alexander,

Really appreciate the detailed explanation where things are with this and even the realistic timeline here.

Looking forward to these new woocommerce improvements!

Cheers,
Jonathan

[alexander]

Thanks for understanding! Now that we’re wrapping up responsive styling, the sequencing of getting through the Theme Options reboot is really starting to come into focus.