Show and Style Dynamic Data from ANY Source with Cwicly

Tips
1

Getting and styling dynamic data is extremely simple in Cwicly. It is especially powerful when used with the Query and Repeater blocks.

Unfortunately (and understandably), this elegance is limited to core WordPress data and ACF. As projects get more complex, we are sometimes required to fetch and show data from remote servers or custom APIs. In those cases, we are forced to render and style the data with plain HTML and CSS.

As others already requested here and here, it would be really awesome and useful if we could show and style ANY data with Cwicly.

But until this is supported natively by Ciwcly, here is a simple trick of achieving that by leveraging Cwicly’s integration with ACF.

This tip will allow you to show and style ANY dynamic data with Cwicly.

The idea is simple:

  • Create an ACF filed group and fields to hold your dynamic data
  • Fetch the data from a remote server, a plugin, or from anywhere you like
  • Store the fetched data in the ACF fields
  • On the desired post/page, get and style the ACF fields with Cwicly blocks

Here is a video demo showing how to do that. In this example, I am fetching the 5th season of Seinfeld from Netflix API and displaying a list of its episodes.

View/Download video

image
image880×762 113 KB

Considerations:
In the video, I created an ACF Options page and linked the ACF field group to it. Depending on the use-case, it might be better to link the ACF field group to a specific page/post, or page/post type. There are many ways to do it, but the idea remains the same.
Also in the video, I’m getting the dynamic data and storing it in ACF fields with a Cwicly Code Block. Depending on the situation, you might want to do that in the background, with cron or as trigger to an event instead of doing it on every page load.

Code block used in the video

<?php
/**
 * This is your API call.
 * This can be an HTTP call to a remote server, 
 * a local API call, or anything else.
 */
$season = get_seinfeld_season_5();

$repeater = array();
foreach ($season->episodes as $episode) {
    array_push($repeater, array(
        'seinfeld_episode_title' => $episode->title,
        'seinfeld_episode_synopsis' => $episode->synopsis,
        'seinfeld_episode_image_url' => $episode->img
    ));
}

// use ACF update_field() function to update the repeater field we created earlier
// (https://www.advancedcustomfields.com/resources/update_field/)
update_field('seinfeld_season_5', $repeater, 'option');
?>
1 Like