Помощь Подсветить активный пункт меню.

Alekxander

Alekxander

Мой дом здесь!
Регистрация
3 Янв 2018
Сообщения
490
Реакции
236
В Опенкарте 3 сделал подсветку активного пункта меню таким образом.
То есть при выборе пункта меню ему назначается класс "active". Работает если выбирать только главные пункты меню.
Если выбрать подпункт меню (подкатегорию), в таком случае скрипт перестает назначать дополнительный класс.
Прошу помощи как сделать.
JavaScript: 
<script>
jQuery(document).ready(function($) {
var url=document.location.href;
$.each($("#menu a"),function(){
if(this.href==url){$(this).addClass('active');};
});
})(jQuery);
</script>
 
Сортировка по дате Сортировка по голосам
доброго часу, я б все ж таки робив на бекенді таке рішення, ніж фронтенд чіпляв, хоча можна і приміркувати щось з jQuery, та все ж, в контроллері (catalog\controller\common\menu.php), я б до обидвох массивів (батьківські та дочірні категорії), додав ідентифікатор category_id, а у верхньому секторі, робив би перевірку на кінцевий "path", що дасть змогу проставляти активність не тільки на обране меню, але й на усі рівні ієрархії, додавши ось такий код:
PHP: 
// init array of all category ids
$data['parts'] = array();
if (isset($this->request->get['path'])) {
    $data['parts'] = explode('_', (string)$this->request->get['path']);
}
тобто загальний контроллер меню матиме ось такий вид
PHP: 
<?php
class ControllerCommonMenu extends Controller {
    public function index() {
        $this->load->language('common/menu');

        // Menu
        $this->load->model('catalog/category');

        $this->load->model('catalog/product');
      
        // init array of all category ids
        $data['parts'] = array();
      
        if (isset($this->request->get['path'])) {
            $data['parts'] = explode('_', (string)$this->request->get['path']);
        }

        $data['categories'] = array();

        $categories = $this->model_catalog_category->getCategories(0);

        foreach ($categories as $category) {
            if ($category['top']) {
                // Level 2
                $children_data = array();

                $children = $this->model_catalog_category->getCategories($category['category_id']);

                foreach ($children as $child) {
                    $filter_data = array(
                        'filter_category_id'  => $child['category_id'],
                        'filter_sub_category' => true
                    );

                    $children_data[] = array(
                        'category_id'    => $child['category_id'],
                        'name'  => $child['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
                        'href'  => $this->url->link('product/category', 'path=' . $category['category_id'] . '_' . $child['category_id'])
                    );
                }

                // Level 1
                $data['categories'][] = array(
                    'category_id'    => $category['category_id'],
                    'name'     => $category['name'],
                    'children' => $children_data,
                    'column'   => $category['column'] ? $category['column'] : 1,
                    'href'     => $this->url->link('product/category', 'path=' . $category['category_id'])
                );
            }
        }

        return $this->load->view('common/menu', $data);
    }
}
а уже в в'юшці (twig файлі), додати ось таке правило перевірки:
{% if category.category_id in parts %}active{% endif %}
тобто увесь twig матиме ось такий вигляд:
HTML: 
{% if categories %}
<div class="container">
  <nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs">{{ text_category }}</span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        {% for category in categories %}
        {% if category.children %}
        <li class="dropdown"><a href="{{ category.href }}" class="dropdown-toggle {% if category.category_id in parts %}active{% endif %}" data-toggle="dropdown">{{ category.name }}</a>
          <div class="dropdown-menu">
            <div class="dropdown-inner"> {% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %}
              <ul class="list-unstyled">
                {% for child in children %}
                <li><a href="{{ child.href }}" class="{% if child.category_id in parts %}active{% endif %}">{{ child.name }}</a></li>
                {% endfor %}
              </ul>
              {% endfor %}</div>
            <a href="{{ category.href }}" class="see-all">{{ text_all }} {{ category.name }}</a> </div>
        </li>
        {% else %}
        <li><a href="{{ category.href }}">{{ category.name }}</a></li>
        {% endif %}
        {% endfor %}
      </ul>
    </div>
  </nav>
</div>
{% endif %}
 
Последнее редактирование:
Позитивный голос 0 Негативный голос
Baco написал(а):
доброго часу, я б все ж таки робив на бекенді таке рішення, ніш фронтенд чіпляв, хоча можна і приміркувати щось з jQuery, та все ж, в контроллері (catalog\controller\common\menu.php), я б до обидвох массивів (батьківські та дочірні категорії), додав ідентифікатор category_id, а у верхньому секторі, робив би перевірку на кінцевий "path", що дасть змогу проставляти активність не тільки на обране меню, але й на усі рівні ієрархіє, додавши ось такий код:
PHP: 
// init array of all category ids
$data['parts'] = array();
if (isset($this->request->get['path'])) {
    $data['parts'] = explode('_', (string)$this->request->get['path']);
}
тобто загальний контроллем меню матиме ось такий вид
PHP: 
<?php
class ControllerCommonMenu extends Controller {
    public function index() {
        $this->load->language('common/menu');

        // Menu
        $this->load->model('catalog/category');

        $this->load->model('catalog/product');
     
        // init array of all category ids
        $data['parts'] = array();
     
        if (isset($this->request->get['path'])) {
            $data['parts'] = explode('_', (string)$this->request->get['path']);
        }

        $data['categories'] = array();

        $categories = $this->model_catalog_category->getCategories(0);

        foreach ($categories as $category) {
            if ($category['top']) {
                // Level 2
                $children_data = array();

                $children = $this->model_catalog_category->getCategories($category['category_id']);

                foreach ($children as $child) {
                    $filter_data = array(
                        'filter_category_id'  => $child['category_id'],
                        'filter_sub_category' => true
                    );

                    $children_data[] = array(
                        'category_id'    => $child['category_id'],
                        'name'  => $child['name'] . ($this->config->get('config_product_count') ? ' (' . $this->model_catalog_product->getTotalProducts($filter_data) . ')' : ''),
                        'href'  => $this->url->link('product/category', 'path=' . $category['category_id'] . '_' . $child['category_id'])
                    );
                }

                // Level 1
                $data['categories'][] = array(
                    'category_id'    => $category['category_id'],
                    'name'     => $category['name'],
                    'children' => $children_data,
                    'column'   => $category['column'] ? $category['column'] : 1,
                    'href'     => $this->url->link('product/category', 'path=' . $category['category_id'])
                );
            }
        }

        return $this->load->view('common/menu', $data);
    }
}
а уже в в'юшці (twig файлі), додати ось таке правило перевірки:
{% if category.category_id in parts %}active{% endif %}
тобто увесь twig матиме ось такий вигляд:
HTML: 
{% if categories %}
<div class="container">
  <nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs">{{ text_category }}</span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        {% for category in categories %}
        {% if category.children %}
        <li class="dropdown"><a href="{{ category.href }}" class="dropdown-toggle {% if category.category_id in parts %}active{% endif %}" data-toggle="dropdown">{{ category.name }}</a>
          <div class="dropdown-menu">
            <div class="dropdown-inner"> {% for children in category.children|batch(category.children|length / category.column|round(1, 'ceil')) %}
              <ul class="list-unstyled">
                {% for child in children %}
                <li><a href="{{ child.href }}" class="{% if child.category_id in parts %}active{% endif %}">{{ child.name }}</a></li>
                {% endfor %}
              </ul>
              {% endfor %}</div>
            <a href="{{ category.href }}" class="see-all">{{ text_all }} {{ category.name }}</a> </div>
        </li>
        {% else %}
        <li><a href="{{ category.href }}">{{ category.name }}</a></li>
        {% endif %}
        {% endfor %}
      </ul>
    </div>
  </nav>
</div>
{% endif %}
Нажмите для раскрытия...
Та я зробив, шо зміг знайти в гуглі. Бо багато рішень для 2 версії. А в 3 версії Опенкарту файли інші.
Дякую. Буду розбиратись.
Дуже шкода, але в мене не спрацював такий варіант. Можливо через те, що шаблон не дефолтний і дивлюсь файли трошки відрізняються.
 
Последнее редактирование:
  • Нравится
Реакции: Baco
Позитивный голос 0 Негативный голос
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху