joomix

Блог

Добавление класса активному пункту меню Опенкарт 2

Привет, друзья. 

Хотим поделится способом того, как в Опенкарт выделить в главном (верхнем) меню активные пункты.

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

 

К примеру, имеем код меню:

 

<div id="menu">

<ul>

<li><a href="/<?php echo $home; ?>"><?php echo $text_home; ?></a></li>

<li><a href="/<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a></li>

<li><a href="/<?php echo $account; ?>"><?php echo $text_account; ?></a></li>

<li><a href="/<?php echo $shopping_cart; ?>"><?php echo $text_shopping_cart; ?></a></li>

<li><a href="/<?php echo $checkout; ?>"><?php echo $text_checkout; ?></a></li>

</ul>

</div>

 

Для этого в header.php шаблона, в самый низ дописываем вот такой код js и получаем в итоге новый класс (.active) активного пункта:

 

<script>

jQuery(document).ready(function($) {

var url=document.location.href;

$.each($("#menu a"),function(){

if(this.href==url){$(this).addClass('active');};

});

})(jQuery);

</script>

 

Обратите внимание что ваш ID или класс в меню может отличатся от нашего #menu.

Протестировано на Opencart 2.3 pro

 

Кому понравилась статья- делитесь🤝, ставьте лайки👍