Non-cacheable components/elements in AMP

(@flixwatchsupport)

Thanks for the code Milind. I will use and update you.

I don’t know how you are fetching/updating data with Netflix DB

This is coming from the database – get_terms.

Thread Starter

(@flixwatchsupport)

Hi Milind,

I used the amp-list with amp-state option first (since it looked easier), it’s displaying correctly. Unfortunately, the json data on page is also getting cached, so it won’t work. I will try the second option now.

Regards

Plugin Support

(@milindmore22)

Hello FlixWatch

If countries are terms updating post terms should clear post cache, if not check your cache plugin to see they provide a hook/function to clear post cache on update.

Using REST API endpoint is also a good option ensuring updated content is served on AMP cache.

I will keep this topic open just in case you need further assistance.

Thread Starter

(@flixwatchsupport)

Hi Milind,

I am closing this for now because it will take me some time to implement the REST API solution.

I will update once it’s done.

Thanks for the help.

Regards

Thread Starter

(@flixwatchsupport)

Hi Milind,

I was trying an alternative to REST API custom endpoints by using the GET function:

<amp-list
  width="auto"
  height="100"
  layout="fixed-height"
  src="https://www.flixwatch.co/stagin/region-data/?post_id=<?php echo $post->ID; ?>"
>
  <template type="amp-mustache">
    <div>{{.}}</div>
  </template>
</amp-list>

<amp-script id="dataFunctions" script="local-script" nodom></amp-script>
<script id="local-script" type="text/plain" target="amp-script">
  function getRemoteData() {
    return fetch('https://www.flixwatch.co/stagin/region-data/?post_id=<?php echo $post->ID; ?>')
      .then(resp => resp.json())
      .then(transformData)
  }
  exportFunction('getRemoteData', getRemoteData);
</script>
  <amp-list
  id="amp-list"
  width="auto"
  height="100"
  layout="fixed-height"
  src="amp-script:dataFunctions.getRemoteData"
>
  <template type="amp-mustache">
    <div>{{.}}</div>
  </template>
</amp-list>

https://www.flixwatch.co/stagin/movies/jungle-beat-the-movie/
https://www.flixwatch.co/stagin/region-data/?post_id=72384 (If you check this link, it’s generating the JSON array) but it’s not getting displayed.

Thread Starter

(@flixwatchsupport)

The script I am using to send the data:

<?php
$post_id = $_GET['post_id'];
function get_region($post_id){
    $region_list = get_the_terms($post_id, 'region');
    if ($region_list != FALSE) :
        $region_array = [];
	    $x = 0;
	    foreach($region_list as $term_single) :
	      $region_array[$x][0] = $term_single->name;
	      $region_array[$x][1] = $term_single->slug;
	       
            $x++; 
	    endforeach;
	 else :
	    $region_array = ["Not Streaming"]; 

    endif;
    echo wp_json_encode($region_array);
    return (wp_json_encode($region_array));
}
if(($post_id)){
    get_region($post_id);
} 

?>

Plugin Support

(@milindmore22)

Hello @flixwatchsupport

Can you please try this approach instead of using amp-script

the php code



$post_id = filter_input( INPUT_GET, 'post_id', FILTER_SANITIZE_NUMBER_INT );

/**
 * Get Regions
 *
 * @param int $post_id
 * @return json
 */
function get_region( $post_id ) {

	$region_list = get_the_terms( $post_id, 'region' );

	if ( ! empty( $region_list ) && ! is_wp_error( $region_list ) ) :
		$region_array = array();
		$x            = 0;
		foreach ( $region_list as $term_single ) :
			$region_array[ $x ]['title'] = $term_single->name;
			$region_array[ $x ]['url']   = get_term_link( $term_single->slug, 'region' );
			$x++;
		endforeach;
	else :
		$region_array['items'] = array( 'Not Streaming' );

	endif;
	return wp_json_encode( array( 'items' => $region_array ) );
}

if ( ! empty( $post_id ) ) {
	get_region( $post_id );
}

the amp list on the frontend will be something like this

<amp-list
  width="auto"
  height="100"
  layout="fixed-height"
  src="https://www.flixwatch.co/stagin/region-data/?post_id=<?php echo $post->ID; ?>"
>
  <template type="amp-mustache">
    <div class="url-entry">
      <a href="{{url}}">{{title}}</a>
    </div>
  </template>
</amp-list>

Hope this help!

Thread Starter

(@flixwatchsupport)

Hi Milind,

Thanks for the code. I have added the same in the template but it’s not visible on the frontend.
https://www.flixwatch.co/stagin/movies/and-tomorrow-the-entire-world-und-morgen-die-ganze-welt/
https://www.flixwatch.co/stagin/region-data/?post_id=72360

<?php
$post_id = filter_input( INPUT_GET, 'post_id', FILTER_SANITIZE_NUMBER_INT );

/**
 * Get Regions
 *
 * @param int $post_id
 * @return json
 */
function get_region( $post_id ) {

	$region_list = get_the_terms( $post_id, 'region' );

	if ( ! empty( $region_list ) && ! is_wp_error( $region_list ) ) :
		$region_array = array();
		$x            = 0;
		foreach ( $region_list as $term_single ) :
			$region_array[ $x ]['title'] = $term_single->name;
			$region_array[ $x ]['url']   = get_term_link( $term_single->slug, 'region' );
			$x++;
		endforeach;
	else :
		$region_array['items'] = array( 'Not Streaming' );

	endif;
	var_dump(wp_json_encode( array( 'items' => $region_array ) ));
	return wp_json_encode( array( 'items' => $region_array ) );
}

if ( ! empty( $post_id ) ) {
	get_region( $post_id );
}

?>

<amp-list
  width="auto"
  height="100"
  layout="fixed-height"
  src="https://www.flixwatch.co/stagin/region-data/?post_id=<?php echo $post->ID; ?>"
>
  <template type="amp-mustache">
    <div class="url-entry">
      <a href="{{url}}">{{title}}</a>
    </div>
  </template>
</amp-list>

Plugin Support

(@milindmore22)

Hello @flixwatchsupport

Instead of var_dump can you please echo the result.

var_dump(wp_json_encode( array( 'items' => $region_array ) ));

echo wp_json_encode( array( 'items' => $region_array ) );

Plugin Support

(@milindmore22)