Not Getting meta data in GridPostsLatest about flynt

[timohubois]

@opcodespace where exactly have you defined the fields? At component level? If yes, they should be available directly {{ roastType }}. If this does not help, it would be great if you can share the complete file where you have defined the fields.

[opcodespace]

@timohubois Thanks for your response.
roastType meta is defined in another component that is being used in a single post. I want to display in a posts loop in another component which will be displayed on another page.

{% if posts|length > 0 %}
  <flynt-component name="GridProductsLatest" class="componentSpacing" {{ options.theme ? 'data-theme="' ~ options.theme ~ '"' }}>
    <div class="container" data-flow="layout">
      {% if preContentHtml %}
        <div data-size="medium" data-align="center" data-text-align="center">
          {{ preContentHtml|e('wp_kses_post') }}
        </div>
      {% endif %}
      <ul class="grid" {{ options.maxColumns ? 'data-max-columns="' ~ options.maxColumns ~ '"' }}>
        {% for post in posts %}
          <li class="post boxBorder">
            <a class="link" href="{{ post.link|e('esc_url') }}" aria-label="{{ post.title }}">
              {% if post.thumbnail %}
                <figure class="figure">
                  <img class="post-image figure-image lazyload"
                       src="{{ post.thumbnail.src|resizeDynamic(768, (768 / 3 * 2)|round, 'center') }}"
                       width="{{ 768 }}"
                       height="{{ (768 / 3 * 2)|round }}"
                       srcset="{{ placeholderImage(768, (768 / 3 * 2)|round, 'rgba(125, 125, 125, 0.1)') }}"
                       data-srcset="
            {{ post.thumbnail.src|resizeDynamic(1920, (1920 / 3 * 2)|round, 'center') }} 1920w,
            {{ post.thumbnail.src|resizeDynamic(1600, (1600 / 3 * 2)|round, 'center') }} 1600w,
            {{ post.thumbnail.src|resizeDynamic(1440, (1440 / 3 * 2)|round, 'center') }} 1440w,
            {{ post.thumbnail.src|resizeDynamic(1366, (1366 / 3 * 2)|round, 'center') }} 1366w,
            {{ post.thumbnail.src|resizeDynamic(1024, (1024 / 3 * 2)|round, 'center') }} 1024w,
            {{ post.thumbnail.src|resizeDynamic(768, (768 / 3 * 2)|round, 'center') }} 768w,
            {{ post.thumbnail.src|resizeDynamic(640, (640 / 3 * 2)|round, 'center') }} 640w"
                       data-sizes="auto"
                       alt="{{ post.title }}">
                </figure>
              {% endif %}
              <div class="content boxPadding">
                <p><strong>{{ post.title }}</strong></p>
                <p class="fixed_text">{{ post.excerpt.read_more(false) }}</p>
                <div class="test_select">
                    <div class="test_symbol">
                      <span class="test_icon dark_roast"></span>
                      <span class="test_icon"></span>
                      <span class="test_icon"></span>
                    </div>
                    <div class="test_name">Medium roast</div>
                  </div>
              </div>
              {{ post.meta('roastType') }}
                {% if post.meta('roastType') == 'light' %}
                  <div class="test_select">
                    <div class="test_symbol">
                      <span class="test_icon light_roast"></span>
                      <span class="test_icon"></span>
                      <span class="test_icon"></span>
                    </div>
                    <div class="test_name">{{ post.meta('roastType') }}</div>
                  </div>
                {% endif %}
                {% if post.meta('roastType') == 'medium' %}
                  <div class="test_select">
                    <div class="test_symbol">
                      <span class="test_icon medium_roast"></span>
                      <span class="test_icon"></span>
                      <span class="test_icon"></span>
                    </div>
                    <div class="test_name">{{ post.meta('roastType') }}</div>
                  </div>
                {% endif %}
                {% if post.meta('roastType') == 'dark' %}
                  <div class="test_select">
                    <div class="test_symbol">
                      <span class="test_icon dark_roast"></span>
                      <span class="test_icon"></span>
                      <span class="test_icon"></span>
                    </div>
                    <div class="test_name">{{ post.meta('roastType') }}</div>
                  </div>
                {% endif %}

              <a href="{{ post.link|e('esc_url') }}" class="button button--outlined">View Product</a>
            </a>
          </li>
        {% endfor %}
      </ul>
      <div data-size="medium" data-align="center" data-text-align="center">
        <a href="{{ post.link|e('esc_url') }}" class="button button--text">{{ labels.allPosts }}</a>
      </div>
    </div>
  </flynt-component>
{% endif %}

I am calling here {{ post.meta('roastType') }} but not working. { roastType }} is working on a post single page.

So the problem is in a loop in another component.

GridProductsLatest

<?php

namespace Flynt\Components\gridProductsLatest;

use Flynt\FieldVariables;
use Flynt\Utils\Options;
use Timber\Timber;

const POST_TYPE = 'product';

add_filter('Flynt/addComponentData?name=GridProductsLatest', function ($data) {
    $data['taxonomies'] = $data['taxonomies'] ?? [];
    $data['options']['maxColumns'] = 3;
    $postsPerPage = $data['options']['maxPosts'] ?? 3;

    $posts = Timber::get_posts([
        'post_status' => 'publish',
        'post_type' => POST_TYPE,
        'cat' => join(',', array_map(function ($taxonomy) {
            return $taxonomy->term_id;
        }, $data['taxonomies'])),
        'posts_per_page' => $postsPerPage + 1,
        'ignore_sticky_posts' => 1,
    ]);

    $data['posts'] = array_slice(array_filter($posts->to_array(), function ($post) {
        return $post->ID !== get_the_ID();
    }), 0, $postsPerPage);

    $data['postTypeArchiveLink'] = get_permalink(get_option('page_for_posts')) ?? get_post_type_archive_link(POST_TYPE);

    return $data;
});

