search

sitegeist / fluid-components

Encapsulated frontend components with Fluid's ViewHelper syntax for TYPO3
https://fluidcomponents.sitegeist.de/
GNU General Public License v2.0
54 stars 21 forks source link

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

Open rostyslavmatviiv opened 3 years ago

rostyslavmatviiv commented 3 years ago

It was discovered that if you have defined inside of your component then 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 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 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 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 commented 2 years ago

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 https://github.com/sitegeist/fluid-components/issues/99

rostyslavmatviiv commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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.