Campos personalizados desde el BO

Campos personalizados en Panel de administración > Configuración > Mi tienda y otros sectores

Campos personalizados

Los campos personalizados son áreas dinámicas del template que puedes gestionar dentro del Panel de administración para poder cambiarlos sin tener que editar tu template a cada rato.

Hay dos tipos de campos personalizados: texto y estilos.

Texto

En este caso debes crear un archivo /config/config.php en el directorio del template y definir el array $_texts. Cada elemento del array es un grupo con un título y una lista de campos, por ej:

$_texts[] = array(
		'title' => 'Nueva colección',
		'fields' => array(
			array(
				'field' => 'NUEVA_COLECCION_TITULO',
				'label' => 'Título',
				'type' => 'field'
			),
			array(
				'field' => 'NUEVA_COLECCION_DESCRIPCION',
				'label' => 'Descripción',
				'type' => 'html'
			),
			array(
				'field' => 'NUEVA_COLECCION_SUBTITULO',
				'label' => 'Subtítulo',
				'type' => 'field'
			),
			array(
				'field' => 'NUEVA_COLECCION_DESCRIPCION2',
				'label' => 'Descripción',
				'type' => 'html'
			),
		)
	);

Los campos de texto son útiles cuando necesitas gestionar textos fijos que son parte del template, por ejemplo: un título del home

Cada campo tiene un nombre único (field), una etiqueta para el formulario y un tipo: text, html, file o image. Para usarlo en el theme se debe llamar al método estático value de la clase Configuration:

<h1><?=Configuration::value('NUEVA_COLECCION_TITULO')?></h1>

Cada campo tiene un nombre único (field), una etiqueta para el formulario y un tipo: text, html, file o image.

Estilos

Este tipo de campo personalizado te permite crear "colores dinámicos" para sectores de tu tienda, como el color de fondo del header o el color de un menú.

Para crear un campo de este tipo, en el mismo archivo que ya mencionamos (config/config.php) puedes definir el array $_theme. Cada elemento del array tiene como clave un nombre único, y tres elementos: label (la etiqueta del form), type (text, color, select) y rules. Opcionalmente, si type = select, puede agregarse un array options con las opciones del menú:

$_theme['MODA_WIDTH'] = array(
		'label' => 'Ancho del contenedor principal',
		'type' => 'text',
		'rules' => array('.container' => 'width')
	);
	
	$_theme['MODA_FONT_SIZE'] = array(
		'label' => 'Tamaño del texto principal',
		'type' => 'select',
		'options' => array(
			'10px' => 'Chico',
			'12px' => 'Mediano',
			'16px' => 'Grande'
		),
		'rules' => array('.container' => 'width')
	);
	
	$_theme['MODA_TOP_BG'] = array(
		'label' => 'Color de fondo del menú superior',
		'type' => 'color',
		'rules' => array('#top' => 'background-color')
	);
	
	$_theme['MODA_TOP_COLOR'] = array(
		'label' => 'Color de texto del menú superior', 
		'type' => 'color',
		'rules' => array(
			'#top a, #top form button' => 'color',
			'#top form input, #top ul li a' => 'border-color'
		)
	);

Cada elemento del array rules tiene por clave una lista de selectores y por valor la propiedad que quiere aplicarse.

En inc/layout/index.php debe cargarse la hoja de estilos dinámica para que se apliquen los estilos personalizados

<link href="<?=HOST?>css/config.php" type="text/css" rel="stylesheet" />