Template Hooks

How to use template hooks in Reactor

Reactor templates have hooks built-in that you can be utilized for adding custom data through the WP-API. As a developer you have an option to customize the app detail templates from your own site.

Watch this video that will show you how to add data from your site.


The detail templates have four template hooks.

These are the places you can add custom content on detail views in your app.

  • above the title
  • below the title
  • above the content
  • below the content

Example function to target the hooks in reactor templates.

function custom_json_api_prepare_post( $post_response, $post, $context ) {
	$post_response['do_api_action']['default']['above_title'] = 'this is above the title';
    	$post_response['do_api_action']['default']['below_title'] = 'this is below the title';
    	$post_response['do_api_action']['default']['above_content'] = 'this is above the content';
    	$post_response['do_api_action']['default']['below_content'] = 'this is below the content';
    	return $post_response;
}
add_filter( 'json_prepare_post', 'custom_json_api_prepare_post', 10, 3 );

You will notice this part of the code ['do_api_action']['default']. The section after ['do_api_action'] is the template name. We have three detail templates currently in Reactor.

  • default
  • card
  • product (woo commerce)

These are the full-page views you choose in the Reactor admin when you are creating pages.

fullpage


Example of how to target each template in the hook above the title

$post_response['do_api_action']['default']['above_title'] = 'this is above the title in detail template';
$post_response['do_api_action']['card']['above_title'] = 'this is above the title in card template';
$post_response['do_api_action']['product']['above_title'] = 'this is above the title in product template';


Example of how to create a custom author box

You've seen author boxes on posts below the content. This is an example of how to create custom markup and add it to a template hook in reactor.

function custom_json_api_prepare_post( $post_response, $post, $context ) {
    $author_id = $post['post_author'];
    $author_info = '
    	<div class="author-info" style="padding:5px; border-top: 1px solid #e3e3e3; overflow: auto;"">
    		<div class="author-avatar" style="float:left; margin: 0 10px 0 0;">
    			' . get_avatar( $author_id, 60 ) . '
    		</div>
    		<div class="author-meta">
    			<h7>' . get_the_author_meta( 'display_name', $author_id ) . '</h7>
    			' . get_the_author_meta( 'description', $author_id ) . '
    		</div>
    	<div>
    ';
    $post_response['do_api_action']['default']['below_content'] = $author_info;
    return $post_response;
}
add_filter( 'json_prepare_post', 'custom_json_api_prepare_post', 10, 3 );

Here's what my author box markup looks like below the content. This is just a basic example but you could get really creative. You can add your own html and css to make it look completely different. Try out some of the Ionic html/css.  http://ionicframework.com/docs/components

author box template hooks


Template Hooks for Page Types

List page type:

$post_response['do_api_action']['list']['above_title']
$post_response['do_api_action']['list']['below_title']
$post_response['do_api_action']['list']['above_excerpt']
$post_response['do_api_action']['list']['below_excerpt']

Card List page type:

$post_response['do_api_action']['cardlist']['above_title']
$post_response['do_api_action']['cardlist']['below_title']
$post_response['do_api_action']['cardlist']['below_date']
$post_response['do_api_action']['cardlist']['above_featured_img']
$post_response['do_api_action']['cardlist']['above_excerpt']
$post_response['do_api_action']['cardlist']['below_excerpt']

Media List page type:

$post_response['do_api_action']['medialist']['above_title']
$post_response['do_api_action']['medialist']['below_title']
$post_response['do_api_action']['medialist']['above_excerpt']
$post_response['do_api_action']['medialist']['below_excerpt']

Woocommerce page type:

$post_response['do_api_action']['productlist']['above_title']
$post_response['do_api_action']['productlist']['below_title']
$post_response['do_api_action']['productlist']['above_excerpt']
$post_response['do_api_action']['productlist']['below_excerpt']

Woocommerce 2 column page type:

$post_response['do_api_action']['productlist2col']['above_title']
$post_response['do_api_action']['productlist2col']['below_title']
$post_response['do_api_action']['productlist2col']['below_price']

Page From Site page type:

$post_response['do_api_action']['pagesite']['above_title']
$post_response['do_api_action']['pagesite']['below_title']
$post_response['do_api_action']['pagesite']['above_content']
$post_response['do_api_action']['pagesite']['below_content']

Card Detail View

$page_response['do_api_action']['card']['above_card']
$page_response['do_api_action']['card']['below_card']
$post_response['do_api_action']['card']['above_title']
$post_response['do_api_action']['card']['below_title']
$post_response['do_api_action']['card']['above_content']
$post_response['do_api_action']['card']['below_content']

Default Detail View

$post_response['do_api_action']['default']['above_title']
$post_response['do_api_action']['default']['below_title']
$post_response['do_api_action']['default']['above_content']
$post_response['do_api_action']['default']['below_content']

Product Detail View

$post_response['do_api_action']['product']['above_title']
$post_response['do_api_action']['product']['below_title']
$post_response['do_api_action']['product']['above_content']
$post_response['do_api_action']['product']['below_content']