Using Fusion Objects inside a loop

Using Neos & Flow
#1

Hello,

my last post here was met with really good and friendly answers, so I am trying this again :slight_smile:
I want to use the Fusion ActionUri inside of a loop and I am not sure how to do this.

I’ve come this far:

<Neos.Fusion:Loop items={props.schwerpunkte}>
                <Neos.Fusion:ActionUri package={"Vcg.IwwFilteredListing"}
                                       controller={"Standard"}
                                       action={"index"}
                                       arguments.aktiver_schwerpunkt={q(node).context({'workspaceName':'live'}).property('zielgruppe').properties.schwerpunkte[0]}
                                       arguments.node={q(node).context({'workspaceName':'live'}).get(0)}
                ></Neos.Fusion:ActionUri>
                <li class="iww-list-filter__item" hx-get={} hx-trigger="click" hx-target={"#"} hx-swap="outerHTML">{item.properties.title}</li>
</Neos.Fusion:Loop>

But I need the Uri to be inside the curly brace after hx-get.
Does anyone have suggestions?

Another thing I tried was to create a new Fusion-Component which I used inside the loop like so:

 <Neos.Fusion:Loop items={props.schwerpunkte}>
                <Vcg.IwwNodetypes:Components.Atoms.FilterLink schwerpunkt={item}/>
</Neos.Fusion:Loop>

and used ActionUri inside the Component:

uri = Neos.Fusion:ActionUri {
    package = "Vcg.IwwFilteredListing"
    controller = "Standard"
    action = 'index'
    arguments.aktiver_schwerpunkt = ${q(schwerpunkt).context({'workspaceName':'live'}).get(0)}
    arguments.node = ${q(node).context({'workspaceName':'live'}).get(0)}
  }

  # Renderer
  renderer = afx`
    <li class="iww-list-filter__item" hx-get={props.uri} hx-trigger="click" hx-target={"#"} hx-swap="outerHTML">{props.schwerpunkt.properties.title}</li>
  `

But in this case I couldn’t access “schwerpunkt” inside Neos.Fusion:ActionUri and the Uri was rendered without this parameter.

I am sure I am missing something and could use a pointer in the right direction.

Greetings,

Sabine

#2

hi :wink: glad you like this community ^^

maybe this little dirty trick will help you :smiley: its not the prettiest syntax and some regret it, but its quite compact.

<Neos.Fusion:Loop items={props.schwerpunkte}>
    <li class="iww-list-filter__item" hx-trigger="click" hx-target={"#"} hx-swap="outerHTML">
        <Neos.Fusion:ActionUri
            @path="attributes.hx-get"
            package={"Vcg.IwwFilteredListing"}
            controller={"Standard"}
            action={"index"}
            arguments.aktiver_schwerpunkt={q(node).context({'workspaceName':'live'}).property('zielgruppe').properties.schwerpunkte[0]}
            arguments.node={q(node).context({'workspaceName':'live'}).get(0)}
        />
        {item.properties.title}
    </li>
</Neos.Fusion:Loop>

for your second case i would nearly wait for 8.3 with this new feature: https://github.com/neos/neos-development-collection/pull/3943 before telling you how we do it currently :smiley:

but you can write it like:

prototype(Vcg.IwwNodetypes:Components.Atoms.FilterLink) < prototype(Neos.Fusion:Component) {

    schwerpunkt = null

    renderer = Neos.Fusion:Component {

        uri = Neos.Fusion:ActionUri {
            package = "Vcg.IwwFilteredListing"
            controller = "Standard"
            action = 'index'
            arguments.aktiver_schwerpunkt = ${q(schwerpunkt).context({'workspaceName':'live'}).get(0)}
            arguments.node = ${q(node).context({'workspaceName':'live'}).get(0)}
        }
        
        schwerpunkt = ${props.schwerpunkt}
        # or for the pros:
        # @apply.props = ${props}
        # we call it the nested component pattern

        renderer = afx`
            <li class="iww-list-filter__item" hx-get={props.uri} hx-trigger="click" hx-target={"#"} hx-swap="outerHTML">{props.schwerpunkt.properties.title}</li>
        `
    }
}
1 Like
#3

YESSS thank you so much, both of them worked!
I decided to use the second one because it seemed cleaner, although I had to tweak the solution a bit.
My final solution looks like this:

prototype(Vcg.IwwNodetypes:Components.Atoms.FilterLink) < prototype(Neos.Fusion:Component) {

  # nested component pattern
  renderer = Neos.Fusion:Component {

    uri = Neos.Fusion:ActionUri {
      package = "Vcg.IwwFilteredListing"
      controller = "Standard"
      action = 'index'
      arguments.aktiver_schwerpunkt = ${q(props.schwerpunkt).context({'workspaceName':'live'}).get(0)}
      arguments.node = ${q(node).context({'workspaceName':'live'}).get(0)}
    }

    aktiver_schwerpunkt = ${props.aktiver_schwerpunkt}
    schwerpunkt = ${props.schwerpunkt}

    renderer = afx`
      <li @if.condition={props.aktiver_schwerpunkt != props.schwerpunkt} class="iww-list-filter__item" hx-get={props.uri} hx-trigger="click" hx-target={"#steuerberater"} hx-swap="outerHTML">{props.schwerpunkt.properties.title}</li>
      <li class="iww-list-filter__item iww-list-filter__item--active" @if.condition={props.aktiver_schwerpunkt == props.schwerpunkt}>{props.schwerpunkt.properties.title} aktiv</li>
    `
  }
}

I could access my variable ‘schwerpunkt’ but I had to use props.schwerpunkt inside ActionUri to get it, just 'schwerpunktÄ like you suggested didn’t work. The line

schwerpunkt = null

didn’t seem to make any difference so I didn’t use it.

Are there any ressources that explain how the nested component pattern works? I would be interested in understanding it better.

Thanks for your help!