Categories

Новые шаблоны

OpenCart. Как добавить новую контент страницу и связать ее с новым пунктом меню (на основе Bootstrap шаблонов)

Vincent White Март 26, 2014
Rating: 4.0/5. From 2 votes.
Please wait...

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

OpenCart. Как добавить новую контент страницу и связать ее с новым пунктом меню (на основе Bootstrap шаблонов)

  1. Войдите в панель управления OpenCart (yoursite.com/admin).

  2. Перейдите в Catalog -> Information (Каталог -> Информация).

    opencart-how-to-add-a-new-content-page-and-link-it-to-a-new-tab1

  3. Кликните на кнопку Insert (вставить), чтобы добавить новую страницу содержания.

    opencart-how-to-add-a-new-content-page-and-link-it-to-a-new-tab2

  4. Введите название вашей страницы и вставьте текст страницы в поле Description (описание). Вы можете использовать визуальный редактор для форматирования текста. Вставьте изображения и создайте гиперссылки. Вы также можете редактировать HTML код. Просто кликните на кнопку Source (исходный код).

    opencart-how-to-add-a-new-content-page-and-link-it-to-a-new-tab3

  5. Выберите вкладку Data (данные). Здесь вы можете указать ключевые слова страницы, установить порядок сортировки, отображение нижнего футера, а также включить/выключить страницу.

    opencart-how-to-add-a-new-content-page-and-link-it-to-a-new-tab4

  6. Сохраните изменения и проверьте ваш магазин онлайн. Страницы содержания теперь отображаются в Information block (информационном блоке).

    opencart-how-to-add-a-new-content-page-and-link-it-to-a-new-tab5

  7. Нам нужно редактировать код файла header.tpl, чтобы добавить страницу содержания в верхнее меню. Файл находится в папке /catalog/view/theme/themeXXX/template/common.

  8. Редактируйте файл любым редактором кода. Поищите код для меню. Он должен выглядеть приблизительно так:

    	
    <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>       

    Внимание: код может отличаться в зависимости от шаблона.

  9. Каждая строка кода выводит один элемент меню. Скопируйте последнюю строку кода:

    <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>
    

    Добавьте новую строку и вставьте код, который вы скопировали.

  10. Нам нужно изменить условие назначения С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 шаблона.

    opencart-how-to-add-a-new-content-page-and-link-it-to-a-new-tab6

  11. Нам нужно получить ссылку (URL) на нашу контент страницу, чтобы связать ее с верхним меню. Кликните на ссылку страницы в блоке Information и скопируйте ссылку с адресной строки вашего браузера.

    opencart-how-to-add-a-new-content-page-and-link-it-to-a-new-tab7

    Потом измените следующий код:

    <?php echo $checkout; ?>

    на ссылку нашей страницы содержания, которую мы скопировали.

  12. Вот полная строка с примененными изменениями:

    <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 вашей новой страницы.

  13. А полный блок кода меню будет выглядеть вот так:

     	
    <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>
           
  14. Сохраните файл. Страница была добавлена в меню в хедере.

  15. Теперь давайте добавим ссылку на нашу новую страницу в мобильное меню. Мы можем проверить ее в браузере Firefox, в меню Web developer->Responsive design view (Веб Девелопер->Просмотр адаптивного дизайна) (Ctrl + Shift + M).

    opencart-how-to-add-a-new-content-page-and-link-it-to-a-new-tab8

  16. В том же файле мы должны найти код <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>
         
  17. Давайте добавим код для нашей новой ссылки хедера в мобильное меню после пункта «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>
         
  18. Сохраните изменения и обновите страницу браузера. Мы успешно создали новую страницу содержания и связали ее с новой вкладкой меню.

    opencart-how-to-add-a-new-content-page-and-link-it-to-a-new-tab9

Пожалуйста, ознакомьтесь с детальным видео туториалом ниже.

OpenCart. How to add a new content page and link it to a new menu tab (based on Bootstrap templates)

Шаблоны ocStore
Эта запись была размещена в OpenCart туториалы и помечена как add, Bootstrap, button, content, menu, new, opencart, page. Добавьте в закладки постоянную ссылку.

Submit a ticket

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