Repeater¶

Repeater element is an element that allow to repeat group of elements.

device-dependent

Options¶

Name	Type	Required	Description
elements	array	yes	List of elements
defaultGroupLabel	string	yes	Default name of group elements
minActiveGroups	int	no	Minimum amount of active group elements
maxActiveGroups	int	no	Maximum amount of active group elements

Options

{
  "options": {
    "defaultGroupLabel" : "Icon",
    "minActiveGroups" : 1,
    "maxActiveGroups" : 10,
    "elements": [
      {
        "type" : "imageUpload",
        "name" : "icon",
        "label" : "icon"
      }
    ]
  }
}

elements¶

array Required list of elements. All elements are allowed to use. Elements can not have parameter supportsTranslations. Elements name must be unique in options.

JSON

{
  "options": {
    "elements" : [
      {
        "type" : "select",
        "name" : "verticalAlignment",
        "label" : "Vertical alignment",
        "defaultValue" : "center",
        "hint": "Changes will be visible if the columns do not take up the entire available width of the row.",
        "options": {
          "selectOptions" : [
            { "key" : "up", "label" : "Up" },
            { "key" : "down", "label" : "Down" },
            { "key" : "center", "label" : "Center" },
            { "key" : "toTheTallestColumn", "label" : "Align the column height to the tallest column in the row" },
            { "key" : "theSameHeight", "label" : "Set the columns' content to the same height" }
          ]
        }
      }
    ]
  }
}

defaultGroupLabel¶

string Required name of group.

JSON

{
  "options": {
    "defaultGroupLabel" : "Color"
  }
}

minActiveGroups¶

int Optional amount of given active groups of values. For example if 2 given, Merchant must fill at least 2 groups of values.

JSON

{
  "options": {
    "minActiveGroups" : 2
  }
}

maxActiveGroups¶

int Optional amount of given active groups of values. For example if 2 given, Merchant must fill maximum 2 groups of values.

JSON

{
  "options": {
    "maxActiveGroups" : 2
  }
}

Build-in Validators¶

Element validates if given values are correct for given elements in options.

Available Validators¶

Element does not have any available validators.

Relations Support¶

Element does not support relations between elements.

Configuration output schema¶

schema

{
  "<element_type>" : "repeater",
  "<element_name>" : string,
  "<element_label>" : string,
  "<element_isRequired>" : bool,
  "<element_options>" : {
    "<element_option_minActiveGroups>" : int,
    "<element_option_maxActiveGroups>" : int,
    "<element_option_defaultGroupLabel>" : string,
    "<element_option_elements>" : []
  }
}

example

{
    "name": "repeater",
    "type": "repeater",
    "label": "Icon",
    "options": {
        "minActiveGroups": 1,
        "maxActiveGroups": 10,
        "defaultGroupLabel": "Image",
        "elements": [
            { "name": "description", "type": "textarea", "label": "Description" },
            { "name": "icon", "type": "imageUpload", "label": "icon" },
            {
                "name": "verticalAlignment",
                "type": "select",
                "options": {
                    "selectOptions": [
                        { "key": "up", "label": "Up" },
                        { "key": "down", "label": "Down" },
                        { "key": "center", "label": "Center" }
                    ]
                },
                "label": "Vertical alignment",
                "defaultValue": "center"
            },
            {
                "name": "horizontalAlignment",
                "type": "select",
                "options": {
                    "selectOptions": [
                        { "key": "left", "label": "To the left" },
                        { "key": "right", "label": "To the right" },
                        { "key": "center", "label": "Center" }
                    ]
                },
                "label": "Horizontal alignment",
                "defaultValue": "center"
            }
        ]
    }
}

Element value¶

Value is a list of group in which we have 2 keys: values, active.

Name	Type	Description
values	array	List with values
active	bool	Is given group is active

[
  { "active" : true, "values" :  { "verticalAlignment" : "up" , "horizontalAlignment" : "left" } },
  { "active" : false, "values" :  { "verticalAlignment" : "down" , "horizontalAlignment" : "center" } },
  { "active" : true, "values" :  { "verticalAlignment" : "center" , "horizontalAlignment" : "right" } }
]

Usage in module TWIG

<div class="module_group">
    {% for group in moduleConfig.repeater %}
        {% if group.active %}
            <div class="horizontal_{{ group.values.horizontalAlignment }} vertical_{{ group.values.verticalAlignment }}">
                {% if group.values.icon %}
                    <img src="{{ group.values.icon.paths.original }}" />
                {% endif %}
                {% if group.values.description %}
                    <p>{{ group.values.description }}</p>
                {% endif %}
            </div>
        {% endif %}
    {% endfor %}
</div>

HTML output

<div class="module_group">
    <div class="horizontal_left vertical_up">
            <img src="https://path.to.image.1" />
            <p>Description 1</p>
    </div>
    <div class="horizontal_center vertical_center">
            <img src="https://path.to.image.2" />
            <p>Description 2</p>
    </div>
</div>