Drive Elementor widgets with backend repeaters and use Fluid Logic to set dynamic visibility on them according to repeating items.
Fluid Logic‘s extreme flexibility opens up many possibilities especially when thinking about integrations with other Gloo features such as Dynamify Repeaters, since we can use a backend repeater to feed a number of widget in your Elementor pages and then set logic conditions for them even according to the values contained within the backend repeater of choice.
Let’s take a look.
In this Short Showcase we’ve set up a simple page with multiple widgets that we can improve by using Dynamify Repeaters:
- Price List
- Reviews
- Tabs
All the information we see within the widgets is being driven dynamically from the backend: introducing Peter The Repeater! We’ve inserted multiple items within it, complete with titles, text, and even images and prices. Going back into the Elementor editor we can see how we connected Peter The Repeater with our widgets of choice. Let’s click on Dynamify in our first widget, the Price List. Set the source and the context, and connect the repeater field by pasting in its ID. In this case, respectively, JetEngine, Post, and peter-the-repeater. Let’s remove all the items from the widget, work only with one, and select the Dynamify Tag setting the Repeater Subfield to match that of the item within the widget.
Clicking update and going back to the frontend will show the widget working as intended, fetching and printing information from the backend repeater! We’ve done the exact same thing with the other two widgets we’ve got: Reviews and Tabs.
Fluid Visibility according to number of items within the repeater.
We’ve created a fancy logic condition to go with our repeater-driven widgets: “If repeater has more than 2 items“. Here’s how we did it: set the condition as “is” and “exists“, and then choose the Repeater Tag, another tag by Gloo. Once again the source and the context are the same, as is the repeater field, and choose any subfield as any will do. Let’s set the array index as two as arrays count from 0, meaning two actually means three in array language. For the sake of the example, let’s set it as 3 so that we will need 4 items within the repeater to have the condition return as true.
Back to the Price List widget, in the advanced tab we’ll toggle on Fluid Visibility and choose the condition we’ve just created. Let’s set it as show so that if the condition is true, the widget will show. Once refreshed, the widget will hide on the page as Peter only has three items within it! It’s that simple.
In the video showcase we then go on to add another item to the repeater to show how the widget will then reappear, and set the other widgets to hide when the condition is true. What this means is that depending on the number of items within a backend repeater, you can set different types of widgets to show on command, all dynamically.
