Page Comparison

...

There are many types of fields that are supported. They will be listed and described in detail at the end of this document.

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.

...

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.

...

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>

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="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>
   ...
...

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>
   ...
...

Image Removed

Image Added

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

language	js

// 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>
   ...
...

Image Removed

Image Added

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 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

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>
	...
...

...

Versions Compared

Old Version 3

New Version 4

Key

How to introduce custom fields

Adding custom field to Component Configurator

Adding a custom field to the Image Teaser slide configurator

Types of custom fields