Crocoblock is an epic creator of Elementor plugins, featuring one of the largest collections of widgets and some of the most powerful dynamic features available on the market. I’ve been debating buying the Crocoblock product after hearing a lot of good things, and decided finally to go ahead. And in a fashion that is normal for me, I have dived head first with the $200 investment into an “Unlimited Sites, All Plugins” yearly subscription. So it had better be good!!
While I’m learning I decided to start with a local site under construction called ACFLX, which is being built into an exchange (X) for ACF and Elementor components. And now of course, it might also become an exchange for JetPlugins skins or integrations. Part of my interest as a developer, is seeing how Crocoblock stacks up as potential competition for some of the related Elementor plugins we’re thinking of building which similarly focus on dynamic, data-driven solutions.
First difficult decision, what type of install to choose… I went with “Full Install”, which I think means it comes with templates and demo data but I’m not sure what the difference is exactly.
I decided to install “Investalum” which is a non-dynamic template kit. It’s for some kind of app, so I think I can convert into something suitable for ACFLX. If not I think it’s easy enough to import other template kits or just build from a canvas instead.
Next after finishing the demo import and other automated setup from the Crocoblock Wizard I found about half the plugins available were installed. But seeing as I want to try them all, I went ahead and manually installed the rest.
Time to try one of the most sought after JetPlugins in the series, JetEngine. Okay I’m about 20-minutes in after firing it up, and so far so good. In fact I’m really impressed by the field system (Metaboxes) that is baked into JetEngine. I’m pretty sure I could use ACF instead, haven’t yet checked if using ACF would mean less support from other JetPlugins like the filtering? For now I’m going to stick with their field system, and look into the difference later… ACF is basically a meta storage system anyway and from what I can see so far JetEngine works similarly.
After adding a couple of fields and making a testing post with my CPT (which I’ve named ACFLX Templates) now I’ve finally reached a point of “what next”. Couple of questions came up, one is what is the “Listing” menu item for under JetEngine menu, I opened the form, filled it out but I’m not sure what it does. I think it’s a form of template or something to do with rendering.
5:15PM / 2020-08-21
I figured out JetEngine “Listings” work, these are Elementor templates, what in other systems might be called a loop template. You set up the basics first like which post type, then you edit the template in Elementor. Then you use the “List Grid” Widget to choose the template and this will display a list of the items. This is how I hoped it worked, I’m super happy with that, the List Grid widget has a lot of query options and styling options, but for now my goal is to keep explore and not dive to deep into anything.
A new discovery for later while researching the Listing and List Grid, is Dynamic Field widget, which sounds like a fairly generic widget for displaying whatever fields might not fit into other widgets.
First moment of being a bit stuck now after trying the “Dynamic Link” widget to render the download link for a file, which happens to be a JSON Elementor template export, and it doesn’t do what I thought it would. I think that widget expects a full URL, not a file reference… so now searching how to display a file download link that is a dynamic field.
Found the solution, from the JetElements plugin, the most fundamental of the Crocoblocks comes the Download Button with full dynamic options to the rescue and sure enough it works! I’m excited I now have a semi-functional listing system.
After tinkering with a few settings and doing some non-JetPlugin setup for the site I’m trying out the JetSmartFilters plugin for the first time. Now this is exciting, because filtering is something I think of as incredibly challenging because when you code it, there is no end to the pain involved. If they are making it as simple as drag-and-drop then that will fantastic to see.
I’ve managed to get it working but I can see the JetSmartFilters being fairly challenging for some users to understand. It helps to know how these filters tend to work and be able to debug, but the options are a bit puzzling at first. I had to read some docs and switch my configuration around because I’d chosen an approach that didn’t work with the way my CPT fields were setup. Anyways got past that, and managed to put a working checkbox filter in place. Overall it took about 20-minutes, but now I feel fairly confident about being able to create a nice set of filters for these Elementor templates.
Day 2 Exploring Crocoblock’s JetPlugins
It’s day 2 as proud owner of a family of crocoblocks. Time to put them to work, chop chop! It’s 7:35AM here in Bogota, Colombia and day 832 of the lockdown (something like that!). Today I’m a little more mission-oriented on what we need from the JetPlugins for the ACFLX site. I’m setting up the hosting on our AWS Lightsail servers for the site today. And I want the site to make at least a decent impression enough that we can launch an early version of it. That means I need to figure out a way to provide a front-end form that users can fill out to send us Elementor templates in JSON format. I know we can do this with ACF if needed, but I’m going to try to use the JetEngine meta fields if that’s possible.
Adding a Search Filter
I’m excited to try out JetSearch at some point which is a separate plugin from the JetEngine, but JetSmartFilters has a search also. I think for right now that’s the one to try out to compliment the other filters being put into place.
As with the earlier checkbox filter, my first attempt was abject failure. No results when searching for a tag that I know exists.
The search filter problem was just wrong meta key used in the Query Variable setting for the filter. Worth double-checking those, I thought it was set to “tag” but it was “tags”. Editing that, and viola immediately the search is working!!
By the way if you found this post and are not already a Crocoblock’s customer but want to dive into learning this powerful suite of tools, please use my affiliate link when you sign up so I can keep producing educational content: Checkout Crockoblock JetPlugins
Front End Forms with JetEngine
It is time now to embark on a super important part of this project which is to provide a front-end form that users can use to send in Elementor Templates to our ACFLX service. And I’ve found the perfect tutorial that outlines the steps. Quick scan over it (I don’t read stuff are you kidding me!???) and I see the solution is basically “use JetEngine Forms”.
Like an onion (a beautiful sweet onion) JetEngine has layers. It turns out I don’t have JetEngine forms module activated that’s why I don’t see it on the main menu, this and other optional modules have to be turned on. I like this, it means their avoiding the weight of those modules if we don’t use them.
Built a form, setup the “Insert/Edit Post” notification… dropped in a Form Widget and run a test… it works!! Awesome, thinking back to how this is possible, but difficult (requires code or specialized widget) with ACF, I’m super impressed by this workflow. Powerful stuff, I need to add the various fields and map them to the posts before it really works but in the minimal test the form creates a blank ACFLX Template post. Success!
Ran into a snag, that tutorial actually led me astray! Find the writer and have his head brought to me on a stick! Okay it wasn’t that serious but that tutorial was more for “updating current post” which would very cool to do in some cases. However the settings are a bit different when you want a page that has a form that makes a post. See what happened is I made a page /upload/ put the form on it, and then that page actually got updated and converted into an ACFLX Template. That led to some strange puzzling moments because suddenly the slug was different, page disappeared, then appeared in a different place… crazy stuff. But now I think I’ve got it sorted out.
This turned into the first “major issue” I’ve faced on the project but I learned from that how to setup something that might be needed later which is an “edit post” front-end form. What I needed to do with the settings was “not set” the post ID, because we need to generate a new post, not update one. It’s working now and very impressive tool to have.
Setting up a Member Registration Form with JetEngine
I was just thinking what I’ve built so far at ACFLX with the filtering, grid, search, CPT, fields and then the Upload front-end form… in a coded solution would cost in the range of $3,000 or more at typical programming rates. And I am a programmer so I’m pretty confident the project would start at 3K and end up costing 12K, because that’s how coding be.
Next test of the JetEngine system is the registration form. After handling the front-end upload form I know the lay of the land better and can almost picture how to do it myself but I dug up this tutorial linked below as a reference as well.
Setting up the fields for my basic member registration form took about 5-minutes and then I mapped them, have not tested yet but I think it will work and might just need a few tweaks.
I realized after building a Registration Form in JetEngine forms, that I also have a Registration Form provided by JetBlocks. The difference seems to be the setup, the JetBlocks form is a stand-alone widget that you setup in Elementor and it’s specifically for registration… I’m going to try it later maybe on a different site but the JetEngine form works and I’ve already got it setup.
I’m not seeing a way to set the user role after the user registers. Well, it seems like setting role isn’t an option via the JetEngine form, and one way around that is to just use the WP setting “default user role”. I think that will work for now, but I hope we can set roles somehow because on some sites you might want to have 2 or more registration forms for different types of users. Is that the purpose of the JetBlock Register Form widget? Maybe.
This is kind of unrelated to Crocoblocks and the JetPlugins but we do need header and footer so I whipped one together using a color scheme that I found by searching “good color scheme”. #brilliant
This was the result:
After some styling of the Upload and Registration forms, pretty happy with how everything looks. I mean hey, it’s day 2 and I’m not a designer, just a programmer with Google access and here we are with a decently styled set of pages. I’m liking the “NO CODE” movement so far.
Despite a few small issues with the file upload field, I’ve managed to get the remainder of the Upload fields into place. At least for now, because I don’t this will be the final list. For instance I have a “type” field that is meant to be the Elementor template category, and that should be replaced by a taxonomy field.
Day 3 of the Crocoblock Party
Day 3 I decided it’s time to take ACFLX live so I had to do some server configuration to setup the hosting and then while the DNS was updating, I hopped into thinking about how to use some of the JetPlugins here on Eat/Build/Play.