Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support <f:section> inside of the component template #91

Open
rostyslavmatviiv opened this issue Oct 21, 2021 · 5 comments
Open

Support <f:section> inside of the component template #91

rostyslavmatviiv opened this issue Oct 21, 2021 · 5 comments

Comments

@rostyslavmatviiv
Copy link

rostyslavmatviiv commented Oct 21, 2021 •
edited
Loading

It was discovered that if you have <f:section> defined inside of your component then <f:render section=""> will throw the error that such section is not found (or is not defined)

Code Example

MediaGallery.html - just regular fluid template

<html>
    <sfc:molecule.media
        records="{records}"
    />
</html>

Components/Molecule/Media/Media.html

<fc:component>
    <fc:param name="records" type="array" description="Gallery Records"/>

    <fc:renderer>
        <f:for each="{records}" as="record">
            <f:render section="SomeSection" arguments="{record:record}"></f:render>
        </f:for>

        <f:section name="SomeSection">
            Hello World - {record.title}
        </f:section>
    </fc:renderer>
</fc:component>

Would be good to have it working some day :)

I debugged it a bit and discovered that if you would define <f:section> inside of the original fluid template (MediaGallery.html) then it would work.

Just would like to keep this issue here for future as a help for others

Workaround 1

In case if you are using sections just to avoid code duplications then you can use <f:variable> instead of the section

Workaround 2

However, if you are rendering some section inside of the loop (like on the code examples above) and you have some variable which exists or contain unique value only in one cycle of the loop (in our case it is {record}) then usage of <f:variable> is not possible or at least too complicated.
In this scenario we just created one more component (atom for example) which was responsible to render that part of the code which was supposed to be inside of the section. So another component was used instead of the section. Looks almost the same and works the same.
@huersch
Copy link
Contributor

huersch commented Apr 26, 2022 •
edited
Loading

Hi Rostyslav,

I try to use the Workaround 2 to render a multilevel menu.
As soon as I try to call a component in itself again, I get an Infinte Loop Error.

{namespace rscw=RSCW\RscwProvider\Components}
<fc:component description="Mega Menu Submenu">
    <fc:param name="menuPage" type="Navigation" />
    <fc:renderer>    
        <ul>
            <f:for each="{menuPage}" as="subMenuPage">
                <li>
                    <a href="{subMenuPage.link}" {f:if(condition:'{subMenuPage.target}', then: 'target="{subMenuPage.target}"')}>{subMenuPage.title}</a>
                    <f:if condition="{subMenuPage.children}">
                        <rscw:molecule.megaMenuSubmenu menuPage="{subMenuPage.children}" />
                    </f:if>
                </li>
            </f:for>
        </ul>
    </fc:renderer>
</fc:component>

image

What is the correct way to output a menu with multiple submenu levels?

This could be connnected to #99

@rostyslavmatviiv
Copy link
Author

@huersch Yes I also could reproduce this issue in the past. It is kind of limitation. You can not call the same component in the context of that component.

My scenario is a bit different - I am not using recursiveness. So for your scenario unfortunately I don't have a solution :(

@s2b
Copy link
Collaborator

s2b commented Apr 29, 2022

Hi everyone, and thank you for bringing this to our attention. That's probably a tough one to fix, but we should at least look into it if it's solvable by the extension.

One possible workaround that could work is to enable the somewhat hidden partials feature introduced with #65 and try to use partials for the recursive part. If you set the TYPO3 feature flag fluidComponents.partialsInComponents, you should be able to try this.

@huersch
Copy link
Contributor

huersch commented May 2, 2022

Hi @s2b,

thanks for the suggestion.

Since we also use the styleguide, it still won't work or?

How do you realize the menu rendering? Maybe I simply have an error in understanding? Otherwise I can't think of a situation where I really need the recursion.

BR
Fabian

@s2b
Copy link
Collaborator

s2b commented May 3, 2022 •
edited
Loading

Since we also use the styleguide, it still won't work or?

That could be a problem, yes. I actually haven't tried this myself...

Usually, our components look and behave differently if there are multiple navigation levels, so we don't use recursion there and just create and call different components.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@s2b @huersch @rostyslavmatviiv