function getACFLayout()
{
    return [
        'name' => 'gridProductsLatest',
        'label' => __('Grid: Products Latest', 'flynt'),
        'sub_fields' => [
            [
                'label' => __('Content', 'flynt'),
                'name' => 'contentTab',
                'type' => 'tab',
                'placement' => 'top',
                'endpoint' => 0
            ],
            [
                'label' => __('Title', 'flynt'),
                'instructions' => __('Want to add a headline? And a paragraph? Go ahead! Or just leave it empty and nothing will be shown.', 'flynt'),
                'name' => 'preContentHtml',
                'type' => 'wysiwyg',
                'tabs' => 'visual,text',
                'media_upload' => 0,
                'delay' => 0,
            ],
            [
                'label' => __('Categories', 'flynt'),
                'instructions' => __('Select 1 or more categories or leave empty to show from all posts.', 'flynt'),
                'name' => 'taxonomies',
                'type' => 'taxonomy',
                'taxonomy' => 'category',
                'field_type' => 'multi_select',
                'allow_null' => 1,
                'multiple' => 1,
                'add_term' => 0,
                'save_terms' => 0,
                'load_terms' => 0,
                'return_format' => 'object'
            ],
            [
                'label' => __('Options', 'flynt'),
                'name' => 'optionsTab',
                'type' => 'tab',
                'placement' => 'top',
                'endpoint' => 0
            ],
            [
                'label' => '',
                'name' => 'options',
                'type' => 'group',
                'layout' => 'row',
                'sub_fields' => [
                    FieldVariables\getTheme(),
                    [
                        'label' => __('Max Posts', 'flynt'),
                        'name' => 'maxPosts',
                        'type' => 'number',
                        'default_value' => 3,
                        'min' => 1,
                        'step' => 1
                    ]
                ]
            ],
        ]
    ];
}

Options::addTranslatable('GridProductsLatest', [
    [
        'label' => __('Content', 'flynt'),
        'name' => 'contentTab',
        'type' => 'tab',
        'placement' => 'top',
        'endpoint' => 0
    ],
    [
        'label' => __('Title', 'flynt'),
        'instructions' => __('Want to add a headline? And a paragraph? Go ahead! Or just leave it empty and nothing will be shown.', 'flynt'),
        'name' => 'preContentHtml',
        'type' => 'wysiwyg',
        'default_value' => '<h2>' . __('Related Posts', 'flynt') . '</h2>',
        'tabs' => 'visual,text',
        'media_upload' => 0,
        'delay' => 0,
    ],
    [
        'label' => __('Labels', 'flynt'),
        'name' => 'labelsTab',
        'type' => 'tab',
        'placement' => 'top',
        'endpoint' => 0
    ],
    [
        'label' => '',
        'name' => 'labels',
        'type' => 'group',
        'sub_fields' => [
            [
                'label' => __('Reading Time - (20) min read', 'flynt'),
                'instructions' => __('%d is placeholder for number of minutes', 'flynt'),
                'name' => 'readingTime',
                'type' => 'text',
                'default_value' => __('%d min read', 'flynt'),
                'required' => 1,
                'wrapper' => [
                    'width' => 50
                ],
            ],
            [
                'label' => __('All Posts', 'flynt'),
                'name' => 'allPosts',
                'type' => 'text',
                'default_value' => __('See More Posts', 'flynt'),
                'required' => 1,
                'wrapper' => [
                    'width' => 50
                ],
            ],
            [
                'label' => __('Read More', 'flynt'),
                'name' => 'readMore',
                'type' => 'text',
                'default_value' => __('Read More', 'flynt'),
                'required' => 1,
                'wrapper' => [
                    'width' => 50
                ],
            ]
        ],
    ]
]);

[timohubois]

@opcodespace: If the data is stored in another component that is part of the flexible content field, you can read it from there. But due to the nature of a flexible content field, all component data is stored in relation to its order. So it can be tricky to get the right component.

Have you used ACFComposer::registerFieldGroup to create a flexible content field that holds the layouts?

If so, you can try this to get a dump of the data from the flexible content field:
{{ dump(post.productComponents) }} or {{ dump(post.meta(post.productComponents)) }}

It may need to be adapted in relation to your code.

If the fields should be the same on all pages I would prefer to create a group field that holds the data and read it from this instead of reading it from a component within the flexible content field.

I hope this helps?

[opcodespace]

@timohubois Thanks for your help.
Now I am getting data in array using this {{ dump(post.meta(productDetails.roastType)) }}

Result
["pageComponents_0_roastType"]=> string(4) "dark" ["_pageComponents_0_roastType"]=> string(60) "field_pageComponents_pageComponents_productDetails_roastType"

But not sure how can get I get just string easily.

[timohubois]

@opcodespace have you found a solution or have you tried to use the field directly, like {{ post. pageComponents_0_roastType }}?

[timohubois]

@opcodespace I will close this issue for now. It is not an issue by the Flynt itself and we did not got any feedback from you until today.

If you have further questions feel free to ask or start a new discussion.