Статьи

Создайте бесконечный список прокрутки для OXID eShop — Основы

Сентябрь 28, 2018

OXID eShop , официально известный как OXID eSales , является мощной и масштабируемой стандартной платформой электронной коммерции, оптимизированной для каждого сегмента онлайн-бизнеса. Как разработчик, проводящий большинство моих задач «9–5» с OXID, я обнаружил, что эту систему электронной коммерции чрезвычайно легко настраивать и расширять.

Если вы новичок в OXID или ищете простую, но эффективную платформу для собственного онлайн-бизнеса, я рекомендую вам прочитать серию статей Мэтью Сеттера о OXID eSales , в которой предлагается стандартная реализация для начала работы с системой OXID.

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

Вот чего вы добьетесь.

Весь исходный код будет доступен в конце серии.

Обучающие программы будут охватывать следующие области:

Часть 1:

  • Создание правильной структуры папок для нового расширения модуля.
  • Работа с metadata.php для:
    • Расширьте необходимый контроллер.
    • Замените существующий шаблон новым шаблоном.
    • Добавьте новый параметр конфигурации модуля.
  • Как работать с внутренними языковыми файлами для создания отображаемого имени и текста справки для настроек модуля.
  • Работа с новым модулем контроллера.

Часть 2:

  • Работа с новым шаблоном:
    • Как правильно получить URL модуля.
    • Перейдем к работе с механизмом шаблонов OXID.
    • Добавление контента для нового шаблона.
  • Добавление JavaScript для обработки бесконечной прокрутки в списке статей.
  • Обновление представлений базы данных и активация модуля.

Примечание : я предполагаю, что у вас есть некоторый опыт работы с OXID eShop (если нет, см. Статью Мэтью, приведенную выше). Таким образом, не будет большого объяснения основных понятий OXID.

Структура папки модуля OXID

Самая важная задача, которую вы должны сделать в первую очередь, — создать стандартную структуру папок.

  • Пожалуйста, перейдите в {your_web_root} / Oxid / modules /
  • Создайте новую папку с именем aho_infinitescroll, за которой следуют ее последующие папки / файлы. 
 aho_infinitescroll/ | |--- controllers/ | |-- aho_infinite_alist.php # A new controller that extends alist.php | |--- out/ | |--admin/ | |--en/ | |-- aho_infinitescroll_lang.php # Back-end English text. | |--de/ | |-- aho_infinitescroll_lang.php # Back-end Deustch text. | | |--css/ | |--> infinitescroll.css # Style for infinite scrolling elements. | | |--img/ | |--> ajax-loader.gif # image indicates the loading status. | |--js/ | |--- translations/ | |--de/ | |--> aho_infinitescroll_lang.php # Front-end Deustch text. | |--en/ | |--> aho_infinitescroll_lang.php # Front-end English text. | |--- views/ | |-- page/ | |-- list/ | |--> aho_infinitescroll_list.tpl # new template file. | |--- metadata.php # Define extension name, classes and other infos. |--- picture.jpg # A thumbnail for the module's functionality.

НОТА:
Наилучшая практика присвоения имени новому модулю — объединение имени поставщика / разработчика / группы и функциональности модуля. Это помогает мгновенно выявить поставщика и функциональность нового модуля для совместной работы команды.
Таким образом, формула может быть следующей:

название поставщика + подчеркивание + функциональность

  • то есть: sitepoint_infinitescroll

Имя поставщика может быть заменено либо developer name либо developer name group name . Тебе решать.

Работа с Metadata.php

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

Пожалуйста, откройте файл metadata.php и добавьте в него следующие строки кода: 

 <?php $sMetadataVersion = '1.0'; # Define version of this file

  • Мы только что вставили базовую информацию для нашего нового модуля, и все элементы являются информативными по своим терминам.

  • Обратите внимание, что id и title являются обязательными переменными. В частности, значение id должно совпадать с именем папки модуля.

  • thumbnail — это необязательный элемент, который визуально описывает ваш модуль. Я обычно готовлю красивый эскиз, потому что считаю, что картинка стоит тысячи слов. Иногда вы намереваетесь продать некоторые из ваших любимых модулей собственной разработки через рынок OXID, и улучшенный эскиз привлекает больше покупателей.

Далее, мы собираемся определить еще несколько элементов, сразу после email . 

 'extend' => array( 'alist' => 'aho_infinitescroll/controllers/aho_infinitescroll_alist' ), 'templates' => array( 'aho_infinitescroll_list.tpl' => 'aho_infinitescroll/views/page/list/aho_infinitescroll_list.tpl' )

  • Значение extend указывает конкретный класс ядра / контроллера, из которого будет расширяться новый модуль. В этом случае это будет alist.php , расположенный по адресу /oxid/application/controllers/ .

  • Значения templates — это массив, в котором хранятся все зарегистрированные шаблоны нового модуля. Рекомендуется создать ту же структуру папок шаблона, который необходимо заменить, для облегчения совместной работы команды. Обратите внимание, что элементы и значения templates должны включать расширение имени файла .tpl

    ПРИМЕЧАНИЕ :

    • Правильный способ назвать новый шаблон « module name + _ + the old template name »
    • то есть: aho_infinitescroll_list.tpl

