# Fields

The following is a list of available fields for an element.

Attention

The technical name of a field configuration (e.g. dummyText) should only appear once in the entire element. In case of disregard the title or help text of a configuration may be displayed incorrectly.

# text

A simple text field.

Element: Text

# Config

"dummyText": {
    "type": "text",
    "label": {
        "de-DE": "Text",
        "en-GB": "Text"
    },
    "value": "Ich bin ein Textfeld",
    "helpText": {
        "de-DE": "Hilfetext",
        "en-GB": "Helptext"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12

# Template

{{ element.config.dummyText.value }}

# textarea

A larger text field.

Element: Textarea

# Config

"dummyTextarea": {
    "type": "textarea",
    "label": {
        "de-DE": "Textarea",
        "en-GB": "Textarea"
    },
    "value": "Ich bin ein großes Textfeld",
    "helpText": {
        "de-DE": "Hilfetext",
        "en-GB": "Helptext"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12

# Template

{{ element.config.dummyTextarea.value }}

# html

A WYSIWYG editor for HTML content.

Element: HTML

# Config

"dummyHTML": {
    "type": "html",
    "label": {
        "de-DE": "HTML",
        "en-GB": "HTML"
    },
    "helpText": {
        "de-DE": "Hilfetext",
        "en-GB": "Helptext"
    }
}

1
2
3
4
5
6
7
8
9
10
11

# Template

{{ element.config.dummyHTML.value }}

# number

A simple number field.

Element: Number

# Config

"dummyNumber": {
    "type": "number",
    "label": {
        "de-DE": "Nummer",
        "en-GB": "Number"
    },
    "value": 1337,
    "helpText": {
        "de-DE": "Hilfetext",
        "en-GB": "Helptext"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12

# Template

{{ element.config.dummyNumber.value }}

# media

A field in which a medium can be selected from the Media Manager.

Element: Media

# Config

"dummyMedia": {
    "type": "media",
    "label": {
        "de-DE": "Medium",
        "en-GB": "Media"
    },
    "helpText": {
        "de-DE": "Hilfetext",
        "en-GB": "Helptext"
    }
}

1
2
3
4
5
6
7
8
9
10
11

# Template

{{ element.config.dummyMedia.value.url }}

# collection

With this element you can define a repetition to build a picture slider, for example.

Element: Collection

# Config

"dummyCollection": {
    "type": "collection",
    "labelProperty": "collectionText",
    "label": {
        "de-DE": "Wiederholung",
        "en-GB": "Collection"
    },
    "helpText": {
        "de-DE": "Hilfetext",
        "en-GB": "Helptext"
    },
    "children": {
        "collectionText": {
            "type": "text",
            "label": {
                "de-DE": "Titel",
                "en-GB": "Title"
            }
        },
    "collectionMedia": {
        "type": "media",
        "label": {
            "de-DE": "Bild",
            "en-GB": "Picture"
            }
        }
    }
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# Info

As of version 4.9.0 it is possible to use the content of a field as a label for the repetition. If nothing is entered, the label of the collection is used. Element: Collection

# Template

{% for key, el in element.config.dummyCollection.value %}
    <div class="config-element-collection">
        <div class="config-element collectionText">
            <div class="config-element-name">
                collectionText
            </div>
            <div class="config-element-value">
                {{ el.collectionText }}
            </div>
        </div>

        <div class="config-element collectionMedia">
            <div class="config-element-name">
                collectionMedia
            </div>
            <div class="config-element-value">
                <img src="{{ el.collectionMedia.url }}" />
            </div>
        </div>
    </div>
{% endfor %}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# entity

A selection field with any entity, such as "category" or "product".

Element: Entity

# Config

"dummyEntity": {
    "type": "entity",
    "label": {
        "de-DE": "Produkt",
        "en-GB": "Product"
    },
    "entity": "product",
    "associations": [ "configuratorSettings" ],
    "labelProperty": "name",
    "helpText": {
        "de-DE": "Hilfetext",
        "en-GB": "Helptext"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Template

{{ element.config.dummyEntity.value.name }}

Tip

Further data can be added via 'associations'. Which data can be used depends on the entity.

# Example Product

"dummyEntity": {
    "type": "entity",
    "label": {
        "de-DE": "Produkt",
        "en-GB": "Product"
        },
    "entity": "product",
    "associations": [ "configuratorSettings" ],
    "labelProperty": "name",
    "helpText": {
        "de-DE": "Hilfetext",
        "en-GB": "Helptext"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

associations

In the example, configurator data is loaded with "associations": [ "configuratorSettings" ].

You can find more product associations [here].(https://github.com/shopware/platform/blob/trunk/src/Core/Content/Product/ProductDefinition.php).

# Template - Link to the product

{{ url('frontend.detail.page', { productId: element.config.dummyEntity.value.id }) }}

# Example Category

"dummyEntity": {
    "type": "entity",
    "label": {
        "de-DE": "Kategorie",
        "en-GB": "Category"
        },
    "entity": "category",
    "associations": [ "tags" ],
    "labelProperty": "name",
    "helpText": {
        "de-DE": "Hilfetext",
        "en-GB": "Helptext"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

associations

In the example, tags assigned with "associations": [ "tags" ] are loaded.

You can find more associations [here].(https://github.com/shopware/platform/blob/trunk/src/Core/Content/Category/CategoryDefinition.php).

# Template - Link to the category

{{ url('frontend.navigation.page', { navigationId: element.config.dummyEntity.value.id }) }}

# select

A simple selection field and static selection options.

Element: Select

# Config

"dummySelect": {
    "type": "select",
    "label": {
        "de-DE": "Ausrichtung",
        "en-GB": "Alignment"
    },
    "values": [
        {
            "key": "left",
            "label": {
                "de-DE": "Links",
                "en-GB": "Left"
            }
        },
        {
            "key": "right",
            "label": {
                "de-DE": "Rechts",
                "en-GB": "Right"
            }
        }
    ],
    "value": "left",
    "helpText": {
        "de-DE": "Hilfetext",
        "en-GB": "Helptext"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# Template

{{ element.config.dummySelect.value }}

# link

An extended link selection

Care must be taken to ensure that the correct sales channel is specified in each translated language.

Element: Link

# Config

"dummyLink": {
    "type": "link",
    "label": {
        "de-DE": "Link",
        "en-GB": "Link"
    },
    "helpText": {
        "de-DE": "Hilfetext",
        "en-GB": "Helptext"
    },
    "value": {
        "type": "external",
        "url": "https://www.google.de/",
        "id": null,
        "newTab": true
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Template

Link: {{ element.config.dummyLink.value.url }} <br />
Target: {{ element.config.dummyLink.value.target }} <br />
Title: {{ element.config.dummyLink.value.title }}

1
2
3

# radio

Element: Radio

# Config

"dummyRadio": {
    "type": "radio",
    "label": {
        "de-DE": "Alter",
        "en-GB": "Age"
    },
    "values": [
        {
            "key": "below_18",
            "label": {
                "de-DE": "Jünger als 18",
                "en-GB": "Younger than 18"
            }
        },
        {
            "key": "above_equal_18",
            "label": {
                "de-DE": "18 oder älter",
                "en-GB": "18 or older"
            }
        }
    ],
    "value": "below_18",
    "helpText": {
        "de-DE": "Hilfetext",
        "en-GB": "Helptext"
    }
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# Template

{{ element.config.dummyRadio.value }}

# checkbox

A simple checkbox.

Element: Checkbox

# Config

"dummyCheckbox": {
    "type": "checkbox",
    "label": {
        "de-DE": "Feature aktivieren",
        "en-GB": "Enable feature"
    },
    "value": false,
    "helpText": {
        "de-DE": "Hilfetext",
        "en-GB": "Helptext"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12

# Template

{{ element.config.dummyCheckbox.value }}

← Content elements FAQ →