I’m updating my site’s pricing section.
Is it possible to pass data to repeatable content? As a simple example, can I pass an array/list to the Top Tabs component? It would be similar to getting posts from the WP Query API.
["tab1", "tab2", "tab3"]
Also, if you have an even more complex component, can you pass something like json:
[{"title": "title1", "description": "description1}, {"title": "title2", "description": "another description"}]
Thanks!
You wouldn’t be able to pass it directly to the repeatable component, but you could use context to achieve what you want. I’ll wire up a little example for you in the next few hours and send it through 
Righto, so I was half way through putting together an example when I realised it’d actually be a super simple change to tie this into the existing repeater functionality. It’s not documented yet, but if you download the latest version you can change the repeater items of a component with a filter. To do so, add a component with repeatable content ( e.g. a tabs component ) and take note of the Node ID:
Then you can add the following to your child theme’s functions.php. Note that I’ve used some shoddy function naming here, I’d recommend a more solid approach in your production code:
function custom_repeater_items($items, $context, $tag) {
// ensure that we're dealing with the correct node
if ( array_key_exists('instanceId', $tag) && $tag['instanceId'] !== 'h_v78-oQaHFVTxsPI5-YO' ) return $items;
// return an array of repeater items.
return [
[
'repeaterId' => 'tab-1',
'componentDetails' =>
[
'tabButton' =>
[
'content' =>
[
'type' => 'value',
'value' => 'Tab 1',
]
],
'tabContent' =>
[
'content' =>
[
'type' => 'value',
'value' => 'Content 1'
]
]
]
],
[
'repeaterId' => 'tab-2',
'componentDetails' =>
[
'tabButton' =>
[
'content' =>
[
'type' => 'value',
'value' => 'Tab 2',
]
],
'tabContent' =>
[
'content' =>
[
'type' => 'value',
'value' => 'Content 2'
]
]
]
]
];
}
add_filter( 'gust_repeater_items', 'custom_repeater_items', 10, 3 );
This is getting into some advanced use cases for Gust, but is exactly what it was created to handle.
Apart from this, the best way would be to set the context on a parent element as filter, set your filter name and return your data in php. E.g:
function my_custom_data() {
return [
[ 'title' => 'title 1', 'content' => 'content 1' ],
[ 'title' => 'title 2', 'content' => 'content 2' ],
]
}
add_filter( 'my_custom_data', 'my_custom_data' );
You can then add a child element and set the context option to “Use Context Loop” which will loop over the above data. Within any children inside that loop, you can set the content type to “filter” and return the data you need:
function custom_data_item_title( $value, $item ) {
return $item['title'];
}
add_filter( 'custom_data_item_title', 'custom_data_item_title' );
That’s very similar to what we do in the blog post tutorial, except we’re using filters instead of functions for the content.
Hopefully that makes sense!
Thanks for writing up an example! The concept makes sense, but I haven’t worked with PHP files or child themes so I need to get smarter on those before I add it to my project.
I’m working on adding the child theme. Can you help me with the approach I need to take to load styles?
This section provides a few options for enqueuing stylesheets, but I’m not sure how the parent theme is set up. I’ve looked through the files in the parent theme but can’t figure out where to look. Thanks!
Give this a go. You shouldn’t need to add any special stylesheets or anything, the parent theme does it for you. If you open the functions.php file I’ve provided an example of adding a custom FAQ tab repeater data. Hopefully that should get you most of the way!
Is it possible to write something like the following in PHP? I don’t get any errors when I save the functions.php file, but the preview page just loads a blank screen.
/**
* Adds repeater items
*/
public $faqs = array(
array(
'id' => 'faq-1',
'button' => 'FAQ One',
'detail' => 'FAQ One detail section'
),
array(
'id' => 'faq-2',
'button' => 'FAQ Two',
'detail' => 'FAQ Two detail section'
)
);
public static function build_tab($tab)
{
return array(
'repeaterId' => $tab['id'],
'componentDetails' => array(
'tabButton' => array(
'content' => array(
'type' => 'value',
'value' => $tab['button'],
)
),
'tabContent' => array(
'content' => array(
'type' => 'value',
'value' => $tab['detail'],
)
),
)
);
}
public static function faq_repeater_items($items, $_context, $tag)
{
// Return default value if it's not the right node
if (
!array_key_exists('instanceId', $tag) ||
$tag['instanceId'] !== 'rG7uDwO-DALMoZlHz9Wg2'
) {
return $items;
}
// Otherwise return some pre-configured FAQs
return array_map('build_tab', $faqs);
}
Yep absolutely. Just a couple of things:
$faqs needs to be available to the method. In this case we don’t have an instantiation of the class as we’re using static methods.
public static $faqs = array(...)
Then you just need to make sure you call the method properly. build_tab isn’t in the global scope, so:
return array_map( array(__class__, 'build_tab'), self::$faqs );
Give that try and see how you go.
Good to go! Thanks so much for all of your help!