В данный момент мы оставляем новый файл шаблона пустым и продолжаем работу с файлом metadata.php . Пожалуйста, вставьте массив под названием settings сразу после templates элементов: 

 'settings' => array( array( 'group' => 'aho_infinitescroll', 'name' => 'sInfiniteScrollListType', 'type' => 'str', 'value' => 'line' ) )

  • Значение settings — это место для регистрации всех параметров конфигурации нового модуля. group всегда имеет значение, идентичное идентификатору модуля.

  • Значение: этот новый параметр помогает управлять типом представления списка. В рамках этого урока я установлю значение по умолчанию в виде line и буду использовать его до конца.

  • Когда мы активируем модуль в первый раз, этот параметр вставляется в две таблицы oxconfig и oxconfigdisplay . OXID автоматически вставит module:aho_infinitescroll значения module:aho_infinitescroll в столбцы OXMODULE (таблица oxconfig ) и OXCFGMODULE (таблица oxconfigdisplay) с module:aho_infinitescroll значения module:aho_infinitescroll . Это очень удобно, так как это происходит автоматически.

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

Далее мы смотрим на внутренние переводы.

Добавление внутренних переводов

В последнем разделе мы добавили настройки для нового модуля. Теперь пришло время поработать с его переводом.
Пожалуйста, откройте файл aho_infinitescroll/out/admin/en/aho_infinitescroll_lang.php и добавьте в него следующие строки. 

 <?php $sLangName = 'English'; // English or Deustch $aLang = array( 'charset' => 'UTF-8', 'SHOP_MODULE_GROUP_aho_infinitescroll' => 'Settings', 'SHOP_MODULE_sInfiniteScrollListType' => 'Select the type of list that will be applied for infinite scrolling.', 'HELP_SHOP_MODULE_sInfiniteScrollListType' => 'OXID supports 3 default view types as `line`,`grid` and `infogrid`. If you define an extra view type, make sure it has been created in your shop directory.' );

  • Синтаксис для добавления перевода для опции конфигурации SHOP_MODULE + _ + setting_column_name .

  • Синтаксис для добавления текста справки для параметра конфигурации HELP_SHOP_MODULE + _ + setting_colum_name .

Вышеуказанные строки кодов приведут к выводу, как на рисунке ниже. Позже, когда вы активируете модуль, введите line в текстовое поле:

"view option"

Пожалуйста, сделайте то же самое для файла aho_infinitescroll/out/admin/de/aho_infinitescroll_lang.php . Присвойте переменную $sLangName значению Deustch и попросите кого-нибудь, специализирующегося на языке, перевести весь текст на немецкий язык или просто добавить туда тарабарщину, если она отличается от английского, чтобы вы могли увидеть разницу.

Работа с новым контроллером

Пожалуйста, откройте aho_infinitescroll/controllers/aho_infinite_alist.php и добавьте в него следующие строки: 

 <?php class aho_infinitescroll_alist extends aho_infinitescroll_alist_parent { protected $_sThisTemplate = 'aho_infinitescroll_list.tpl'; /** * @Todo: Change the template view * @return string */ public function render(){ parent::render(); return $this->_sThisTemplate; } /** @Todo: Get the module option of view type * @return string */ public function getViewTypeList(){ return $this->getConfig()->getConfigParam('sInfiniteScrollListType'); } }

Этот новый контроллер делает всего несколько вещей:

  • Измените значение $_sThisTemplate на aho_infinitescroll.tpl , которое мы определили в metadata.php : Обратите внимание, что нам нужно только указать здесь имя шаблона. Таким образом, имя шаблона должно быть уникальным. Это помогает системе быстро найти правильный шаблон.

  • Функция render ничего не делает, а просто возвращает имя нового шаблона.

  • Функция getViewTypeList будет возвращать значение столбца данных sInfiniteScrollListType , определенного в metadata.php . Шаблон aho_infinitescroll.tpl будет использовать это значение, чтобы определить, какой тип представления будет применен для списка статей.

  • Вы можете заметить, что имя расширенного класса — aho_infinitescroll_alist_parent . Формула это module controller name + _ + parent .

Советы, чтобы найти необходимый класс для расширения

  • Обычно вам нужно знать, какие классы необходимо расширить. Существует простой способ узнать, какой класс запущен в текущем представлении. Вы просто просматриваете файл /application/views/{theme_name}/tpl/layout/page.tpl и вставляете следующую строку в верхней части файла: 
 [{$oViewConf->getActiveClassName()}]

Приведенная выше строка помогает распечатать, какой базовый класс используется в текущем представлении. Если вы хотите определить основной класс, который выполняет запросы Ajax, вам потребуется немного больше усилий для работы с ChromeDev Tools .

Вывод

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

В следующей части будет подробно рассказано о существенной реализации интерфейса, которая состоит из настройки шаблона и добавления JavaScript для управления рабочим процессом для бесконечной прокрутки.

40
Share: