Dynamic Content for Elementor, from version 3.0, has enhanced the ACF Repeater widget with a new display mode called "Dynamic HTML."
This mode is specifically designed to leverage the 'data' shortcode, enabling you to dynamically integrate and manipulate repeater data directly within your Elementor projects.
Availability of the 'data' Shortcode
The 'data' shortcode is exclusively available in the "Dynamic HTML" setting of the ACF Repeater widget and is not accessible in other widget settings. This makes the 'data' shortcode a powerful and specific tool for customizations that require dynamic data visualization within Elementor projects.
Available 'data' Shortcodes and Their Outputs
Depending on your configuration settings within the ACF Repeater widget, different types of 'data' shortcodes will be available. Each type serves a specific purpose, making it easy to access and format the data exactly how you need it:
{data:row}Returns the complete row data as an array. To display specific data, you need to access a specific element via{data:row||sub-field-name}or it can be iterated over as shown previously in array looping.{for:item {data:row} {get:item} @sep=', '}Fetch the complete row data as a formatted string, with fields separated by commas. This is ideal for simple displays where basic formatting is sufficient.{data:row-index}Returns the index of the current row within the repeater, starting from 1. This can be particularly useful for creating numbered lists or for tracking the row count in a dynamic layout.
Practical Examples
Displaying Raw Data: To display specific data from a repeater field, use:
{data:row||sub-field-name}Formatted Output: For a user-friendly display of the repeater data, formatted with commas:
{for:item {data:row} {get:item} @sep=', '}Indexing Rows: To show the row number alongside its content:
Row {data:row-index}: {data:row-formatted}