Cookie based rendering in fusion

Using Neos & Flow Frontend & Integration
1

Hey,
i have the following situation:

I have a module what i want to render if a cookie is set with the right value.

I found this, its going in the right direction but how can i get a render condition out of it?: [SOLVED] Converting PHP to Fusion Code

How can i do that?

Lets say i have a cookie named “custommaps” with the value true. If i don’t have it, i want to show something else instead.

This is how my fusion looks like:

##
# Google Maps Einbindung
#
prototype(WG.Site:Content.GoogleMaps) < prototype(Neos.Neos:ContentComponent) {
    maps = ${q(node).property('maps')}
    layerImage = ${q(node).property('layerImage')}
    layerText = ${q(node).property('layerText')}

    renderer = afx`

        <div @if.hasMaps={props.maps} class="responsive-maps">
            {props.maps}
        </div>
         <div @if.hasMaps={!props.maps && !props.renderFrontend}>
            Bitte den Google Maps Code eingeben!
        </div>
    `
}
1 Like
2

Hi @BoxerBuffa

Yoy have the request available like this ${request.*} which is the request object, and from that you can access the getters like

${request.cookieParams}

is what I expect you are in need of to get your cookies :slight_smile:

1 Like
3

Thanks for your help, how do i use the request in the fusion file?

Lets say i have a cookie called “customMaps” and i would like to check if its true or false.

4

${request.cookieParams.cookieName.value}

That should do it

5

and you might not even need the .value part for the code

6

Thanks for your help but i get no result :slight_smile: I`m not sure if i have the right syntax and its hard if you are new to the system how to debug.

Should this give me a div with the content of “Cookie”?

prototype(WG.Site:Content.GoogleMaps) < prototype(Neos.Neos:ContentComponent) {
    maps = ${q(node).property('maps')}
    layerImage = ${q(node).property('layerImage')}
    layerText = ${q(node).property('layerText')}


contentMaps = Neos.Fusion:Tag {
  @if.hasCookie = ${request.cookieParams.customMaps}
  tagName = "div" 
  content = 'Cookie'
}

    renderer = afx`

        <div @if.hasMaps={props.maps} class="responsive-maps">
            {props.maps}
        </div>
         <div @if.hasMaps={!props.maps && !props.renderFrontend}>
            Bitte den Google Maps Code eingeben!
        </div>

        {props.contentMaps}

    `
}
7

hi in terms of debugging in fusion/eel i can recommend this package: PackageFactory/PackageFactory.Fusion.Debug: Simple methods to debug stuff in Fusion (github.com)

with this package comes fx. the eel helper “Debug.var_dump()” wich can be used as following:

root = ${Debug.var_dump(request.httpRequest)}

(in contrary to Neos.Fusion:Debug - its everywhere usable and supports all datatypes (also objects) its a wrapper around the var_dump of flow)

(if you get with this package any errors you need to fix this manually until merged: make this package usable without phpcs: @IgnoreAnnotation(“phpcs:disable”) by mhsdesign · Pull Request #2 · PackageFactory/PackageFactory.Fusion.Debug (github.com))

1 Like
8

and you need to use request.httpRequest.cookieParams.customMaps

1 Like
9

Hey Marc,
thanks for your help!

I dont now if this is a nice syntax, but it works for me!

prototype(WG.Site:Content.GoogleMaps) < prototype(Neos.Neos:ContentComponent) {
    maps = ${q(node).property('maps')}
    layerImage = ${q(node).property('layerImage')}
    layerText = ${q(node).property('layerText')}

allowMaps = Neos.Fusion:Renderer {
  type = 'Neos.Fusion:Value'
  @if.hasCookie = ${request.httpRequest.cookieParams.customMaps}
  element.value = true
}

    renderer = afx`
        <div @if.hasMaps={props.maps && props.allowMaps == true} class="responsive-maps">
            {props.maps}
        </div>
         <div @if.hasMaps={props.maps && !props.allowMaps == true} class="cell text-center">
         <div class="maps-layer">
            {props.layerImage}
            {props.layerText}
            <br/>
            <a class="button-link google confirm" title="Google Maps laden">Google Maps laden</a>
            </div>
        </div>
         <div @if.hasMaps={!props.maps && !props.renderFrontend}>
            Bitte den Google Maps Code eingeben!
        </div>
    `
}

prototype(Neos.Fusion:GlobalCacheIdentifiers) {
  legalaccept = ${request.httpRequest.cookieParams.customMaps}
}

Is there an easy way to show the layer just in the frontend but not in the backend?

1 Like
10

does this help? Fusion check if in Backend or Live/Frontend rendered - Community / Newcomer’s Corner - Discuss Neos – the official forum of the Neos project

i fixed your syntax a bit ^^
and added
node.context.inBackend / node.context.Live

prototype(WG.Site:Content.GoogleMaps) < prototype(Neos.Neos:ContentComponent) {
    maps = ${q(node).property('maps')}
    layerImage = ${q(node).property('layerImage')}
    layerText = ${q(node).property('layerText')}

    allowMaps = ${request.httpRequest.cookieParams.customMaps}

    renderer = afx`
        <div @if.mapAndCookie={props.maps && props.allowMaps} class="responsive-maps">
            {props.maps}
        </div>

        <div @if.mapAndNoCookieAndLive={props.maps && !props.allowMaps && node.context.Live} class="cell text-center">
            <div class="maps-layer">
                {props.layerImage}
                {props.layerText}
                <br/>
                <a class="button-link google confirm" title="Google Maps laden">Google Maps laden</a>
            </div>
        </div>

        <div @if.noMapAndBackend={!props.maps && node.context.inBackend}>
            Bitte den Google Maps Code eingeben!
        </div>
    `
}

prototype(Neos.Fusion:GlobalCacheIdentifiers) {
    legalaccept = ${request.httpRequest.cookieParams.customMaps}
}
1 Like