Этот туториал научит вас добавлять новые страницы с произвольным содержанием и привязывать их к новым кнопкам меню.
-
Войдите в панель управления OpenCart (yoursite.com/admin).
-
Перейдите в Catalog -> Information (Каталог -> Информация).
-
Кликните на кнопку Insert (вставить), чтобы добавить новую страницу содержания.
-
Введите название вашей страницы и вставьте текст страницы в поле Description (описание). Вы можете использовать визуальный редактор для форматирования текста. Вставьте изображения и создайте гиперссылки. Вы также можете редактировать HTML код. Просто кликните на кнопку Source (исходный код).
-
Выберите вкладку Data (данные). Здесь вы можете указать ключевые слова страницы, установить порядок сортировки, отображение нижнего футера, а также включить/выключить страницу.
-
Сохраните изменения и проверьте ваш магазин онлайн. Страницы содержания теперь отображаются в Information block (информационном блоке).
-
Нам нужно редактировать код файла header.tpl, чтобы добавить страницу содержания в верхнее меню. Файл находится в папке /catalog/view/theme/themeXXX/template/common.
-
Редактируйте файл любым редактором кода. Поищите код для меню. Он должен выглядеть приблизительно так:
<ul class="links"> <?php if (!isset($this->request->get['route'])) { $route='active'; } else {$route='';}?> <li class="first"><a class="<?php echo $route; if (isset($this->request->get['route']) && $this->request->get['route']=="common/home") {echo "active";} ?>" href="<?php echo $home; ?>"><i class="icon-home"></i><?php echo $text_home; ?></a></li> <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/wishlist") {echo "active";} ?>" href="<?php echo $wishlist; ?>" id="wishlist-total"><i class="icon-star"></i><?php echo $text_wishlist; ?></a></li> <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/account") {echo "active";} ?>" href="<?php echo $account; ?>"><i class="icon-user"></i><?php echo $text_account; ?></a></li> <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/cart") {echo "active";} ?>" href="<?php echo $shopping_cart; ?>"><i class="icon-shopping-cart"></i><?php echo $text_shopping_cart; ?></a></li> <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/checkout") {echo "active";} ?>" href="<?php echo $checkout; ?>"><i class="icon-check"></i><?php echo $text_checkout; ?></a></li> <?php if (!$logged) { ?> <?php echo $text_welcome; ?> <?php } else { ?> <?php echo $text_logged; ?> <?php } ?> </ul>Внимание: код может отличаться в зависимости от шаблона.
-
Каждая строка кода выводит один элемент меню. Скопируйте последнюю строку кода:
<li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/checkout") {echo "active";} ?>" href="<?php echo $checkout; ?>"><i class="icon-check"></i><?php echo $text_checkout; ?></a></li>Добавьте новую строку и вставьте код, который вы скопировали.
-
Нам нужно изменить условие назначения СSS класса «active» (активный) для наших новых пунктов меню. Давайте заменим:
<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/checkout") {echo "active";} ?>на:
<?php if ((isset($this->request->get['route']) && $this->request->get['route']=="information/information") && (isset($this->request->get['information_id']) && $this->request->get['information_id']=="13")) {echo "active";} ?>Это код для страницы Information (информация). Вам нужно поменять 13 на ID (идентификационный номер) вашей новой страницы.
Следующий код:
<?php echo $text_checkout; ?>
должен быть изменен на название элемента меню. В нашем случае это Test.
Внимание: <i class=»icon-check»></i> — это код для иконки Font Awesome. Вы можете изменить класс для замены иконки. Список иконок и их классов можно найти по следующей ссылке . Версию шрифтовых иконок (Font icons) можно проверить в файле /catalog/view/theme/themeXXX/stylesheet/font-awesome.css шаблона.
-
Нам нужно получить ссылку (URL) на нашу контент страницу, чтобы связать ее с верхним меню. Кликните на ссылку страницы в блоке Information и скопируйте ссылку с адресной строки вашего браузера.
Потом измените следующий код:
<?php echo $checkout; ?>
на ссылку нашей страницы содержания, которую мы скопировали.
-
Вот полная строка с примененными изменениями:
<li><a class="<?php if ((isset($this->request->get['route']) && $this->request->get['route']=="information/information") && (isset($this->request->get['information_id']) && $this->request->get['information_id']=="13")) {echo "active";} ?>" href="http://templatetesting.com/vincent/index.php?route=information/information&information_id=13"><i class="icon-bug"></i>Test</a></li>Не забудьте заменить 13 на фактический ID вашей новой страницы.
-
А полный блок кода меню будет выглядеть вот так:
<ul class="links"> <?php if (!isset($this->request->get['route'])) { $route='active'; } else {$route='';}?> <li class="first"><a class="<?php echo $route; if (isset($this->request->get['route']) && $this->request->get['route']=="common/home") {echo "active";} ?>" href="<?php echo $home; ?>"><i class="icon-home"></i><?php echo $text_home; ?></a></li> <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/wishlist") {echo "active";} ?>" href="<?php echo $wishlist; ?>" id="wishlist-total"><i class="icon-star"></i><?php echo $text_wishlist; ?></a></li> <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/account") {echo "active";} ?>" href="<?php echo $account; ?>"><i class="icon-user"></i><?php echo $text_account; ?></a></li> <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/cart") {echo "active";} ?>" href="<?php echo $shopping_cart; ?>"><i class="icon-shopping-cart"></i><?php echo $text_shopping_cart; ?></a></li> <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/checkout") {echo "active";} ?>" href="<?php echo $checkout; ?>"><i class="icon-check"></i><?php echo $text_checkout; ?></a></li> <li><a class="<?php if ((isset($this->request->get['route']) && $this->request->get['route']=="information/information") && (isset($this->request->get['information_id']) && $this->request->get['information_id']=="13")) {echo "active";} ?>" href="http://templatetesting.com/vincent/index.php?route=information/information&information_id=13"><i class="icon-bug"></i>Test</a></li> <?php if (!$logged) { ?> <?php echo $text_welcome; ?> <?php } else { ?> <?php echo $text_logged; ?> <?php } ?> </ul> -
Сохраните файл. Страница была добавлена в меню в хедере.
-
Теперь давайте добавим ссылку на нашу новую страницу в мобильное меню. Мы можем проверить ее в браузере Firefox, в меню Web developer->Responsive design view (Веб Девелопер->Просмотр адаптивного дизайна) (Ctrl + Shift + M).
-
В том же файле мы должны найти код <div class=»swipe-menu»>. Он определяет список элементов мобильного меню, который включает в себя разные ссылки из футтер и хедер меню из дизайна для компьютерного экрана. Весь код выглядит вот так:
<div class="swipe-menu"> <ul class="links"> <?php if (!isset($this->request->get['route'])) { $route='active'; } else {$route='';}?> <li class="first"><a class="<?php echo $route; if (isset($this->request->get['route']) && $this->request->get['route']=="common/home") {echo "active";} ?>" href="<?php echo $home; ?>"><i class="icon-home"></i><?php echo $text_home; ?></a></li> <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/wishlist") {echo "active";} ?>" href="<?php echo $wishlist; ?>" id="wishlist-total"><i class="icon-star"></i><?php echo $text_wishlist; ?></a></li> <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/account") {echo "active";} ?>" href="<?php echo $account; ?>"><i class="icon-user"></i><?php echo $text_account; ?></a></li> <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/cart") {echo "active";} ?>" href="<?php echo $shopping_cart; ?>"><i class="icon-shopping-cart"></i><?php echo $text_shopping_cart; ?></a></li> <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/checkout") {echo "active";} ?>" href="<?php echo $checkout; ?>"><i class="icon-check"></i><?php echo $text_checkout; ?></a></li> <?php if (!$logged) { ?> <?php echo $text_welcome; ?> <?php } else { ?> <?php echo $text_logged; ?> <?php } ?> </ul> <?php echo $language; ?> <?php echo $currency; ?> <?php if ($informations) { ?> <ul class="foot"> <?php foreach ($informations as $information) { ?> <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li> <?php } ?> </ul> <?php } ?> <ul class="foot foot-1"> <li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li> <li><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a></li> <li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li> </ul> <ul class="foot foot-2"> <li><a href="<?php echo $manufacturer; ?>"><?php echo $text_manufacturer; ?></a></li> <li><a href="<?php echo $voucher; ?>"><?php echo $text_voucher; ?></a></li> <li><a href="<?php echo $affiliate; ?>"><?php echo $text_affiliate; ?></a></li> <li><a href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li> </ul> <ul class="foot foot-3"> <li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li> <li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li> </ul> </div> -
Давайте добавим код для нашей новой ссылки хедера в мобильное меню после пункта «checkout item» (купить продукт). Нам нужно добавить его над строкой:
<?php if (!$logged) { ?>Переделанный код будет выглядеть вот так:
<div class="swipe-menu"> <ul class="links"> <?php if (!isset($this->request->get['route'])) { $route='active'; } else {$route='';}?> <li class="first"><a class="<?php echo $route; if (isset($this->request->get['route']) && $this->request->get['route']=="common/home") {echo "active";} ?>" href="<?php echo $home; ?>"><i class="icon-home"></i><?php echo $text_home; ?></a></li> <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/wishlist") {echo "active";} ?>" href="<?php echo $wishlist; ?>" id="wishlist-total"><i class="icon-star"></i><?php echo $text_wishlist; ?></a></li> <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="account/account") {echo "active";} ?>" href="<?php echo $account; ?>"><i class="icon-user"></i><?php echo $text_account; ?></a></li> <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/cart") {echo "active";} ?>" href="<?php echo $shopping_cart; ?>"><i class="icon-shopping-cart"></i><?php echo $text_shopping_cart; ?></a></li> <li><a class="<?php if (isset($this->request->get['route']) && $this->request->get['route']=="checkout/checkout") {echo "active";} ?>" href="<?php echo $checkout; ?>"><i class="icon-check"></i><?php echo $text_checkout; ?></a></li> <li><a class="<?php if ((isset($this->request->get['route']) && $this->request->get['route']=="information/information") && (isset($this->request->get['information_id']) && $this->request->get['information_id']=="13")) {echo "active";} ?>" href="http://templatetesting.com/vincent/index.php?route=information/information&information_id=13"><i class="icon-bug"></i>Test</a></li> <?php if (!$logged) { ?> <?php echo $text_welcome; ?> <?php } else { ?> <?php echo $text_logged; ?> <?php } ?> </ul> <?php echo $language; ?> <?php echo $currency; ?> <?php if ($informations) { ?> <ul class="foot"> <?php foreach ($informations as $information) { ?> <li><a href="<?php echo $information['href']; ?>"><?php echo $information['title']; ?></a></li> <?php } ?> </ul> <?php } ?> <ul class="foot foot-1"> <li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li> <li><a href="<?php echo $return; ?>"><?php echo $text_return; ?></a></li> <li><a href="<?php echo $sitemap; ?>"><?php echo $text_sitemap; ?></a></li> </ul> <ul class="foot foot-2"> <li><a href="<?php echo $manufacturer; ?>"><?php echo $text_manufacturer; ?></a></li> <li><a href="<?php echo $voucher; ?>"><?php echo $text_voucher; ?></a></li> <li><a href="<?php echo $affiliate; ?>"><?php echo $text_affiliate; ?></a></li> <li><a href="<?php echo $special; ?>"><?php echo $text_special; ?></a></li> </ul> <ul class="foot foot-3"> <li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li> <li><a href="<?php echo $newsletter; ?>"><?php echo $text_newsletter; ?></a></li> </ul> </div> -
Сохраните изменения и обновите страницу браузера. Мы успешно создали новую страницу содержания и связали ее с новой вкладкой меню.
Пожалуйста, ознакомьтесь с детальным видео туториалом ниже.
OpenCart. How to add a new content page and link it to a new menu tab (based on Bootstrap templates)