Hi,slick.js . But we have some issues creating the (nested) json to configure slick.
Here is an example what the result should look like (taken from our monocle styleguide):
slickConfiguration = '{ "slidesToShow": 5,
"responsive": [
{
"breakpoint": 1920,
"settings": {
"slidesToShow": 4,
"slidesToScroll": 1,
}
},
{
"breakpoint": 1366,
"settings": {
"slidesToShow": 3,
"slidesToScroll": 1,
}
},
{
"breakpoint": 1024,
"settings": {
"slidesToShow": 2,
"slidesToScroll": 1,
}
},
{
"breakpoint": 768,
"settings": {
"slidesToShow": 1,
"slidesToScroll": 1,
}
}
]}'
We made several attempts mixing Neos.Fusion:DataStructure and Neos.Fusion:Join that more or less failed. How could we create the json using fusion (Neos 4.2)?
drillsgt
January 7, 2019, 12:57pm
2
Did you use the Eel-Helper Json.stringify to process the result?
I use (in Neos 3.x):
json = Neos.Fusion:RawArray {
@process.json = ${Json.stringify(value)}
key = 'value'
...
}
Which I expect to work the same in Neos 4.x with Neos.Fusion:DataStructure instead of RawArray.
We used Json.Stringify before assigning the json configuration as a data-attribute. Probably should have posted our last failed attempt as well…
prototype(MyPackage:Content.Slider) < prototype(Neos.Neos:ContentComponent) {
renderer = MyPackage:Components.Molecule.Slider {
# test = ${q(node)}
# test.@process.debug = Neos.Fusion:Debug{
# title = 'whatever'
# }
nodeName = ${q(node).property('_name')}
@context.slickConfigurationDataStructure = Neos.Fusion:DataStructure {
responsive = Neos.Fusion:DataStructure {
smBreakpointSettings = Neos.Fusion:DataStructure {
breakpoint = 368
settings = Neos.Fusion:DataStructure {
slidesToShow = ${q(node).property('smSlidesToShow')}
slidesToScroll = ${q(node).property('smSlidesToScroll')}
dots = ${q(node).property('showDots')}
prevArrow = ${'.' + q(node).property('_name') + '-prev-js"'}
nextArrow = ${'.' + q(node).property('_name') + '-next-js"'}
z-index = 999
}
}
mdBreakpointSettings = Neos.Fusion:DataStructure {
breakpoint = 768
settings = Neos.Fusion:DataStructure {
slidesToShow = ${q(node).property('smSlidesToShow')}
slidesToScroll = ${q(node).property('smSlidesToScroll')}
dots = ${q(node).property('showDots')}
prevArrow = ${'.' + q(node).property('_name') + '-prev-js"'}
nextArrow = ${'.' + q(node).property('_name') + '-next-js"'}
z-index = 999
}
}
lgBreakpointSettings = Neos.Fusion:DataStructure {
breakpoint = 1024
settings = Neos.Fusion:DataStructure {
slidesToShow = ${q(node).property('smSlidesToShow')}
slidesToScroll = ${q(node).property('smSlidesToScroll')}
dots = ${q(node).property('showDots')}
prevArrow = ${'.' + q(node).property('_name') + '-prev-js"'}
nextArrow = ${'.' + q(node).property('_name') + '-next-js"'}
z-index = 999
}
}
}
slidesToShow = ${q(node).property('slidesToShow') ? q(node).property('slidesToShow') : ''}
}
slides = Neos.Neos:ContentCollection {
nodePath = 'slideritems'
attributes {
data-slick = ${Json.stringify(slickConfigurationDataStructure)}
class = ${'molecule-slider'}
}
}
}
}
The result of the json stringify is:
{
"responsive":{
"smBreakpointSettings":{
"breakpoint":368,
"settings":{
"slidesToShow":1,
"slidesToScroll":1,
"dots":true,
"prevArrow":".node-1tscywo7rigsu-prev-js\"",
"nextArrow":".node-1tscywo7rigsu-next-js\"",
"z-index":999
}
},
"mdBreakpointSettings":{
"breakpoint":768,
"settings":{
"slidesToShow":1,
"slidesToScroll":1,
"dots":true,
"prevArrow":".node-1tscywo7rigsu-prev-js\"",
"nextArrow":".node-1tscywo7rigsu-next-js\"",
"z-index":999
}
},
"lgBreakpointSettings":{
"breakpoint":1024,
"settings":{
"slidesToShow":1,
"slidesToScroll":1,
"dots":true,
"prevArrow":".node-1tscywo7rigsu-prev-js\"",
"nextArrow":".node-1tscywo7rigsu-next-js\"",
"z-index":999
}
}
},
"slidesToShow":1
}
The value of the key responsive should be an array of objects like in my first post. I also have to remove the keys smBreakpointSettings , mdBreakpointSettings , lgBreakpointSettings from the json stringify result to get "responsive":[{...},{...},{...}] .
We found the solution, I didn’t knew that in order to get what we want, the array keys have to be integer, in sequence starting from 0…
So this is the solution:
@context.slickConfigurationDataStructure = Neos.Fusion:DataStructure {
slidesToShow = ${q(node).property('slidesToShow') ? q(node).property('slidesToShow') : ''}
responsive = Neos.Fusion:DataStructure {
0 = Neos.Fusion:DataStructure {
breakpoint = 368
settings = Neos.Fusion:DataStructure {
slidesToShow = ${q(node).property('smSlidesToShow')}
slidesToScroll = ${q(node).property('smSlidesToScroll')}
dots = ${q(node).property('showDots')}
prevArrow = ${'.' + q(node).property('_name') + '-prev-js'}
nextArrow = ${'.' + q(node).property('_name') + '-next-js'}
z-index = 999
}
}
1 = Neos.Fusion:DataStructure {
breakpoint = 768
settings = Neos.Fusion:DataStructure {
slidesToShow = ${q(node).property('smSlidesToShow')}
slidesToScroll = ${q(node).property('smSlidesToScroll')}
dots = ${q(node).property('showDots')}
prevArrow = ${'.' + q(node).property('_name') + '-prev-js'}
nextArrow = ${'.' + q(node).property('_name') + '-next-js'}
z-index = 999
}
}
2 = Neos.Fusion:DataStructure {
breakpoint = 1024
settings = Neos.Fusion:DataStructure {
slidesToShow = ${q(node).property('smSlidesToShow')}
slidesToScroll = ${q(node).property('smSlidesToScroll')}
dots = ${q(node).property('showDots')}
prevArrow = ${'.' + q(node).property('_name') + '-prev-js'}
nextArrow = ${'.' + q(node).property('_name') + '-next-js'}
z-index = 999
}
}
}
}
christianm
January 7, 2019, 6:38pm
5
Just as a follow up. I think the content of the responsive key could/should be a Maping object. Basically you would map the “hardcoded” array of breakpoint numbers to a DataStructure. That will give you an numberical array which should cleanly stringify to JSON and reduces a lot of code duplication.