USE CASE

Repeaters for Elementor

Dynamify repeaters and Fluid logic working together.

Feed widgets dynamic information from backend repeaters and then show or hide them according to the number of items thanks to Dynamify and Fluid Logic.

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.

YouTube video

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.

New
Fluid Dynamic
Play Video

How to use Fluid Logic for advanced Elementor dynamic visibility

Got A Question ?

We Are Here to Help
More Cases
Fluid Logic for form fields - use case
Use Cases

Elementor Forms + Fluid Logic

  • Fluid Logic
Dynamic conditions and visibility for form fields and for widgets according to form values.
Fluid Dynamic
Interactor Dom Manipulation Use Case
Use Cases

DOM manipulation

  • Interactor Engine
Accessible frontend DOM manipulation set up from the Elementor Editor thanks to interactor.
Interactor
Forms Extensions + Fluid Logic
Use Cases

Elementor Forms + Gloo

  • Fluid Logic
More options for your Elementor forms thanks to forms extensions and fluid logic, together.
Forms Extensions
Show or hide sections on command with Interactor
Use Cases

Elementor Sections

  • Interactor Engine
Interactor gives us multiple ways to show and hide entire sections at the click of a button.
Interactor
interactor - replacing sections use case
Interactor Use Cases

Replacing Sections

  • Interactor Engine
Replace sections with other sections entirely using the Interactor engine.
Interactor