content.ts

This file defines section content settings available to users in the Instant Site Editor. If some content settings like texts or images should be modifiable or if you want to provide some choices for users, you must add these settings to the content.ts file.

Ecwid will automatically build UI for the Editor, so you only need to declare the settings and their properties, for example, type and label, in this file. And import user settings to the section-name.vue file.

Each setting is referred to as an element and is defined by the element_id object with its properties inside. You can add multiple elements of the same type to the file if they have unique element_id. If some of the content settings should have related design settings, use the same element_id in both content.ts and design.ts files to link them.

Code example for a simple "Main title" input field (label and placeholder texts are defined in translations.ts file):

export default {
	element_id: {
		type: 'INPUTBOX',
		label: '$label.section_description.label',
		placeholder: '$label.section_description.placeholder',
	},
} as const;

"Main title" input field in the Instant Site Editor:

Find the full list of available content settings and their properties below:

INPUTBOX

This element adds a single-line text input field to user settings available for the section.

List of properties:

defaults

If defaults are presented and there is no showcase overriding its values, these values will be used as default. Users will be able to change them after adding a section in the IS Editor.

Code example:

element_id: {
	type: 'INPUTBOX',
	label: '$label.element_id.label',
	placeholder: '$label.element_id.placeholder',
}

TEXTAREA

This element adds a multi-line text input field to user settings available for the section.

List of properties:

defaults

If defaults are presented and there is no showcase overriding its values, these values will be used as default. Users will be able to change them after adding a section in the IS Editor.

Code example:

element_id: {
	type: 'TEXTAREA',
	label: '$label.element_id.label',
	placeholder: '$label.element_id.placeholder',
}

BUTTON

This element adds a configurable button to user settings available for the section.

List of properties:

defaults

Code example:

element_id: {
	type: 'BUTTON',
	label: '$label.element_id.label',
	defaults: {
  	title: 'Contact API Support',
    buttonType: 'MAIL_LINK',
    email: '[email protected]',
  },
}

IMAGE

This element adds an image uploader to user settings available for the section.

List of properties:

defaults

imageData

imageInfo

borderInfo

color

Code example:

element_id: {
  type: 'IMAGE',
  label: '$label.element_id.label',
  defaults: {
    imageData: {
      set: {
        LOW_RES: {
          url: 'new_arrivals_mobile_low.jpeg',
        },
        MOBILE_WEBP_LOW_RES: {
          url: 'new_arrivals_mobile_low.jpeg',
        },
        MOBILE_WEBP_HI_RES: {
          url: 'new_arrivals_mobile_high.jpeg',
        },
        WEBP_LOW_RES: {
          url: 'new_arrivals_pc_low.jpeg',
        },
        WEBP_HI_2X_RES: {
          url: 'new_arrivals_pc_high.jpeg',
        },
      },
      borderInfo: {},
    },
  }
}

TOGGLE

This element adds a toggle to user settings available for the section.

List of properties:

defaults

Code example:

element_id: {
	type: 'TOGGLE',
	label: '$label.element_id.label',
	description: '$label.element_id.description',
  defaults: {
  	enabled: true,
  },
}

SELECTBOX

This element adds a dropdown list to user settings available for the section.

List of properties:

options

defaults

Code example:

element_id: {
	type: 'SELECTBOX',
	label: '$label.element_id.label',
	description: '$label.element_id.description',
  options: {
  	label: '$label.element_id.option_1.label'
    value: 'Option 1'
  }
  defaults: {
  	value: 'Option 1',
  },
}

INFO

This element adds an unmodifiable information block with text and an optional button. Use it to add some marketing/educational information to the Editor. For example: "Need help? Contact developer: [Email button]" block displayed under the section settings.

List of properties:

button

defaults

Code example:

element_id: {
	type: 'INFO',
	label: '$label.element_id.label',
	description: '$label.element_id.description',
  button: {
  	label: '$label.element_id.button.label'
    link: 'https://example.com'
  },
}