Blog

Oxygen – React to Repeater or Easy Posts without Results

,

Contents

Introduction

Oxygen allows listing pages, posts or other content types with a customized design and individual selection criteria using the Repeater and Easy Posts elements.

Of course, it may happen that for certain content types or selection criteria there are no results to display.
In this case, you may want to display a notice such as "No results found", or hide an entire section on the page.

Use Case

In the following example, a list of the next events is to be displayed.
If no events were found, a note should be displayed.

List with results
List without results

Of course, it is also conceivable that the entire "Next events" section should be hidden if no events are found.

Structure in Oxygen

In Oxygen, the use case can be built as follows:
(IDs are examples)

Issue

In Oxygen there is a condition "# of posts" which refers to the number of hits.
However, this condition refers to the current page and not to Repeaters or Easy Posts with individual selection criteria.
As soon as a custom query (custom, manual, advanced) is used for Repeater or Easy Posts, the condition "# of posts" will not return the desired results for items outside of Repeater or Easy Posts.
And within the Repeater or Easy Post no elements outside the Repeater or Easy Posts can be addressed.

Solution

The most effective solution can be easily implemented with a few lines of code.

A new Oxygen Element Code Block has to be added for this purpose.

In its property "PHP & HTML" you first disable the output of "hello world":

In the "JavaScript" property, you can now implement your requirements quite easily with jQuery, for example.
You refer to the Repeater or Easy Posts element and check if it has content.
Then you can react depending on the requirement.

Reaction To List With Results

If there are results in the list, the text "No events scheduled at the moment" should be hidden.

(function($) {
	// check if the list has items
    if ($('#_dynamic_list-3-15').children().length > 0) {
		// if more than 0 items hide the "no results" text
		$('#text-block-4-15').hide();
	}
})(jQuery);

(Make sure to use the appropriate IDs)

Explanation:

if ($('#_dynamic_list-3-15').children().length > 0)
If the list element (Repeater or Easy Post) has sub-elements...

$('#text-block-4-15').hide();
... hide the "No results" Text element.

Reaction To List Without Results

If there are no results in the list, the entire section should be hidden.

(function($) {
	// check if the list has items
    if ($('#_dynamic_list-3-15').children().length == 0) {
		// if no items hide the whole section
		$('#section_1-15').hide();
	}
})(jQuery);

(Make sure to use the appropriate IDs)

Explanation:

if ($('#_dynamic_list-3-15').children().length == 0)
If the list element (Repeater or Easy Post) has no sub-items...

$('#section-1-15').hide();
... hide the whole Section.

Text "No results" with search engine optimization

If the text "No events scheduled at the moment" is already created as an element in the builder, this text is included in the HTML of the page. A search engine would now include the page with this text in the index and, in the worst case, display it in the search results.

But there is a simple solution how to prevent this.
The text is not created as an element in the builder. Instead, the repeater element is replaced with a dynamically generated text:

(function($) {
	// check if the list has items
    if ($('#_dynamic_list-3-15').children().length == 0) {
		// replace the Repeater element with a message
		$('#_dynamic_list-3-15').replaceWith('<p class="no-results-message">No events scheduled at the moment.</p>');
	}
})(jQuery);

The text can be styled as desired using the assigned CSS class no-results-message.
For this purpose a new selector .no-results-message can be created in Oxygen and assigned with the favored styling.


magnifier