От начинающего до продвинутого в OpenCart: разработка модулей

11 января 2018

В предыдущих статьях мы рассмотрели архитектуру MVC и создали наш первый контроллер, модель и представление в приложении OpenCart. Мы сделали это, чтобы помочь лучше понять основное приложение.

Чтобы сделать шаг вперед, мы рассмотрим создание настраиваемого модуля для OpenCart.

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

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

Как и во многих других системах управления контентом, обычно считается лучшей практикой расширения функциональности основного приложения через предоставленные API и OpenCart. Модули позволяют нам вводить, удалять или изменять функциональные возможности основного приложения, которые выполняются разделенным и поддерживаемым способом.

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

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

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

Чтобы получить акклиматизацию с помощью модульной системы OpenCart, мы можем написать обязательный модуль «Hello World». Это приведет к вводу информации из панели управления и отобразит ее на интерфейсе сайта.

Обратите внимание, что OpenCart имеет несколько модулей предварительной сборки. Таким образом, мы попытаемся использовать их, когда это возможно, когда мы будем работать самостоятельно. Чтобы начать работу, выполните следующие действия:

    Создание контроллера для пути администратора: модуль контроллера администратора helloworld.php. NСоздание языкового файла для администратора Путь: admin language english module helloworld.php. NСоздание вида для пути администратора: admin view template module helloworld.tpl.

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';
?>

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

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

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

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

Теперь сохраните файл, и вы сделаете это с помощью Admin Controller нашего модуля Hello World!

3. Просмотр файла

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

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

Форма - это элемент, который будет содержать элементы, такие как элемент ввода текста, текстовую область и кнопки для сохранения или отмены ввода.

Чтобы создать форму, подобную этой, просмотрите приведенный ниже код:

<?php echo $header; ?>
<div id="content">
  <div class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
    <?php } ?>
  </div>
  <?php if ($error_warning) { ?>
  <div class="warning"><?php echo $error_warning; ?></div>
  <?php } ?>
  <div class="box">
    <div class="heading">
      <h1><img src="view/image/module.png" alt="" /> <?php echo $heading_title; ?></h1>
      <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>
    </div>
    <div class="content">
      <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
        <table class="form">
          <tr>
            <td><span class="required">*</span> <?php echo $entry_code; ?></td>
            <td><textarea name="helloworld_text_field" cols="40" rows="5"><?php echo $helloworld_text_field; ?></textarea>
              <?php if ($error_code) { ?>
              <span class="error"><?php echo $error_code; ?></span>
              <?php } ?></td>
          </tr>
        </table>

Шаг 2: Добавление списка таблиц

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

