() translation by (you can also view the original English article)
En los artículos anteriores, examinamos la arquitectura MVC y creamos nuestro primer controlador, modelo y vista en la aplicación de OpenCart. Hicimos esto con el fin de ayudar a tener una mejor comprensión del núcleo de la aplicación.
Para dar un paso más, vamos a ver como crear un módulo personalizado para OpenCart.
¿Qué son los módulos de OpenCart?
Los modulos de OpenCart son análogos a los add-ons (Complementos), plugins o extensiones en otro CMS (Content Managment Systems) Sistema de Gestión de Contenidos. Es a través de módulos que OpenCart nos da la capacidad para extender su funcionalidad sin tener que editar archivos de la aplicación.
Al igual que con otros CMS, generalmente se considera que es una buena práctica para ampliar la funcionalidad de la aplicación principal a través de las API proporcionadas y OpenCart no es diferente. Los Módulos nos permiten introducir, quitar o modificar funcionalidad de la aplicación principal que se hace de una manera compartimentada y mantenible.
Adicionalmente, OpenCart tiene su propio Mercado de Extensiones donde un gran número de extensiones ya están disponibles.
Nuestro Primer Módulo
Con el fin de aclimatarse con sistema de módulos de OpenCart, podemos escribir el obligatorio módulo "Hello World" (Hola Mundo). Esto tomará entrada de datos del dashboard (Tablero) y lo mostrará en la interface de usuario del sitio.
Tenga en cuenta que OpenCart tiene un número de módulos preconstruidos. Como tal, vamos a tratar de aprovechar los que sea posible cuando trabajamos en el nuestro. Para comenzar, haga lo siguiente:
- Crear un Controlador para la ruta de Admin:
admin/controller/module/helloworld.php. - Crear un archivo de Idioma para la ruta de Admin:
admin/language/english/module/helloworld.php. - Crear una Vista para la ruta de Admin:
admin/view/template/module/helloworld.tpl.
1. El archivo de Idioma
Como se discutió en nuestros artículos anteriores, el archivo de idioma contiene el texto estático que debe ser mostrado en nuestro archivo de la vista. Para helloworld.php archivo de idioma, las siguientes variables contienen los posibles campos de textos que requerimos mostrar en nuestro módulo:
1 |
<?php
|
2 |
// Heading
|
3 |
$_['heading_title'] = 'Hello World'; |
4 |
|
5 |
// Text
|
6 |
$_['text_module'] = 'Modules'; |
7 |
$_['text_success'] = 'Success: You have modified module Hello World!'; |
8 |
$_['text_content_top'] = 'Content Top'; |
9 |
$_['text_content_bottom'] = 'Content Bottom'; |
10 |
$_['text_column_left'] = 'Column Left'; |
11 |
$_['text_column_right'] = 'Column Right'; |
12 |
|
13 |
// Entry
|
14 |
$_['entry_code'] = 'Hello World Code:'; |
15 |
$_['entry_layout'] = 'Layout:'; |
16 |
$_['entry_position'] = 'Position:'; |
17 |
$_['entry_status'] = 'Status:'; |
18 |
$_['entry_sort_order'] = 'Sort Order:'; |
19 |
|
20 |
// Error
|
21 |
$_['error_permission'] = 'Warning: You do not have permission to modify module Hello World!'; |
22 |
$_['error_code'] = 'Code Required'; |
23 |
?>
|
1. El Controlador
Abre el archivo del controlador "Hello World" que acabamos de crear y agrega la clase class ControllerModuleHelloworld extends Controller {} sigue la Convention de Nobre de Clases. Después, coloca el código siguiente dentro de la clase.
Paso 1: La Función por Defecto
1 |
private $error = array(); // Se utiliza para establecer los errores, si los hay. |
2 |
|
3 |
public function index() { // Función Por Defecto |
4 |
$this->language->load('module/helloworld'); // Cargar el archivo de Idioma de helloworld |
5 |
|
6 |
$this->document->setTitle($this->language->get('heading_title')); // Establecer el título de la página en el título de encabezado en el archivo del Idioma, es decir, Hello World (Hola Mundo) |
7 |
|
8 |
$this->load->model('setting/setting'); // Cargar el modelo de Configuración (Todos los otros Módulos de OpenCart y Configuraciones Generales son guardadas usando este Modelo ) |
9 |
|
10 |
|
11 |
|
12 |
if (($this->request->server['REQUEST_METHOD'] == 'POST') && $this->validate()) { // Comenzar si: Valida y chequea si los datos vienen por un método POST a salvo |
13 |
$this->model_setting_setting->editSetting('helloworld', $this->request->post); // Analiza todo los datos que vienen al Modelo de Configuración para guardarlo en la Base de Datos. |
14 |
|
15 |
$this->session->data['success'] = $this->language->get('text_success'); // Mostrar texto exitoso cuando garda los datos |
16 |
|
17 |
$this->redirect($this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL')); // Redireccionar al Listado de Módulo. |
18 |
} // Fin del If |
19 |
|
20 |
/* Asignar los datos de idioma para ser pasado a la vista */
|
21 |
$this->data['heading_title'] = $this->language->get('heading_title'); |
22 |
|
23 |
$this->data['text_enabled'] = $this->language->get('text_enabled'); |
24 |
$this->data['text_disabled'] = $this->language->get('text_disabled'); |
25 |
$this->data['text_content_top'] = $this->language->get('text_content_top'); |
26 |
$this->data['text_content_bottom'] = $this->language->get('text_content_bottom'); |
27 |
$this->data['text_column_left'] = $this->language->get('text_column_left'); |
28 |
$this->data['text_column_right'] = $this->language->get('text_column_right'); |
29 |
|
30 |
$this->data['entry_code'] = $this->language->get('entry_code'); |
31 |
$this->data['entry_layout'] = $this->language->get('entry_layout'); |
32 |
$this->data['entry_position'] = $this->language->get('entry_position'); |
33 |
$this->data['entry_status'] = $this->language->get('entry_status'); |
34 |
$this->data['entry_sort_order'] = $this->language->get('entry_sort_order'); |
35 |
|
36 |
$this->data['button_save'] = $this->language->get('button_save'); |
37 |
$this->data['button_cancel'] = $this->language->get('button_cancel'); |
38 |
$this->data['button_add_module'] = $this->language->get('button_add_module'); |
39 |
$this->data['button_remove'] = $this->language->get('button_remove'); |
40 |
|
41 |
|
42 |
/* Este bloque retorna avisos si los hay */
|
43 |
if (isset($this->error['warning'])) { |
44 |
$this->data['error_warning'] = $this->error['warning']; |
45 |
} else { |
46 |
$this->data['error_warning'] = ''; |
47 |
}
|
48 |
/* Fin del Bloque */
|
49 |
|
50 |
/* Este bloque retorna código de error si los hay */
|
51 |
if (isset($this->error['code'])) { |
52 |
$this->data['error_code'] = $this->error['code']; |
53 |
} else { |
54 |
$this->data['error_code'] = ''; |
55 |
}
|
56 |
/* Fin del bloque */
|
57 |
|
58 |
|
59 |
/* Hacer que el menú de navegacion "Breadcrumbs" sea mostrado en el sitio */
|
60 |
$this->data['breadcrumbs'] = array(); |
61 |
|
62 |
$this->data['breadcrumbs'][] = array( |
63 |
'text' => $this->language->get('text_home'), |
64 |
'href' => $this->url->link('common/home', 'token=' . $this->session->data['token'], 'SSL'), |
65 |
'separator' => false |
66 |
);
|
67 |
|
68 |
$this->data['breadcrumbs'][] = array( |
69 |
'text' => $this->language->get('text_module'), |
70 |
'href' => $this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL'), |
71 |
'separator' => ' :: ' |
72 |
);
|
73 |
|
74 |
$this->data['breadcrumbs'][] = array( |
75 |
'text' => $this->language->get('heading_title'), |
76 |
'href' => $this->url->link('module/helloworld', 'token=' . $this->session->data['token'], 'SSL'), |
77 |
'separator' => ' :: ' |
78 |
);
|
79 |
|
80 |
/* Fin del bloque Breadcrumb */
|
81 |
|
82 |
$this->data['action'] = $this->url->link('module/helloworld', 'token=' . $this->session->data['token'], 'SSL'); // URL que direccionada cuando se presione el botón de guardar |
83 |
|
84 |
$this->data['cancel'] = $this->url->link('extension/module', 'token=' . $this->session->data['token'], 'SSL'); // URL que direccionada cuando se presione el botón de cancelar |
85 |
|
86 |
|
87 |
/* Este bloque chequea, si el campo de texto de hello world está establecido lo pasa a la vista, si no es así, toma el campo de texto por defecto de hello world de la base de datos y lo pasa */
|
88 |
|
89 |
if (isset($this->request->post['helloworld_text_field'])) { |
90 |
$this->data['helloworld_text_field'] = $this->request->post['helloworld_text_field']; |
91 |
} else { |
92 |
$this->data['helloworld_text_field'] = $this->config->get('helloworld_text_field'); |
93 |
}
|
94 |
/* Fin del bloque */
|
95 |
|
96 |
$this->data['modules'] = array(); |
97 |
|
98 |
/* This block parses the Module Settings such as Layout, Position,Status & Order Status to the view*/
|
99 |
/* Este bloque pasa la Configuración del Módulo como el diseño, Posición, Estado y Estado de la Orden a la vista */
|
100 |
|
101 |
if (isset($this->request->post['helloworld_module'])) { |
102 |
$this->data['modules'] = $this->request->post['helloworld_module']; |
103 |
} elseif ($this->config->get('helloworld_module')) { |
104 |
$this->data['modules'] = $this->config->get('helloworld_module'); |
105 |
}
|
106 |
/* Fin del bloque */
|
107 |
|
108 |
$this->load->model('design/layout'); // Cargando los modelos de diseño |
109 |
|
110 |
$this->data['layouts'] = $this->model_design_layout->getLayouts(); // Obteniendo todos los diseños disponibles en el sistema |
111 |
|
112 |
$this->template = 'module/helloworld.tpl'; // Cargando la plantilla helloworld.tpl |
113 |
$this->children = array( |
114 |
'common/header', |
115 |
'common/footer'
|
116 |
); // Agregar hijo a nuestra plantilla por defecto ejemploplate como es, helloworld.tpl |
117 |
|
118 |
$this->response->setOutput($this->render()); // Reproduciendo la salida en pantalla |
119 |
}
|
120 |
Paso 2: Método de Validación
Como hemos tratado de validar los datos a salvo en la función por defecto. Así que aquí viene el método de validación
1 |
/* Función que valida los datos cuando el botón de Guardar es presionado */
|
2 |
protected function validate() { |
3 |
|
4 |
/* Bloque que chequea los permisos de usuario para manipular el módule */
|
5 |
if (!$this->user->hasPermission('modify', 'module/helloworld')) { |
6 |
$this->error['warning'] = $this->language->get('error_permission'); |
7 |
}
|
8 |
/* Fin del Bloque */
|
9 |
|
10 |
/* Bloque que chequea si el helloworld_text_field está configurado correctamente para guardar en la base de datos, de olo contrario devuelve un error */
|
11 |
if (!$this->request->post['helloworld_text_field']) { |
12 |
$this->error['code'] = $this->language->get('error_code'); |
13 |
}
|
14 |
/* Fin del Bloque */
|
15 |
|
16 |
/* Este bloque devuelve verdadero si ningún error fue encontrado, de otro modo devuelve falso si se detectó cualquier error */
|
17 |
if (!$this->error) { |
18 |
return true; |
19 |
} else { |
20 |
return false; |
21 |
}
|
22 |
/* Fin del Bloque */
|
23 |
}
|
24 |
/* Fin de la función de Validoación*/
|
Ahora guarda el archivo y habrás terminado con el Controlador de Admin de nuestro Módulo Hello World
3. Archivo de la Vista
Como se ha hecho previamente en el controlador, tiene que crear algo de HTML para la vista. Por eso, vamos a hacer lo siguiente:
Paso 1: Construir algunos controles básicos
Un form (Formulario) es un elemento que contendró elementos como input Elemento de Entrada de texto, un textarea (Area de Texto), y botones para guardar o cancelar las entradas de datos.
To create a form like this, review the code below:
Para crear un formulario así, revisa el siguiente código:
1 |
<?php echo $header; ?>
|
2 |
<div id="content"> |
3 |
<div class="breadcrumb"> |
4 |
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
|
5 |
<?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a> |
6 |
<?php } ?>
|
7 |
</div>
|
8 |
<?php if ($error_warning) { ?>
|
9 |
<div class="warning"><?php echo $error_warning; ?></div> |
10 |
<?php } ?>
|
11 |
<div class="box"> |
12 |
<div class="heading"> |
13 |
<h1><img src="view/image/module.png" alt="" /> <?php echo $heading_title; ?></h1> |
14 |
<div class="buttons"><a onclick="$('#form').submit();" class="button"><?php echo $button_save; ?></a><a href="<?php echo $cancel; ?>" class="button"><?php echo $button_cancel; ?></a></div> |
15 |
</div>
|
16 |
<div class="content"> |
17 |
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form"> |
18 |
<table class="form"> |
19 |
<tr>
|
20 |
<td><span class="required">*</span> <?php echo $entry_code; ?></td> |
21 |
<td><textarea name="helloworld_text_field" cols="40" rows="5"><?php echo $helloworld_text_field; ?></textarea> |
22 |
<?php if ($error_code) { ?>
|
23 |
<span class="error"><?php echo $error_code; ?></span> |
24 |
<?php } ?></td> |
25 |
</tr>
|
26 |
</table>
|
Paso 2: Agregando la Lista de Tablas
Bajo form, una lista de table aparecerá en el que podemos establecer la posición del módulo y la página donde el módulo será mostrado.
1 |
<table id="module" class="list"> |
2 |
<thead>
|
3 |
<tr>
|
4 |
<td class="left"><?php echo $entry_layout; ?></td> |
5 |
<td class="left"><?php echo $entry_position; ?></td> |
6 |
<td class="left"><?php echo $entry_status; ?></td> |
7 |
<td class="right"><?php echo $entry_sort_order; ?></td> |
8 |
<td></td>
|
9 |
</tr>
|
10 |
</thead>
|
11 |
<?php $module_row = 0; ?>
|
12 |
<?php foreach ($modules as $module) { ?>
|
13 |
<tbody id="module-row<?php echo $module_row; ?>"> |
14 |
<tr>
|
15 |
<td class="left"><select name="helloworld_module[<?php echo $module_row; ?>][layout_id]"> |
16 |
<?php foreach ($layouts as $layout) { ?>
|
17 |
<?php if ($layout['layout_id'] == $module['layout_id']) { ?>
|
18 |
<option value="<?php echo $layout['layout_id']; ?>" selected="selected"><?php echo $layout['name']; ?></option> |
19 |
<?php } else { ?>
|
20 |
<option value="<?php echo $layout['layout_id']; ?>"><?php echo $layout['name']; ?></option> |
21 |
<?php } ?>
|
22 |
<?php } ?>
|
23 |
</select></td>
|
24 |
<td class="left"><select name="helloworld_module[<?php echo $module_row; ?>][position]"> |
25 |
<?php if ($module['position'] == 'content_top') { ?>
|
26 |
<option value="content_top" selected="selected"><?php echo $text_content_top; ?></option> |
27 |
<?php } else { ?>
|
28 |
<option value="content_top"><?php echo $text_content_top; ?></option> |
29 |
<?php } ?>
|
30 |
<?php if ($module['position'] == 'content_bottom') { ?>
|
31 |
<option value="content_bottom" selected="selected"><?php echo $text_content_bottom; ?></option> |
32 |
<?php } else { ?>
|
33 |
<option value="content_bottom"><?php echo $text_content_bottom; ?></option> |
34 |
<?php } ?>
|
35 |
<?php if ($module['position'] == 'column_left') { ?>
|
36 |
<option value="column_left" selected="selected"><?php echo $text_column_left; ?></option> |
37 |
<?php } else { ?>
|
38 |
<option value="column_left"><?php echo $text_column_left; ?></option> |
39 |
<?php } ?>
|
40 |
<?php if ($module['position'] == 'column_right') { ?>
|
41 |
<option value="column_right" selected="selected"><?php echo $text_column_right; ?></option> |
42 |
<?php } else { ?>
|
43 |
<option value="column_right"><?php echo $text_column_right; ?></option> |
44 |
<?php } ?>
|
45 |
</select></td>
|
46 |
<td class="left"><select name="helloworld_module[<?php echo $module_row; ?>][status]"> |
47 |
<?php if ($module['status']) { ?>
|
48 |
<option value="1" selected="selected"><?php echo $text_enabled; ?></option> |
49 |
<option value="0"><?php echo $text_disabled; ?></option> |
50 |
<?php } else { ?>
|
51 |
<option value="1"><?php echo $text_enabled; ?></option> |
52 |
<option value="0" selected="selected"><?php echo $text_disabled; ?></option> |
53 |
<?php } ?>
|
54 |
</select></td>
|
55 |
<td class="right"><input type="text" name="helloworld_module[<?php echo $module_row; ?>][sort_order]" value="<?php echo $module['sort_order']; ?>" size="3" /></td> |
56 |
<td class="left"><a onclick="$('#module-row<?php echo $module_row; ?>').remove();" class="button"><?php echo $button_remove; ?></a></td> |
57 |
</tr>
|
58 |
</tbody>
|
59 |
<?php $module_row++; ?>
|
60 |
<?php } ?>
|
61 |
<tfoot>
|
62 |
<tr>
|
63 |
<td colspan="4"></td> |
64 |
<td class="left"><a onclick="addModule();" class="button"><?php echo $button_add_module; ?></a></td> |
65 |
</tr>
|
66 |
</tfoot>
|
67 |
</table>
|
68 |
</form>
|
69 |
</div>
|
70 |
</div>
|
71 |
</div>
|
Paso 3: Agregar algo de JavaScript
Como puedes ver en el paso anterior, hay un botón "Add Module" (Agregar Módulo). Específico, tenemos: <a onclick="addModule();" class="button"><?php echo $button_add_module; ?></a> donde el usuario puede agregar múltiples filas para mostrar la salida del módulo en diferentes diseños sobre posiciones diferentes.
Por eso, tenemos que escribir algo de código JavaScript que se anexará una fila a la lista de la tabla. Esto mejorará la interfaz de usuario para los que utilicen nuestro módulo:
1 |
<script type="text/javascript"><!-- |
2 |
var module_row = <?php echo $module_row; ?>; |
3 |
|
4 |
function addModule() { |
5 |
html = '<tbody id="module-row' + module_row + '">'; |
6 |
html += ' <tr>'; |
7 |
html += ' <td class="left"><select name="helloworld_module[' + module_row + '][layout_id]">'; |
8 |
<?php foreach ($layouts as $layout) { ?> |
9 |
html += ' <option value="<?php echo $layout['layout_id']; ?>"><?php echo addslashes($layout['name']); ?></option>'; |
10 |
<?php } ?> |
11 |
html += ' </select></td>'; |
12 |
html += ' <td class="left"><select name="helloworld_module[' + module_row + '][position]">'; |
13 |
html += ' <option value="content_top"><?php echo $text_content_top; ?></option>'; |
14 |
html += ' <option value="content_bottom"><?php echo $text_content_bottom; ?></option>'; |
15 |
html += ' <option value="column_left"><?php echo $text_column_left; ?></option>'; |
16 |
html += ' <option value="column_right"><?php echo $text_column_right; ?></option>'; |
17 |
html += ' </select></td>'; |
18 |
html += ' <td class="left"><select name="helloworld_module[' + module_row + '][status]">'; |
19 |
html += ' <option value="1" selected="selected"><?php echo $text_enabled; ?></option>'; |
20 |
html += ' <option value="0"><?php echo $text_disabled; ?></option>'; |
21 |
html += ' </select></td>'; |
22 |
html += ' <td class="right"><input type="text" name="helloworld_module[' + module_row + '][sort_order]" value="" size="3" /></td>'; |
23 |
html += ' <td class="left"><a onclick="$(\'#module-row' + module_row + '\').remove();" class="button"><?php echo $button_remove; ?></a></td>'; |
24 |
html += ' </tr>'; |
25 |
html += '</tbody>'; |
26 |
|
27 |
$('#module tfoot').before(html); |
28 |
|
29 |
module_row++; |
30 |
}
|
31 |
//--></script>
|
Paso 4: Agregando el Pie de Página
La última cosa, necesitamos un hijo del pie de página al final de la vista
1 |
<?php echo $footer; ?> |
A este punto, hemos terminado nuestro primer módulo Hello World (Hola Mundo). Ahora es tiempo de chequear si nuestro módulo trabaja o no.
Para esto, inicia sección y ve a la página Extensions > Modules (Extensiones y Módulos) donde verás una lista de los módulos del Sistema de OpenCart. Allí también estará "Hello World" listado con estado desintalado ("Unistalled"), clic en "Install" (Instalar) y trata de editar el módulo y verás una pantalla como esta:
Puedes entrar algún valor aleatoreo e intenta guardarlo. Ahora intenta editar el módulo de nuevo y verás tus datos entrados por defecto
Conclusión
En este artículo, hemos intentado construir un Módulo básico de OpenCart usando MVC. Es fácil manipular Módulos de OpenCart si estás familiarizado con los conceptos principales de MVC. Este artículo te da la idea básica de como desarrollar un módulo simple siguiendo algunos simples pasos.
En nuestro próximo artículo, vamos a trabajar con la interfaz de ususario y trataremos de extenderla para la tienda de la interfaz. Por favor déjenos sus comentarios en la sección de comentarios.
¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!
