Field type | Description | Vars available | Markup example | Effect |
|---|
input | Text type input. Dedicated for providing custom CSS classes or short content | label (string, required) - visible in CC model (string, required) - object key that you'll be using on the frontend to retrieve value of this field hint / note / warning (string, optional) - visible in CC only, under defined field. Use it to describe the feature default (string, optional) - default value if needed frontend_type (string, optional) - described later
| | Code Block |
|---|
// theme-myproject/src/etc/view.xml
...
<var name="fields">
<var name="1">
<var name="label">Text input</var>
<var name="type">input</var>
<var name="model">input_sample</var>
<var name="hint">Hey, this is example of "hint"</var>
<var name="default">Default input value</var>
<var name="frontend_type">css_class</var>
</var>
</var>
...
... |
|  |
select | Select field. Dedicated for limited options, like pre-defined CSS classes or icons | Same as for "input". The only difference is that value of default has to cover one of defined options | | Code Block |
|---|
// theme-myproject/src/etc/view.xml
...
<var name="fields">
<var name="1">
<var name="label">Teaser background</var>
<var name="type">select</var>
<var name="model">select_sample</var>
<var name="note">Hey, this is example of "note"</var>
<var name="options">
<var name="cs-image-teaser__slide--grey"></var>
<var name="cs-image-teaser__slide--black">Black</var>
<var name="cs-image-teaser__slide--white">White</var>
</var>
<var name="default">cs-image-teaser__slide--white</var>
<var name="frontend_type">css_class</var>
</var>
</var>
...
... |
|  |
textarea | Textarea for more complex content. Remember to not provide too much of it as frontend might have problems to fit all of it. You can use directives. | Same as for "input" | | Code Block |
|---|
// theme-myproject/src/etc/view.xml
...
<var name="fields">
<var name="1">
<var name="label">Badge text</var>
<var name="type">textarea</var>
<var name="model">badge_text</var>
<var name="hint"><![CDATA[
Add content with special markup, e.g.:<br>
- <small>Only</small> {{price sku="some_sku"}}<br>
- {{sku sku="some_sku"}}<br>
- <big>Only</big> {{qty sku="some_sku"}} left
]]></var>
</var>
</var>
...
... |
|  |
position | Position grid feature known from Content Align feature to set position of text for single teaser | label (string, required) - visible in CC model (string, required) - object key that you'll be using on the frontend to retrieve value of this field rows (number, required) - defines how many rows there should be in the grid columns (number, required) - defines how many columns there should be in the grid hint / note / warning (string, optional) - visible in CC only, under defined field. Use it to describe the feature frontend_type (string, optional) - described later default (array, optional) - default value if needed Interface | Code Block |
|---|
| // interface
default = {
x: 2, // for setting x-cord (row). Must in in range of 1-{rows}
y: 2 // for setting y-cord (column). Must in in range of 1-{columns}
}; |
| | Code Block |
|---|
// theme-myproject/src/etc/view.xml
...
<var name="fields">
<var name="1">
<var name="label">Badge align</var>
<var name="type">position</var>
<var name="model">badge_align</var>
<var name="rows">3</var>
<var name="columns">3</var>
<var name="default">
<var name="x">1</var>
<var name="y">1</var>
</var>
<var name="warning">Note: Please verify text position
configuration in the "Content" tab. It
might overlap the badge position.</var>
<var name="frontend_type">html</var>
</var>
</var>
...
... |
|  |
checkbox | checkbox styled magento way (switcher-alike). Use it if you need boolean value on the frontend | label (string, required) - visible in CC model (string, required) - object key that you'll be using on the frontend to retrieve value of this field hint / note / warning (string, optional) - visible in CC only, under defined field. Use it to describe the feature checked (boolean, optional) - default value (if not set it will be set to false) frontend_type (string, optional) - described later
| | Code Block |
|---|
// theme-myproject/src/etc/view.xml
...
<var name="fields">
<var name="1">
<var name="label">Make logo bigger</var>
<var name="type">checkbox</var>
<var name="model">checkbox_sample</var>
<var name="checked">true</var>
<var name="frontend_type">html</var>
</var>
</var>
...
... |
|  |
radio | Standard options list | Same as for "select" | | Code Block |
|---|
// theme-myproject/src/etc/view.xml
...
<var name="fields">
<var name="1">
<var name="label">Radio list</var>
<var name="type">radio</var>
<var name="model">radio_sample</var>
<var name="options">
<var name="option_1">Option #1</var>
<var name="option_2">Option #2</var>
<var name="option_3">Option #3</var>
</var>
<var name="default">option_2</var>
</var>
</var>
...
... |
|  |
color | Color value with picker | label (string, required) - visible in CC model (string, required) - object key that you'll be using on the frontend to retrieve value of this field hint / note / warning (string, optional) - visible in CC only, under defined field. Use it to describe the feature default (string, optional) - default value as HEX color
| Info |
|---|
color field type is available >= v4.3.0 of CC-admin
|
| Info |
|---|
color field type with possibility to remove color value is available >= v4.7.1 of CC-admin
|
| | Code Block |
|---|
// theme-myproject/src/etc/view.xml
...
<var name="fields">
<var name="1">
<var name="label">Text color</var>
<var name="type">color</var>
<var name="model">text_color</var>
<var name="default">#50505A</var>
</var>
</var>
...
... |
|  |
datetime-range | Date time range picker, that consists of two inputs with type “datetime-local” | label (string, required) - visible in CC model (string, required) - object key that you'll be using on the frontend to retrieve value of this field hint / note / warning (string, optional) - visible in CC only, under defined field. Use it to describe the feature
| | Code Block |
|---|
// theme-myproject/src/etc/view.xml
...
<var name="fields">
<var name="1">
<var name="label">Datetime</var>
<var name="type">datetime-range</var>
<var name="model">custom_date_range</var>
</var>
</var>
...
... |
| |