<table id="module" class="list">
          <thead>
            <tr>
              <td class="left"><?php echo $entry_layout; ?></td>
              <td class="left"><?php echo $entry_position; ?></td>
              <td class="left"><?php echo $entry_status; ?></td>
              <td class="right"><?php echo $entry_sort_order; ?></td>
              <td></td>
            </tr>
          </thead>
          <?php $module_row = 0; ?>
          <?php foreach ($modules as $module) { ?>
          <tbody id="module-row<?php echo $module_row; ?>">
            <tr>
              <td class="left"><select name="helloworld_module[<?php echo $module_row; ?>][layout_id]">
                  <?php foreach ($layouts as $layout) { ?>
                  <?php if ($layout['layout_id'] == $module['layout_id']) { ?>
                  <option value="<?php echo $layout['layout_id']; ?>" selected="selected"><?php echo $layout['name']; ?></option>
                  <?php } else { ?>
                  <option value="<?php echo $layout['layout_id']; ?>"><?php echo $layout['name']; ?></option>
                  <?php } ?>
                  <?php } ?>
                </select></td>
              <td class="left"><select name="helloworld_module[<?php echo $module_row; ?>][position]">
                  <?php if ($module['position'] == 'content_top') { ?>
                  <option value="content_top" selected="selected"><?php echo $text_content_top; ?></option>
                  <?php } else { ?>
                  <option value="content_top"><?php echo $text_content_top; ?></option>
                  <?php } ?>
                  <?php if ($module['position'] == 'content_bottom') { ?>
                  <option value="content_bottom" selected="selected"><?php echo $text_content_bottom; ?></option>
                  <?php } else { ?>
                  <option value="content_bottom"><?php echo $text_content_bottom; ?></option>
                  <?php } ?>
                  <?php if ($module['position'] == 'column_left') { ?>
                  <option value="column_left" selected="selected"><?php echo $text_column_left; ?></option>
                  <?php } else { ?>
                  <option value="column_left"><?php echo $text_column_left; ?></option>
                  <?php } ?>
                  <?php if ($module['position'] == 'column_right') { ?>
                  <option value="column_right" selected="selected"><?php echo $text_column_right; ?></option>
                  <?php } else { ?>
                  <option value="column_right"><?php echo $text_column_right; ?></option>
                  <?php } ?>
                </select></td>
              <td class="left"><select name="helloworld_module[<?php echo $module_row; ?>][status]">
                  <?php if ($module['status']) { ?>
                  <option value="1" selected="selected"><?php echo $text_enabled; ?></option>
                  <option value="0"><?php echo $text_disabled; ?></option>
                  <?php } else { ?>
                  <option value="1"><?php echo $text_enabled; ?></option>
                  <option value="0" selected="selected"><?php echo $text_disabled; ?></option>
                  <?php } ?>
                </select></td>
              <td class="right"><input type="text" name="helloworld_module[<?php echo $module_row; ?>][sort_order]" value="<?php echo $module['sort_order']; ?>" size="3" /></td>
              <td class="left"><a onclick="$('#module-row<?php echo $module_row; ?>').remove();" class="button"><?php echo $button_remove; ?></a></td>
            </tr>
          </tbody>
          <?php $module_row++; ?>
          <?php } ?>
          <tfoot>
            <tr>
              <td colspan="4"></td>
              <td class="left"><a onclick="addModule();" class="button"><?php echo $button_add_module; ?></a></td>
            </tr>
          </tfoot>
        </table>
      </form>
    </div>
  </div>
</div>

Шаг 3: Добавление некоторых JavaScript

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

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

<script type="text/javascript"><!--
var module_row = <?php echo $module_row; ?>;
function addModule() {   
    html  = '<tbody id="module-row' + module_row + '">';
    html += '  <tr>';
    html += '    <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>';
    html += '    <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>';
    html += '    <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>';
    html += '    <td class="right"><input type="text" name="helloworld_module[' + module_row + '][sort_order]" value="" size="3" /></td>';
    html += '    <td class="left"><a onclick="$('#module-row' + module_row + '').remove();" class="button"><?php echo $button_remove; ?></a></td>';
    html += '  </tr>';
    html += '</tbody>';
    $('#module tfoot').before(html);
    module_row++;
}
//--></script>

Шаг 4: Добавление нижнего колонтитула

. Последнее, нам нужно добавить нижний нижний колонтитул в конце представления:

<?php echo $footer; ?>

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

Для этого войдите в панель управления и перейдите на страницу «Расширения> Модули», где вы увидите список модулей OpenCart System. Там также будет "Hello World ", который указан в статусе "Uninstalled ", нажмите кнопку "Install " и попробуйте отредактировать модуль, и вы увидите на экране что-то вроде этого:

введите некоторое случайное значение и попробуйте сохранить его. Теперь попробуйте снова отредактировать модуль, и вы увидите, что введенный вами ввод по умолчанию.

Заключение

В этой статье мы попытались создать базовый модуль OpenCart с использованием MVC. Легко манипулировать модулями OpenCart, если вы знакомы с основными концепциями MVC. В этой статье дается просто базовая идея о том, как разработать простой модуль, следуя нескольким простым шагам.

В нашей следующей статье мы будем работать с интерфейсом и попытаемся расширить его для внешнего интерфейса магазина. Пожалуйста, сообщите нам свои отзывы в комментариях ниже!