Статьи

PrestaShop Theming объяснил

Февраль 11, 2019

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

Prestashop работает на PHP и MySQL и использует движок Smarty для своих «шаблонов» (страниц). Не волнуйтесь, если вы не знакомы со Smarty. Вы в основном используете его для создания страниц с разделами-заполнителями, и Prestashop заполняет информацию при загрузке страницы. Это легко перейти, если вы использовали что-то вроде шаблонов Handlebars или Underscore .

Я собираюсь предположить, что вы уже скачали и установили Prestashop. Если нет, вы можете скачать последнюю версию ; у них есть обучающее видео, которое вы можете посмотреть, чтобы узнать, как его настроить.

Сайт Prestashop

Регистрация вашей темы

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

Процесс создания собственной темы начинается с создания папки. В выбранном файловом браузере перейдите к корневому каталогу Prestashop, и вы найдете папку, которая называется themes . Внутри папки с themes создайте новый каталог с названием вашей темы. Я собираюсь назвать мое «Демо».

Если вы добавите изображение своего шаблона в эту папку и preview.jpg его preview.jpg , Prestashop должен автоматически найти и добавить ваш шаблон в preview.jpg . Если это не так, или вы предпочитаете добавить изображение позже, вы можете вручную добавить тему. Для этого перейдите в раздел « Темы» в меню « Настройки» и нажмите « Добавить новый» вверху. После завершения вы увидите свою тему в центре страницы. Включите его, просто нажав на него и нажав кнопку Сохранить .

Добавьте свой логотип (ы), пока вы здесь; Вы можете найти эту опцию в нижней части страницы. Возможно, вам придется увеличить лимит загрузки файлов в Prestashop (или, возможно, даже файл конфигурации PHP), если у вас очень большое изображение.

Ускоренный курс в Prestashop

Smarty — это шаблонизатор для PHP, облегчающий отделение презентации от логики приложения.

Как я упоминал ранее, Prestashop использует Smarty для генерации страниц; Итак, все файлы шаблона имеют расширение .tpl . Есть много страниц, которые вы должны создать, чтобы иметь полную тему; найдите минутку и посмотрите список файлов .

В конечном счете, функциональность вашей темы определяет, какие страницы вы должны реализовать. Эти страницы основаны на файлах в папке контроллеров, и вы можете переопределить контроллеры по умолчанию или добавить свои собственные контроллеры в соответствии с вашей темой. Но это выходит за рамки этой статьи. Среди контроллеров в controllers\front directory есть два файла шаблонов, которые автоматически загружаются: header.tpl и footer.tpl .

Основной контент вашего сайта будет загружаться модулями с помощью «Крюков».

В Prestashop есть два типа хуков: экшн и экшн-хуки. Они оба функционируют одинаково, но различаются по назначению. Хук в основном дает пользователю возможность присоединить пользовательский код к внешнему источнику. В случае ловушки действия любой код, прикрепленный к ловушке, запускается при вызове ловушки. Например, Prestashop поставляется с хуком по умолчанию, называемым actionProductAdd который запускается при добавлении продукта. Таким образом, вы можете прикрепить модуль к этому хуку, если хотите отправлять рассылку по электронной почте каждый раз, когда добавляется новый продукт.

Хук отображения очень похож, но вместо того, чтобы подключать функцию к событию, вы подключаете функцию к определенному месту в шаблоне. Другими словами, Prestashop будет вызывать ваш модуль по определенной точке (например, на правой боковой панели), и все, что возвращается, помещается на страницу. Вы можете просмотреть все зарегистрированные в настоящий момент хуки, перейдя на страницу Модули> Позиции в задней части администратора.

Лично я считаю, что лучше всего начать со стандартной темы HTML. Это не является обязательным требованием, но я настоятельно рекомендую его по ряду причин:

  • Это позволяет сразу увидеть, какие хуки вам нужны и как разделить ваш контент.
  • Он дает вам четкое представление о том, какие файлы шаблонов вы должны создать, а также дает представление о том, что будет статическим контентом и каким должен быть модуль. Это также позволяет вам сразу добавить файл preview.jpg .

На следующем изображении показан пример моего HTML-шаблона:

И здесь вы можете видеть, как я разделю это на крючки Prestashop:

Создание частичных шаблонов

Теперь давайте создадим файл header.tpl в вашем каталоге тем и заполните его заголовком темы. Это включает в себя doctype , область, и все в теле, что вы хотите, отображается на всех страницах. Вот пример файла header.tpl :

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE HTML>
<html>
  <head>
    <title>Prestashop Site</title>
    <link rel=»stylesheet» type=»text/css» href=»{$css_dir}bootstrap.min.css»>
 
    {if isset($css_files)}
      {foreach from=$css_files key=css_uri item=media}
        <link rel=»stylesheet» type=»text/css» href=»{$css_uri}»>
      {/foreach}
    {/if}
 
    {if isset($js_files)}
      {foreach from=$js_files item=js_uri}
        <script src=»{$js_uri}»></script>
      {/foreach}
    {/if}
  </head>
   
  <body>
    <div id=»head»>
      <div id=»menu»>
        {$HOOK_TOP}
      </div>
      <div id=»banner»>
        <img src=»http://nettuts.s3.amazonaws.com/2169_prestashop/{$logo_url}» alt=»Header Image»>
      </div>
    </div>

В этом коде есть несколько моментов, на которые следует обратить внимание. Я предварительно {$css_dir} имя файла CSS с помощью {$css_dir} . Это переменная Smarty, которая указывает на папку css внутри директории вашей темы, куда должны помещаться все ваши CSS-файлы.

Следующая строка использует цикл foreach Smarty для добавления всех CSS-файлов включенных модулей. Стоит отметить, что если вы создадите файл CSS с именем global.css в каталоге css , цикл автоматически добавит этот файл на страницу.

Несколько строк спустя другой цикл foreach обрабатывает файлы JavaScript в каталоге js и добавляет их на страницу. В последнем разделе я открываю элемент body и определяю ловушку для модуля меню. Наконец, я заканчиваю, показывая логотип сайта.

Если вы не ветеран Prestashop, вы, вероятно, задаетесь вопросом, откуда я взялся с этими переменными. Как я уже говорил ранее, к сожалению, документации Prestashop не хватает, но они предоставляют инструмент отладки, который можно запустить, добавив {debug} к любому из файлов шаблонов. Когда вы откроете соответствующую страницу в вашем браузере, вы получите всплывающее окно, содержащее список всех переменных для этого конкретного шаблона. Это позволяет быстро (с помощью ctrl / cmd-F значительно помогает) определить, какие переменные определены, а также их значения.

Теперь давайте создадим шаблон footer.tpl . Я собираюсь сохранить это простым и просто закрыть элементы <body/> и <html/> , но не стесняйтесь добавлять все, что вы хотите отобразить внизу каждой страницы. Это может включать в себя все, от хуков до пользовательских JavaScript; нет никаких ограничений на то, что вы могли бы поставить здесь.

Последний файл, который я хочу реализовать, это файл index.tpl . Это файл «домашней страницы», который отображается, когда пользователь получает доступ к корню вашего сайта. В теме Prestashop по умолчанию боковые панели загружаются в файл header.tpl , а фактический шаблон индекса содержит только вызов displayHome . Это хорошо, если вы хотите, чтобы боковые панели были на всех страницах, но опять же, я хотел бы подчеркнуть, что хуки реализованы по вашему усмотрению. Вам не нужно реализовывать какие-либо хуки, и вы можете добавить свои собственные пользовательские хуки, если вам нужно больше, чем стандартная функциональность.

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

локализация

Последняя особенность Prestashop, которую вы должны рассмотреть, это инструменты локализации Prestashop. Prestashop позволяет легко переводить ваш сайт на несколько языков с помощью функции Smarty с именем l . Вы используете его, заменяя стандартную строку функцией l , передавая строку в качестве параметра. Вот пример элемента <h1/> , как с переводом, так и без него:

1
2
3
4
5
{* Without Translation Tool *}
<h1>Subscribe to us!</h1>
 
{* With Translation Tool *}
<h1>{ls=’Subscribe to us!’}</h1>

Даже если вы в настоящее время не планируете переводить свой сайт, это небольшое изменение, которое позволит вам легко перевести ваши страницы, если позже вы решите это сделать. После внесения этих изменений в шаблоны вы можете перейти на страницу « Локализация> Переводы» в фоновом режиме и щелкнуть по национальности, на которую хотите перевести.

Добавить языки не по умолчанию очень просто, и я расскажу об этом во втором разделе на странице (метко названный «Добавить / обновить язык»).

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

Теперь введите специальный HTML- index.tpl вашей домашней страницы в index.tpl и убедитесь, что вы предоставили хуки, которые хотите использовать. Не забудьте использовать функцию {debug} Smarty, если вам нужно, чтобы переменные были доступны для вашего шаблона.

Теперь вы можете открыть браузер и перейти к корню вашего сайта. Моя выглядит так:

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

При создании темы Prestashop вы заметите, что модули отвечают примерно за 90% контента. Существуют модули, которые отображают продукты, модули для корзины покупок и т. Д. Основная часть темы Prestashop включает, как минимум, практические знания о том, как настроить внешний вид модулей.

Модули

Модули в Prestashop не совпадают с виджетами WordPress.

Модули в Prestashop не совпадают с виджетами WordPress; Модули Prestashop могут быть прикреплены только к крючкам, указанным создателем модуля. Например, если вы создаете модуль, который отображает блок «подписаться на новостную рассылку», и вы настроили его для перехода на любую из боковых панелей, вы не сможете затем поместить его в область нижнего колонтитула.

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

Это дает вам много возможностей для настройки модуля.

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

При создании темы есть два способа добавления модулей. Первый вариант — создать свой собственный модуль. Это более утомительный вариант, но вы получаете гораздо больший контроль над конечным продуктом. С другой стороны, в официальном каталоге модулей более 2000 модулей (и даже больше на сторонних сайтах). Скорее всего, вы можете найти то, что соответствует вашим потребностям.

Второй вариант — установить готовый модуль; Prestashop дает вам возможность настроить его внешний вид путем переопределения файлов шаблонов. Это лучший вариант, если вы действительно не хотите начинать кодировать свой собственный модуль, и он позволяет вам сосредоточиться на графической стороне. Я собираюсь охватить оба варианта; Итак, начнем с первого.

Создание вашего собственного модуля

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

Сначала создайте папку в каталоге modules , а затем создайте внутри нее файл PHP с тем же именем, что и у папки. Когда вы откроете папку modules , вы увидите соглашение об именах, в котором все модули, которые только отображают контент, начинаются со слова «блок». Это, конечно, не является обязательным требованием, но имеет смысл. Я назову свою папку blockdisplayproducts , и в ней я создам файл PHP с тем же именем.

Откройте файл PHP и определите класс модулей:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
 
if (!defined(‘_PS_VERSION_’))
exit;
 
class BlockDisplayProducts extends Module
{
    public function __construct()
    {
        $this->name = ‘blockdisplayproducts’;
        $this->tab = ‘front_office_features’;
        $this->version = 1.0;
        $this->author = ‘Gabriel Manricks’;
        $this->need_instance = 0;
 
        parent::__construct();
 
        $this->displayName = $this->l(‘Display Products Module’);
        $this->description = $this->l(‘Displays a configurable amount of products for the home page.’);
    }
 
}

Модули Prestashop являются объектно-ориентированными; поэтому вы должны создать класс для вашего модуля. Имя вашего класса должно быть верблюжьей версией названия вашей папки.

В верхней части файла вы можете увидеть оператор if . Это гарантирует, что файл не загружается напрямую через браузер. Далее, ваш класс должен либо непосредственно наследовать класс Module, либо наследовать класс потомка Module.

Внутри конструктора мы настраиваем свойства модуля. Prestashop использует эту информацию для отображения в серверной части:

  • name — это уникальное «кодовое имя», и это не фактическое имя, отображаемое в серверной части.
  • tab сообщает Prestashop категорию модуля. Вы можете найти полный список категорий, открыв файл Controllers\Admin\AdminModuleController.php .
  • author , name и version говорят сами за себя.
  • needs_instance указывает Prestashop создать экземпляр вашей переменной при доступе к странице модулей. Обычно это не требуется, но если ваш модуль должен показывать сообщение или регистрировать что-то, когда страница модулей активна, то вы должны изменить это на 1 .

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

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

Этот модуль предназначен для домашней страницы, поэтому я подключу его к домашней странице. Мы также хотим добавить CSS-файл в заголовок, а это значит, что нам нужно также добавить заголовок. Если вы зайдете на сервер под страницей Модули> Позиции , вы сможете найти технические названия хуков (это то, что мы здесь укажем).

Сразу после функции __construct() добавьте следующее:

1
2
3
4
5
6
public function install()
   {
           if (parent::install() == false || $this->registerHook(‘displayHome’) == false || $this->registerHook(‘displayHeader’) == false || Configuration::updateValue(‘DP_Number_of_Products’, 6) == false)
                   return false;
           return true;
   }

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

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

Реализация хуков довольно проста; создайте публичную функцию со словом «hook», за которым следует имя hook. Давайте начнем с заголовка хука. Мы просто хотим добавить CSS-файл в нашу тему. Вот полная функция:

1
2
3
4
public function hookdisplayHeader($params)
   {
       $this->context->controller->addCSS(($this->_path).’blockdisplayproducts.css’, ‘all’);
   }

Создайте этот CSS-файл в каталоге тем, и ваш шаблон должен загрузить его в заголовок.

Следующий хук немного сложнее. Он должен извлечь определенное количество продуктов из базы данных и загрузить их в файл шаблона. Функция извлечения продуктов не возвращает изображения или ссылки продуктов, поэтому нам нужно вызвать несколько различных функций и «создать» массив продуктов. Вот полная функция:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
public function hookdisplayHome($params)
   {
       $languageId = (int)($params[‘cookie’]->id_lang);
       $numberOfProducts = (int)(Configuration::get(«DP_Number_of_Products»));
       $productsData = Product::getProducts($languageId, 0, $numberOfProducts, «id_product», «ASC»);
       if (!$productsData)
           return «error»;
            
       $products = array();
       $link = new Link(null, «http://»);
        
       foreach($productsData as $product){
           $tmp = Product::getCover($product[‘id_product’]);
           array_push($products, array(
               ‘name’ => $product[‘name’],
               ‘author’ => $product[‘manufacturer_name’],
               ‘desc’ => $product[‘description_short’],
               ‘price’ => $product[‘price’],
               ‘link’ => $link->getProductLink(new Product($product[‘id_product’])),
               ‘image’ => $link->getImageLink($product[‘link_rewrite’], $tmp[‘id_image’])
           ));
            
       }
       $this->smarty->assign(array(
           ‘products’ => $products
       ));
 
       return $this->display(__FILE__, ‘blockdisplayproducts.tpl’);
   }

Он начинается с получения количества продуктов для отображения и идентификатора языка пользователя. Затем мы позвоним, чтобы получить назначенное количество продуктов, начиная с первого зарегистрированного продукта. После этого мы следим за тем, чтобы не было проблем с выходом продуктов, если они были. Следующий блок — это та часть, о которой я упоминал ранее, которая создает массив со всеми свойствами, которые нам понадобятся при отображении элемента. Это включает в себя изображение и ссылку, которые не были возвращены с остальными данными продукта. Последний раздел добавляет массив продуктов в Smarty и загружает файл шаблона по вашему выбору. Я назвал файл шаблона и CSS-файлы с тем же именем, что и модуль, но это не является обязательным требованием; Вы можете назвать это как угодно.

Если вы откроете свой сайт прямо сейчас, вы увидите только сообщение с пометкой « Шаблон не найден для модуля blockdisplayproducts». Итак, давайте создадим файл шаблона в каталоге нашего модуля, назвав его так же, как вы только что указали в функции ловушки. Эта часть действительно зависит от вашего конкретного макета темы, но вот мой файл шаблона:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
{if $products !== false}
    <div id=»home_products_title»><h1>{ls=’OUR BOOKS’ mod=’blockdisplayproducts’}</h1></div>
    {foreach from=$products item=product name=productLoop}
        <div class=»home_products_book»>
            <div class=»home_products_picture»><img src=»http://nettuts.s3.amazonaws.com/2169_prestashop/{$product.image}» alt=»{$product.name|strip_tags|escape:html:’UTF-8′}» /></div>
            <div class=»home_products_author»>{$product.author|upper|strip_tags|escape:html:’UTF-8′}</div>
            <div class=»home_products_info»>
                <div class=»home_products_title»>{$product.name|strip_tags|escape:html:’UTF-8′}</div>
                <div class=»home_products_description»>{$product.desc}</div>
                <div class=»home_products_price»>${$product.price|string_format:»%.2f»}</div>
                <div class=»home_products_openButton»><a href=»{$product.link}» class=»btn btn-inverse»>{ls=’View’ mod=’blockdisplayproducts’}</a></div>
            </div>
        </div>
    {/foreach}
{/if}

Поскольку Prestashop использует шаблоны Smarty, у вас есть ряд вспомогательных функций, которые вы можете использовать при отображении ваших данных. Мы начнем с функции if чтобы убедиться, что с массивом products все в порядке. Если это так, мы идем в цикл for , генерируя указанный HTML для каждого. Мы используем встроенные вспомогательные функции Smarty для обрезки тегов HTML и преобразования имени автора в верхний регистр, а также используем другой метод для форматирования цены до желаемого количества десятичных знаков. Чтобы увидеть полный список модификаторов, смотрите здесь .

Кроме того, обратите внимание, что при переводе строк вам необходимо ввести имя вашего модуля. Это связано с тем, что перевод связан не с темой, а с самим модулем. С другой стороны, функция l зависит от шаблона; поэтому для того, чтобы он нашел ваш файл перевода, требуется имя модуля.

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

Теперь наш модуль полностью функционален, но нет способа отрегулировать количество возвращаемых продуктов. Для этого нам нужно добавить функцию с именем getContents . Если ваш модуль имеет эту функцию, то Prestashop автоматически добавит кнопку конфигурации на странице «Модули». Все, что возвращается этой функцией, будет отображаться на странице конфигурации. Для начала добавьте функцию в класс модуля и заполните его следующим текстом:

01
02
03
04
05
06
07
08
09
10
11
12
13
public function getContent(){
        
        
       $html = ‘<div style=»width:400px; margin:auto»>’;
       $html .= ‘ <h2>’ .
       $html .= ‘ <form action=»‘. Tools::safeOutput($_SERVER[‘REQUEST_URI’]). ‘» method=»post»><fieldset>’;
       $html .= ‘ ‘ .
       $html .= ‘ <input type=»submit» value=»‘ . $this->l(‘Save’) . ‘» />’;
       $html .= ‘ </fieldset></form>’;
       $html .= ‘</div>’;
        
       return $html;
   }

Эта функция просто создает HTML-код, необходимый для отображения формы с числовым полем и кнопкой сохранения. Опять же, я использую метод $this->l() чтобы вы могли перевести модуль на другие языки в будущем, если вам понадобится это сделать. Я использовал числовое поле в форме HTML, но будьте осторожны, если вы делаете коммерческий модуль. Это все еще не поддерживается всеми браузерами. Тем не менее, если это для вашего личного использования, то не стесняйтесь!

Единственное, что может показаться загадочным, — это функция Tools::safeOutput() которую мы вызываем по URL. Честно говоря, я не уверен на 100%, насколько важен этот вызов, но он разбирает все HTML-теги и преобразует необходимые символы в HTML-объекты.

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

Вы можете изменить число и нажать «Сохранить», но мы еще не написали в функции сохранения, поэтому он будет сбрасываться до 6 (значение, которое уже сохранено).

Вернувшись в функцию, добавьте следующий код в начало функции:

1
2
3
if (Tools::isSubmit(‘numProds’)){
  Configuration::updateValue(‘DP_Number_of_Products’, (int)(Tools::getValue(‘numProds’)));
}

Это проверяет, было ли передано значение, т. numProds Существует ли значение numProds в виде переменной $_GET или $_POST . Затем мы обновляем свойство, в котором мы сохранили значение. Метод Tools::getValue принимает имя поля формы и, необязательно, вторую строку того, что возвращать, если поле формы не было найдено; затем он возвращает отформатированную строку со значением, которое было отправлено. Важно поместить это перед созданием HTML-формы; в противном случае форма будет содержать старые значения в сравнении с обновленными.

С этим последним фрагментом кода мы завершили модуль. Единственное, что вам нужно сделать, это добавить значок GIF 16×16 в папку ваших модулей.

Теперь мы готовы перейти к следующему варианту интеграции модулей с вашей темой.

Переопределение существующих модулей

Второй вариант — использовать существующий модуль и перенастроить его по своему вкусу. Эта опция значительно проще, так как вам нужно только заново создать файл (файлы) .tpl из модуля.

В моем примере темы все еще отсутствует главное меню навигации, поэтому давайте настроим этот модуль. Для начала включите / установите модуль на странице «модули», которая называется «Верхнее горизонтальное меню». Следующим шагом является создание папки в каталоге тем, называемой modules . Внутри него создайте еще одну папку с актуальным названием модуля — в нашем случае это blocktopmenu . При загрузке файлов tpl модуля Prestashop сначала проверяет, есть ли файл в каталоге переопределения модуля активированных тем с тем же именем. Если это так, он загрузит версию темы вместо стандартной. Файл tpl модуля меню называется blocktopmenu.tpl , поэтому вы должны создать файл с тем же именем в новой папке, которую мы только что создали.

Самый простой способ выяснить, какие данные предлагает модуль, — это взглянуть на его файл tpl и посмотреть, какие данные они используют, или загрузить инструмент {debug} . Чтобы ускорить процесс, я могу вам сказать, что этот плагин предлагает только одну переменную с именем MENU , которая содержит строку, в которой все пункты меню объединены вместе.

  • теги. Теперь, само по себе, это не дает вам много места для маневра, когда дело доходит до настройки внешнего вида. Но что, если вы хотите добавить что-то еще, кроме тега li для каждого элемента? Ну, к счастью, Smarty на помощь! Это не статья о Smarty, поэтому я оставлю эту часть короткой, но, в основном, мы будем использовать комбинацию функции замены строк и функции разнесения PHP, чтобы изолировать отдельные элементы. После этого мы можем построить HTML-код с циклом foreach . Вот мой заполненный файл шаблона для этого модуля:

    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    <div id=»menuItems» class=»divcollapse»>
        <ul>
            {assign var=tmpMenu value=$MENU|replace:'<li>’:»}
            {assign var=items value='</li>’|explode:$tmpMenu}
            {foreach $items as $item}
                {if !$item@last}
                    <li>{$item}</li>
                    {if ($item@index + 2) != $item@total}
                        <div class=»divcollapse logo»><img src=»http://nettuts.s3.amazonaws.com/2169_prestashop/{$img_dir}icon.png» alt=»logo»/></div>
                    {/if}
                {/if}
            {/foreach}
        </ul>
    </div>

    Теперь это много нового кода, поэтому я буду проходить его построчно. Он начинается с открытия тегов div и ul ; это чисто по эстетическим соображениям. Далее мы используем команду Smarty, которая называется assign . Это именно так и звучит: присваивает значение переменной. В первом операторе assign мы удаляем открывающие теги li , а во втором — разбиваем строку на закрывающий тег li . В результате получается массив, содержащий список ссылок на пункты меню. Затем мы переходим к циклу foreach , где отображаем каждый элемент внутри

  • теги — за исключением того, что на этот раз мы добавили изображение значка после каждого пункта меню, за исключением последнего пункта меню. Кроме того, вы, возможно, заметили, что я избегаю последнего значения в массиве все вместе. Это потому, что последнее значение — просто символ новой строки.

    Если вы все выполнили правильно, теперь вы можете создать тему по своему вкусу и добавить несколько страниц в меню со страницы «Настройка» модуля. После того, как вы закончите, вы сможете перейти на свой сайт и увидеть меню, работающее, как ожидалось!

    Вывод

    Это был очень краткий, но тщательный обзор методов, необходимых для создания тем PrestaShop. В течение учебного курса я прошел все необходимые шаги для создания полной многоязычной темы и двух разных способов размещения тематических модулей в вашем шаблоне.

    В дальнейшем я предлагаю вам немного углубиться в Smarty, поскольку он предлагает ряд скрытых функций, которые действительно могут вам помочь. Что касается хорошего места, чтобы узнать больше о Prestashop, ну, не так много; Я рекомендую прочитать источник. На момент написания этой статьи документация Prestashop несколько нечеткая в освещении тем; однако их исходный код очень хорошо документирован. Другой отличный вариант — изучить другие модули и темы, чтобы глубже понять, на что способен Prestashop.

    Надеюсь, вам понравилось читать эту статью. Если у вас есть какие-либо вопросы относительно самой статьи или Prestashop в целом, не стесняйтесь оставлять комментарии ниже!

    Нужны премиум, готовые темы PrestaShop? Проверьте ThemeForest!

    • Полезные ссылки: Плагины PrestaShop от CodeCanyon.

    42
    Share: