От новичка до продвинутого пользователя Opencart (Часть 6) — Разработка модулей

Оригинал данной статьи находится здесь: From Beginner to Advanced in OpenCart: Module Development

Разработка модулей

Что такое модули Opencart?

Модули Opencart подобны аддонам, плагинам или расширениям в других системах управления контентом (CMS). С помощью модулей Opencart дает нам возможность расширять свою функциональность без необходимости редактирования файлов приложения.

Как и многие другие системы управления контентом, наилучшем считается расширение возможностей системы с помощью разработки и установки модулей, нежели прямого редактирования кода ядра Opencart.

Модули позволяют нам представлять, удалять или модифицировать функциональность ядра приложения, которое производится в разобщенном и пригодном для изменений виде.

Opencart имеет свой собственный магазин расширений, где уже доступно большое количество расширений. Или вы можете взглянуть на широкий ассортимент модулей и расширений Opencart в магазине Envato.

Если вам нужно выполнить некое действие в Opencart и вы не хотите или не можете это сделать вручную, то попробуйте один из крутейших сервисов для настройки Opencart в Envato Studio.

Наш первый модуль

Для того, чтобы привыкнуть к модульной системе Opencart, мы можем написать модуль под названием «Hello World». Он получает данные из Панели администратора и отображает их на страницах сайта.

Заметьте, что Opencart имеет которое количество предустановленных модулей. Для того, чтобы начать сделайте следующее:

1. Создайте Контроллер в папках администратора:

admin/controller/module/helloworld.php.

2. Создайте Языковой файл в папках администратора:

admin/language/english/module/helloworld.php.

3. Создайте Вид в папках администратора:

admin/view/template/module/helloworld.tpl (или .twig).

1. Языковой файл

Как уже было сказано в наших предыдущих статьях, языковой файл содержит статический текст, который должен быть отображен в нашем файле вида. Для языкового файла helloworld.php, следующие переменные содержат возможные текстовые поля, которые нам требуется отобразить в нашем модуле:

<!--?php // Heading $_['heading_title'] = 'Hello World'; // Text $_['text_module'] = 'Modules'; $_['text_success'] = 'Success: You have modified module Hello World!'; $_['text_content_top'] = 'Content Top'; $_['text_content_bottom'] = 'Content Bottom'; $_['text_column_left'] = 'Column Left'; $_['text_column_right'] = 'Column Right'; // Entry $_['entry_code'] = 'Hello World Code:'; $_['entry_layout'] = 'Layout:'; $_['entry_position'] = 'Position:'; $_['entry_status'] = 'Status:'; $_['entry_sort_order'] = 'Sort Order:'; // Error $_['error_permission'] = 'Warning: You do not have permission to modify module Hello World!'; $_['error_code'] = 'Code Required'; ?-->

2. Контроллер

Откройте файл контроллера «Hello World», который мы только что создали и добавьте класс class ControllerModuleHelloworld extends Controller { }, следуя соглашению об именовании классов. Затем, разместите следующий код внутри этого класса.

Шаг 1: Функция по умолчанию

private $error = array(); // This is used to set the errors, if any.
 
public function index() {   // Default function 
    $this-&gt;language-&gt;load('module/helloworld'); // Loading the language file of helloworld 
 
    $this-&gt;document-&gt;setTitle($this-&gt;language-&gt;get('heading_title')); // Set the title of the page to the heading title in the Language file i.e., Hello World
 
    $this-&gt;load-&gt;model('setting/setting'); // Load the Setting Model  (All of the OpenCart Module &amp; General Settings are saved using this Model ) 
 
    if (($this-&gt;request-&gt;server['REQUEST_METHOD'] == 'POST') &amp;&amp; $this-&gt;validate()) { // Start If: Validates and check if data is coming by save (POST) method
        $this-&gt;model_setting_setting-&gt;editSetting('helloworld', $this-&gt;request-&gt;post);      // Parse all the coming data to Setting Model to save it in database.
 
        $this-&gt;session-&gt;data['success'] = $this-&gt;language-&gt;get('text_success'); // To display the success text on data save
 
        $this-&gt;redirect($this-&gt;url-&gt;link('extension/module', 'token=' . $this-&gt;session-&gt;data['token'], 'SSL')); // Redirect to the Module Listing
    } // End If
 
    /*Assign the language data for parsing it to view*/
    $this-&gt;data['heading_title'] = $this-&gt;language-&gt;get('heading_title');
 
    $this-&gt;data['text_enabled'] = $this-&gt;language-&gt;get('text_enabled');
    $this-&gt;data['text_disabled'] = $this-&gt;language-&gt;get('text_disabled');
    $this-&gt;data['text_content_top'] = $this-&gt;language-&gt;get('text_content_top');
    $this-&gt;data['text_content_bottom'] = $this-&gt;language-&gt;get('text_content_bottom');      
    $this-&gt;data['text_column_left'] = $this-&gt;language-&gt;get('text_column_left');
    $this-&gt;data['text_column_right'] = $this-&gt;language-&gt;get('text_column_right');
 
    $this-&gt;data['entry_code'] = $this-&gt;language-&gt;get('entry_code');
    $this-&gt;data['entry_layout'] = $this-&gt;language-&gt;get('entry_layout');
    $this-&gt;data['entry_position'] = $this-&gt;language-&gt;get('entry_position');
    $this-&gt;data['entry_status'] = $this-&gt;language-&gt;get('entry_status');
    $this-&gt;data['entry_sort_order'] = $this-&gt;language-&gt;get('entry_sort_order');
 
    $this-&gt;data['button_save'] = $this-&gt;language-&gt;get('button_save');
    $this-&gt;data['button_cancel'] = $this-&gt;language-&gt;get('button_cancel');
    $this-&gt;data['button_add_module'] = $this-&gt;language-&gt;get('button_add_module');
    $this-&gt;data['button_remove'] = $this-&gt;language-&gt;get('button_remove');     
 
    /*This Block returns the warning if any*/
    if (isset($this-&gt;error['warning'])) {
        $this-&gt;data['error_warning'] = $this-&gt;error['warning'];
    } else {
        $this-&gt;data['error_warning'] = '';
    }
    /*End Block*/
 
    /*This Block returns the error code if any*/
    if (isset($this-&gt;error['code'])) {
        $this-&gt;data['error_code'] = $this-&gt;error['code'];
    } else {
        $this-&gt;data['error_code'] = '';
    }
    /*End Block*/ 
 
    /* Making of Breadcrumbs to be displayed on site*/
    $this-&gt;data['breadcrumbs'] = array();
 
    $this-&gt;data['breadcrumbs'][] = array(
        'text'      =&gt; $this-&gt;language-&gt;get('text_home'),
        'href'      =&gt; $this-&gt;url-&gt;link('common/home', 'token=' . $this-&gt;session-&gt;data['token'], 'SSL'),
        'separator' =&gt; false
    );
 
    $this-&gt;data['breadcrumbs'][] = array(
        'text'      =&gt; $this-&gt;language-&gt;get('text_module'),
        'href'      =&gt; $this-&gt;url-&gt;link('extension/module', 'token=' . $this-&gt;session-&gt;data['token'], 'SSL'),
        'separator' =&gt; ' :: '
    );
 
    $this-&gt;data['breadcrumbs'][] = array(
        'text'      =&gt; $this-&gt;language-&gt;get('heading_title'),
        'href'      =&gt; $this-&gt;url-&gt;link('module/helloworld', 'token=' . $this-&gt;session-&gt;data['token'], 'SSL'),
        'separator' =&gt; ' :: '
    );
 
    /* End Breadcrumb Block*/
 
    $this-&gt;data['action'] = $this-&gt;url-&gt;link('module/helloworld', 'token=' . $this-&gt;session-&gt;data['token'], 'SSL'); // URL to be directed when the save button is pressed
 
    $this-&gt;data['cancel'] = $this-&gt;url-&gt;link('extension/module', 'token=' . $this-&gt;session-&gt;data['token'], 'SSL'); // URL to be redirected when cancel button is pressed 
 
    /* This block checks, if the hello world text field is set it parses it to view otherwise get the default hello world text field from the database and parse it*/
 
    if (isset($this-&gt;request-&gt;post['helloworld_text_field'])) {
        $this-&gt;data['helloworld_text_field'] = $this-&gt;request-&gt;post['helloworld_text_field'];
    } else {
        $this-&gt;data['helloworld_text_field'] = $this-&gt;config-&gt;get('helloworld_text_field');
    }   
    /* End Block*/
 
    $this-&gt;data['modules'] = array();
 
    /* This block parses the Module Settings such as Layout, Position,Status &amp; Order Status to the view*/
    if (isset($this-&gt;request-&gt;post['helloworld_module'])) {
        $this-&gt;data['modules'] = $this-&gt;request-&gt;post['helloworld_module'];
    } elseif ($this-&gt;config-&gt;get('helloworld_module')) { 
        $this-&gt;data['modules'] = $this-&gt;config-&gt;get('helloworld_module');
    }
    /* End Block*/         
 
    $this-&gt;load-&gt;model('design/layout'); // Loading the Design Layout Models
 
    $this-&gt;data['layouts'] = $this-&gt;model_design_layout-&gt;getLayouts(); // Getting all the Layouts available on system
 
    $this-&gt;template = 'module/helloworld.tpl'; // Loading the helloworld.tpl template
    $this-&gt;children = array(
        'common/header',
        'common/footer'
    );  // Adding children to our default template i.e., helloworld.tpl 
 
    $this-&gt;response-&gt;setOutput($this-&gt;render()); // Rendering the Output
}

Шаг 2: Метод валидации

Поскольку мы пытаемся провести валидацию данных в нашей функции, то вот реализация метода валидации:

/* Function that validates the data when Save Button is pressed */
    protected function validate() { 
        /* Block to check the user permission to manipulate the module*/
        if (!$this-&gt;user-&gt;hasPermission('modify', 'module/helloworld')) {
            $this-&gt;error['warning'] = $this-&gt;language-&gt;get('error_permission');
        }
        /* End Block*/
 
        /* Block to check if the helloworld_text_field is properly set to save into database, otherwise the error is returned*/
        if (!$this-&gt;request-&gt;post['helloworld_text_field']) {
            $this-&gt;error['code'] = $this-&gt;language-&gt;get('error_code');
        }
        /* End Block*/
 
        /*Block returns true if no error is found, else false if any error detected*/
        if (!$this-&gt;error) {
            return true;
        } else {
            return false;
        }   
        /* End Block*/
    }
    /* End Validation Function*/

А теперь сохраните этот файл. Всё, мы закончили с контроллером нашего модуля для панели администратора!

3. Файл Вида

Как уже было сказано относительно контроллера, вы должны создать некоторый HTML-код для вашего вида. Для этого мы выполним следующее:

Шаг 1: Создадим некоторые базовые элементы управления

form это элемент, который содержит элементы вроде input для ввода текста, textarea, и кнопки для сохранения или отмены ввода.

Для создания формы подобной этой, взгляните на следующий код:

 

 

 

 

 

 

 

 

 

*

 

Версия для файла вида .twig:

{{ header }}

 

{{% if error_warning %}}

{{ error_warning }}

{{% endif %}}

 

 

{{ heading_title }}

 

 

 

 

 

* {{ entry_code }} {{% if error_code %}} {{ error_code }} {{% endif %}}

 

Шаг 2: Добавляем таблицу в виде списка

Внутри тега form будет отображаться список table, где мы можем разместить позицию модуля и страницу, на которую следует отображать данный модуль.

 

 

Шаг №3: Добавляем JavaScript-код

Как вы уже увидели на предыдущем шаге, у нас есть кнопка «Add Module». В частности, мы имеем: , где пользователь может добавлять различные строки для отображения модуля в различных раскладках на различных позициях.

Для этого, нам нужно написать который JavaScript-код, который будет добавлять строку в список таблицы. Это улучшит интерфейс пользователя для тех, кто будет использовать наш модуль:

<script type="text/javascript"><!--
var module_row = <?php echo $module_row; ?>;
function addModule() {
html = '</p>
<tbody id="module-row' + module_row + '">';
html += ' </p>
<tr>';
html += ' </p>
<td class="left"><select name="helloworld_module[' + module_row + '][layout_id]">';
<?php foreach ($layouts as $layout) { ?>
html += '<option value="<?php echo $layout['layout_id']; ?>"><?php echo addslashes($layout['name']); ?></option>';
<?php } ?>
html += ' </select></td>
<p>';
html += ' </p>
<td class="left"><select name="helloworld_module[' + module_row + '][position]">';
html += '<option value="content_top"><?php echo $text_content_top; ?></option>';
html += '<option value="content_bottom"><?php echo $text_content_bottom; ?></option>';
html += '<option value="column_left"><?php echo $text_column_left; ?></option>';
html += '<option value="column_right"><?php echo $text_column_right; ?></option>';
html += ' </select></td>
<p>';
html += ' </p>
<td class="left"><select name="helloworld_module[' + module_row + '][status]">';
html += '<option value="1" selected="selected"><?php echo $text_enabled; ?></option>';
html += '<option value="0"><?php echo $text_disabled; ?></option>';
html += ' </select></td>
<p>';
html += ' </p>
<td class="right"><input type="text" name="helloworld_module[' + module_row + '][sort_order]" value="" size="3" /></td>
<p>';
html += ' </p>
<td class="left"><a onclick="$(\'#module-row' + module_row + '\').remove();" class="button"><?php echo $button_remove; ?></a></td>
<p>';
html += ' </tr>
<p>';
html += '</tbody>
<p>';
$('#module tfoot').before(html);
module_row++;
}
//-→</script>

Шаг 4: Добавление футера

Последнее, что нам необходимо сделать, это добавить в конце файла вида футер:

 <!--?php echo $footer; ?-->

В этой точке, мы закончили создавать наш первый модуль Hello World. И теперь пришло время проверить работает наш модуль или нет.

Для того, чтобы это сделать, необходимо войти в панель администратора и перейти на страницу Extensions > Modules, где вы увидите список модулей системы Opencart. Здесь также будет отображаться наш модуль «Hello World» с состоянием «Uninstalled». Нажмите на «Install» и попытайтесь отредактировать этот модуль и вы увидите экран, подобный этому:

Вы можете кто-нибудь ввести и попытаться сохранить здесь. А теперь попытайтесь снова отредактировать модуль и вы увидите, что ваш ввод установлен как значение по умолчанию.

Заключение

В данной статье мы попытались создать простой модуль Opencart с использованием MVC. Если вы знакомы с ключевыми концепциями MVC, то вам будет очень легко управлять модулями Opencart. Данная статья дает всего-лишь базовую идею того, как разрабатывать простой модуль, следуя некоторым простым шагам.

Добавить комментарий