How can we call the shortcodes in flynt ?

[rajpatel2435]

Hey guys, is there anyone who has the complete documentation for flynt? As I started working on this theme for my new project. But I am not sure how can i start? Any advice would be highly appreciated!!

Thanks

[aaronmeder]

Hi @rajpatel2435

Very nice to meet you, welcome on Planet Flynt 🥳

Documentation
There isn't a ton of official documentation for Flynt. I think this is also due to the fact that Flynt "does not do so much". Flynt mainly connects Wordpress, ACF, Timber, SCSS and web components in a convenient package. So if you're looking for solutions to challenges they are often more related to these parts than Flynt itself.

For Flynt I would recommend reading through the repo README and the Getting Started page.

If you're looking for a more high level info about what makes Flynt great, I've recorded a video about that (the video shows Flynt v1 though, which was the same concepts, but some code details are different).

I do also want to record a more hands-on, rougher getting started video series where a simple site is created that shows a few nice tricks with Flynt...but it's hard to find the time for it at the moment 😬

Shortcodes
If you would like to render a shortcode in your Twig files, the easiest way is to use the ["shortcodes" filter]({{ post.custom_shortcode_field|shortcodes }}) like this:

<div>{{ someHtml|shortcodes }}</div>

Does that help you to get on?
Otherwise feel free to ask more specifically or post some code parts you're struggling with.

All the best from 🇨🇭!

Aaron

[rajpatel2435]

HI @aaronmeder

Thank you for your prompt response.

let's say my shortcodes coming from plugin file. name of shortcodes is [my_shortcodes].
`{# index.twig inside your Flynt component #}

Shortcode Values

{{ function('do_shortcode', '[my_shortcode]') }}

<ul>
    {% for value in shortcodeValues %}
        <li>{{ value }}</li>
    {% endfor %}
</ul>

`

How can i use it here?

Thanks

[aaronmeder]

If your shortcode seems to return an array then you should be able to do this I think:

{% set shortcodeValues = function('do_shortcode', '[my_shortcode]') %}

<ul>
    {% for value in shortcodeValues %}
        <li>{{ value }}</li>
    {% endfor %}
</ul>

If you would want to keep it a bit cleaner, then you could do the first part in your component's functions.php file:

add_filter('Flynt/addComponentData?name=MyComponent', function (array $data): array {
    $data['shortcodeValues'] = do_shortcode('[my_shortcode]');
    return $data;
});

[rajpatel2435]

Hi @aaronmeder

Here is the more clarity

index.twig

function.php

result: empty screen

Any solution?

Thanks

[aaronmeder]

Yep I actually just realised when trying to test the same thing that a Wordpress shortcode will always return a text string, not an array...so you cannot use a for loop on it.

Is using a shortcode for your purpose actually needed? What is it that you're trying to achieve?

[rajpatel2435]

Hi @aaronmeder

actually we have one plugin and we are using the API to fetch the data and for output we are using the shortcodes to display that.

How can we achieve that?

[aaronmeder]

@rajpatel2435 Two ways how you could achieve that:

Either your shortcode returnes the finished, prepared html. Then you just render it directly in Twig like this: {{ "[my_shortcode]"|shortcodes }}

Or, if you want to create the html yourself using Twig, you would need to add a function to your plugin that just returns the needed data as an array. You can then call that function within your component's functions.php and loop through the data with Twig (how you would have originally wanted to do it as far as I understand):

functions.php

add_filter('Flynt/addComponentData?name=MyComponentName', function (array $data): array {
    $data['items'] = function_that_returns_dashboard_data_as_array();
    return $data;
});

index.twig

{% for item in items %}
  {{ item.date }} {{ item.time }}
{% endfor %}

Does that help?
Aaron

[rajpatel2435]

Hi @aaronmeder @timohubois

it is not working even i am returning the prepared html.

here is the component structure

functions.php

index.twig

output

could you please help me out?

could you also provide the solution for this?

Thanks

And the thing is working in my case
Whenever I am calling the shortocdes from the plugin file it is working but when i make shortcode inside function.php that is not working

[rajpatel2435]

Hey @aaronmeder

Thanks man it works.

As we are planning to build like user page, login, sign up means like social media plateform what do you think it is better to use flynt?

BTW Thank you so much for your help

[aaronmeder]

@rajpatel2435 glad to hear. Would be great if you can mark the discussion as answered then.

Sounds like an interesting project. I think in general it's good to use whatever you are most experienced with 😉 I haven't created many community sites like a social media service based on WordPress, but there might solutions to get started with that easier.

[rajpatel2435]

Hey @aaronmeder

question for style.css whatever i am writing inside style.css it is not loading why?

[aaronmeder]

Hey @rajpatel2435

The style.css file doesn't get loaded in the frontend.

You have to add your css to assets/main.scss and have a watcher (npm run start) running or build a bundle (npm run build:production for example). This gets compiled to a file in the dist that is loaded.

btw: It's best practice to use a new discussion per question, so other people can find a helpful answer to the same question later on more easily.
It would be great if you could mark this discussion as answered for the same reasons ✅

Wish you a good Easter weekend.
Aaron