Hi everyone,
thanks for the great response. After a day playing I am really confident that Elements is the thing for me to go. Here are a few feedbacks:
Documentation
Would be nice to have a schema definition for the properties.json thrown into the Elements documentation. At the moment its a try and error or try to find another example. Maybe even having a schema definition published so it can be integrated when coding e.g. in VSCode.
How To?
Get the Background Color for a page
From the Video that I have seen, you mostly build up pages from top to bottom. Which is find unless you do not fill up the entire screen. So how would I be able to fill up the rest so I dont have a “ugly” white background at the end of my page but at the same time no scrollbars because the page is to big
How to create a “Gallery” of “Sub-Pages”
Instead of having just one menu would be great to get a list of subpages for products. Thinking about something like a “Shop” or “Blog” but not Database driven just static pages like in Classic. At the moment I can only access “pages” and then check there for children. But is there a way to access the “current page”
How to add a link to a Page inside a “Custom Component”
So the page link can be changed from the outside.
Bugs
Nothing major so far what I have seen.
Defaults for text/number properties in the properties.json is not showing up.
Scroll bars are showing up sometimes in the final result. Not sure what I am doing wrong here. But I will keep trying.
Defaults for text/number properties in the properties.json is not showing up.
Defaults will only show up when you drag the component new into Elements. If you are developing a component, changing the defaults will not reset the component. (Personally I prefer it, this way)
I used classic like 10 years ago maybe? Was using it to help my dad with his webpage at that time. When we found our company 3 years ago I wrote all by hand and then realized how handy it was with Classic, without hosting a whole wordpress thing. But when I read about elements I was, ok lets wait till that is out.
I’m not sure if you have managed to figure this one out yet, however, I just knocked up a quick example project of how you can do this.
Basically you need to use a little bit of javascript in the hooks.js file to filter through the pages array and find the active page. You can then pass through all the sub pages for the active page to your template.
this is the entire js you’d need in your hooks.js file:
const transformHook = (rw) => {
const { pages } = rw;
// find the top level active page
const activeTopLevel = pages.find((page) => page.isActive || page.hasActiveChild);
// destructure the activeTopLevel.pages in to a `activePages` const
const { pages: activePages } = activeTopLevel;
// Set pages in our template data
rw.setProps({
pages,
activePages // pass in activePages to the template
})
}
exports.transformHook = transformHook;
you then have access to activePages in your template, meaning you can loop over them with an @each.
My example project has a custom component called “Page Links” that does exactly that
I was just wondering since I might need custom props, preview images or also custom text for my “Gallery”. And that I am not sure how to access without anything available on the “Page Level”
I also started using Elements just yesterday. As a former User of RW Classic, it was pretty intuitive and familiar to start. That’s the good news. But since I’ve not been into web design for a few years, I’ll have to practice a little bit with new methods.
I tried this out. But apparently the title can not be inserted dynamically. Since pages do not maintain a unique identifier I am a bit reluctant to use this as a concept.
Reordering would not work, since the dropzone name is based on the index.
Dropzone ID is not recognized as unique.
So yeah that does not work, but I assume was never intended to be used like this .
But yeah just playing around. But I would see a possibility here to add quick links for pages. Same like for menues.
.
