...
and use configurations of their types form the table
Adding custom field to Component Configurator
Example Task: My designs say that the image teaser component can have either white (default), grey or black background. A client wants to decide on that while configuring component.
...
...
Please pay attention to the frontend_type entry in the custom field configuration.
This entry is used to tell the frontend part of a component, if this is html or a css_class. Default value is html. If you specify this as css_class, then the chosen value will be automatically added to the class list of the component’s container. No need to do anything else. Script automatically finds all custom fields with this type, collects them and adds to the additional classes property.
You can use this in custom fields for whole component as well as image teaser slide.
Adding custom field to Component Configurator
Example Task: My designs say that the image teaser component can have either white (default), grey or black background. A client wants to decide on that while configuring component.
...
| Code Block |
|---|
// theme-example/src/etc/view.xml
<vars module="MageSuite_ContentConstructor">
<var name="image_teaser">
<var name="label">Advanced</var>custom_sections">
<var name="0">
<var name="label">Advanced</var>
<var name="content">
<var name="fields">
<var name="0">
<var name="label">Component's container background color</var>
<var name="type">select</var>
<var name="model">background</var>
<var name="options">
<var name="cs-container--bg-white">White</var>
<var name="cs-container--bg-grey">Grey</var>
<var name="cs-container--bg-black">Black</var>
</var>
<var name="default">cs-container--bg-white</var>
<var name="frontend_type">css_class</var>
</var>
</var>
</var>
</var>
</var>
</var>
</vars> |
...
| Code Block |
|---|
<vars module="MageSuite_ContentConstructor">
<var name="teaser">
<var name="tabs">
<var name="3">
<var name="label">badge</var>
<var name="content">
<var name="fields">
<var name="0">
<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 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>
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>
</var>
</var>
</var>
</var>
</var>
</vars> |
Types of custom fields
Below table contains a list of all types of fields, that can be used:
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">
|
|
...
...
...
...
...
label">Text input</var>
<var name="type">input</var>
<var name=" |
|
...
...
>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>
|
|
...
|  Image Added |
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">
|
|
...
...
name="label">Teaser background</var>
|
|
...
<var name="type">select</var>
|
|
...
<var name="model">select_sample</var> |
|
...
...
...
Types of custom fields
Below table contains a list of all types of fields, that can be used:
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="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="1">cs-image-teaser__slide--white">White</var>
</var>
<var name="label">Text input<default">cs-image-teaser__slide--white</var>
<var name="frontend_type">input<>css_class</var>
</var>
<var name="model">input_sample<</var>
...
... |
|  Image Added |
multiselect | Mulstiselect field. Multiple | Extends select vars. The difference is that default options contain array of default entries, with the value that stands for option “name”. | | Code Block |
|---|
// theme-myproject/src/etc/view.xml
...
<var name="hint">Hey, this is example of "hint"</var>fields">
<var name="default">Default input value</var>
0">
<var name="frontend_type">css_class</var> <<var name="label">Multiselect field</var>
</var> ...
... |
| Image Removed | 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="type">multiselect</var>
<var name="fields">model">paragrap_multiselect_model</var>
<var name="1">note">Allows selecting multiple values</var>
<var name="label">Teaser background<hint">This is a hint</var>
<var name="type">select</var>options">
<var name="model">select_sample<one">Label One</var>
<var name="note">Hey, this is example of "note"</var> <var name="options">two">Label Two</var>
<var name="cs-image-teaser__slide--grey"></var>three">Label Three</var>
</var>
<var name="cs-image-teaser__slide--black">Black</var>default">
<var name="cs-image-teaser__slide--white">White<0">one</var>
</var>
<var name="default">cs-image-teaser__slide--white<1">two</var>
<var name="frontend_type">css_class<</var>
</var>
</var>
...
... |
| Image Removed Image Added |
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>
...
... |
| |
...