It is possible to add custom fields to the Content Constructor components per project and almost project to all Content Constructor components. This feature allows adding new configuration fields, which can be saved in Component configuration and read later within the templates to develop custom functionalities.
There are many types of fields that are supported. They will be listed and described in detail at the end of this document.
Adding a custom field to Image Teaser slide configurator
To add a custom field to your project, view.xml file of your-theme needs to be edited.
Variables set for MageSuite_ContentConstructor module needs to be created, and
How to introduce custom fields
The mechanism relies on adding new configurator fields by extending view.xml variables for MageSuite_ContentConstructor module in the project theme.
There are two places, for which, custom fields can be added:
Image Teaser Slide Configurator - a place where we configure a specific image within the Image Teaser
Component Configurator - general configurator of the component
The rest happens under the hood of content constructor module.
The easiest way to see it in action is to try yourself, just use the below examples to add custom fields,
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.
...
| Code Block |
|---|
// theme-example/src/etc/view.xml
<vars module="MageSuite_ContentConstructor">
<var name="image_teaser">
<var name="custom_sections">
<var name="0">
<var name="label">Advanced</var>
<var name="content">
<var name="fields">
<var name="0">
<var name="label">Component's background color</var>
<var name="type">select</var>
<var name="model">background</var>
<var name="options">
<var name="cs-image-teaser--bg-white">White</var>
<var name="cs-image-teaser--bg-grey">Grey</var>
<var name="cs-image-teaser--bg-black">Black</var>
</var>
<var name="default">cs-image-teaser--bg-white</var>
<var name="frontend_type">css_class</var>
</var>
</var>
</var>
</var>
</var>
</var>
</vars> |
Adding a custom field to the Image Teaser slide configurator
Example task: Client needs to display price of the product, he puts into image teaser and additionally he wants to select its position among 9 predefined, exactly the way text content is positioned.
...
For this purpose 2 custom fields will be added to Image Teaser slide configurator:
| Code Block |
|---|
<vars module="MageSuite_ContentConstructor">
<var name="teaser">
<var name="tabs">
<var name="2">
<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>
<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> |
Implementation examples
To have a full overview of adding configuration fields and using them in overwritten component templates later, let's create 2 custom features.
Let's say core team and PO decided to not implement any of the things your client needs into the core. This is where we need to use the custom fields feature.
For both our tasks our project is called Minisoft so our theme is theme-minisoft.
Example 1
Client needs to display price of the product, he puts into image teaser and additionally he wants to select its position among 9 predefined, exactly the way text content is positioned.
Types of custom felds
Below Table contains a list of all types of fields/component you can be used in the project.
...
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 |
|
| ||||||||
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 |
| ||||||||
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" |
| ||||||||
position | Position grid feature known from Content Align feature to set position of text for single teaser |
|
| ||||||||
checkbox | checkbox styled magento way (switcher-alike). Use it if you need boolean value on the frontend |
|
| ||||||||
radio | Standard options list | Same as for "select" |
| ||||||||
color | Color picker |
|
|  | |||||||
datetime-range | Date time range picker, that consists of two inputs with type “datetime-local” |
|
|