Перейти к содержанию
sdld

[РЕШЕНО] Выделение пункта меню

Рекомендуемые сообщения

Добрый день, ОС-Гуру! :)

 

Ребят, подскажите пожалуйся, а то я в JS не силен - как решить проблему:

Вывел модулем ссылки (каталог подкатегорий) такого вида:

post-20777-0-27018500-1367309325_thumb.jpg

Выделение активной ссылке идет присвоением класса через JS:

<script type="text/javascript">
$(document).ready(function(){
var url=document.location.href;
 $.each($("#column-left a"),function(){
  if(this.href==url){$(this).addClass('actual');};
 });
});
</script>

с соответсвующим присвоением стиля css

 

Но проблема в том, что мне нужно присвоение класса этой ссылке и по вложенным в категорию товарам...

post-20777-0-00389600-1367309632_thumb.jpg

 

Как переделать JS, чтобы он сверял текущую ссылку с ссылками в блоке до определенного количества символов к примеру или до 2го "/" слеша... или еще как-то, чтобы решить эту головоломку?

Помогите пожалуйста, уже все что можно перерыл и взорвал мозг)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
<script type="text/javascript">
$(document).ready(function(){
var url=document.location.href;
 $.each($("#column-left a"),function(){
  if(this.href==url){
    $(this).addClass('actual');
    $(this).parent().find('ul > li > a').addClass('actual');
  };
 });
});
</script>

 

Не уверен, что будет работать, нужно видеть верстку... Но идея в том, чтобы найти родителя для "#column-left a", затем найти все вложенные ссылки и дать им класс actual.

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

а где вложенные категории? Там вроде только один уровень..

 

Или вам надо класс actual чтобы был и на ссылках товаров?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

мне не категории нужны а товары... чтобы открыв любой товар из "популярные" была активна "популярные" и т.д.

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

а где вложенные категории? Там вроде только один уровень..

 

Или вам надо класс actual чтобы был и на ссылках товаров?

именно! вот этого то и не выходит никак :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
<script type="text/javascript">
$(document).ready(function(){
var url=document.location.href;
 $.each($("#column-left a"),function(){
  if(url.indexOf(this.href)>0){
    $(this).addClass('actual');
  };
 });
});
</script>

 

Еще так попробуйте.

 

UPD. Опечатка была.

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
<script type="text/javascript">
$(document).ready(function(){
var url=document.location.href;
 $.each($("#column-left a"),function(){
  if(url.indexOf(this.href)>0){
    $(this).addClass('actual');
  };
 });
});
</script>

 

Еще так попробуйте.

 

UPD. Опечатка была.

Не работает =\ Даже к самой ссылке не лепит класс

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

 

<script type="text/javascript">
$(document).ready(function(){
var url=document.location.href;
 $.each($("#column-left a"),function(){
  if(url.indexOf(this.href)>0){
    $(this).addClass('actual');
  };
 });
});
</script>

 

Еще так попробуйте.

 

UPD. Опечатка была.

Не работает =\ Даже к самой ссылке не лепит класс

Знак должен стоять ">", я исправлял. Проверьте.

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Да, со знаком ">" сейчас http://shop.fosografia.ru/mugpopular - не возвращал на рабочий скрипт еще.. не присваивает

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Решение получено - спасибо большое max201181!!!!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Решение получено - спасибо большое max201181!!!!

Выкладывай решение.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Решение получено - спасибо большое max201181!!!!

Выкладывай решение.

Последний пример будет работать, если ">" заменить на ">="

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

раз уж затронули тему - я так полагаю это решение подойдет и для выделения активной ссылки в главном горизонтальном меню? Нужно лишь заменить column-left на класс отвечающий за ul пунктов меню?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Да, должно работать. Но по мне это больше костыль, чем полноценное решение. Т.к. лучше допилить модуль меню(если конечно в нем не предусмотрено), чтобы текущему пункту нужный класс подставлял.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Не только.

Обратите внимание на разницу между ocStore и OpenCart:

 

ocStore:

    <?php foreach ($categories as $category) { ?>
    <li><?php if ($category['active']) { ?>
	<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
	<?php } else { ?>
	<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>

OpenCart:

    <?php foreach ($categories as $category) { ?>
    <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

в том то и дело что меню в ОС не присваивается класс active который должен подсвечивать активный пункт меню. Это решается скриптом, но у меня пока не доходили руки плотно заняться этим вопросом, все жду когда клиент какойнить попросит так сделать :)

PS Опаньки! проверил только что на чистой ОС 1,5,4,1 - уже все по дефолту присваивается, спасибо Тим, не обратил внимание :)

В предыдущих версиях вроде такого небыло

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Еще 1 вопрос возник)

 

как это код:

<script type="text/javascript">
$(document).ready(function(){
var url=document.location.href;
 $.each($("#column-left a"),function(){
  if(url.indexOf(this.href)>=0){
    $(this).addClass('actual');
  };
 });
});
</script>

привести к виду, что если перебором ссылок в ID #Y есть такаяже ссылка в ID #X то присвоить ссылке из ID #Y присвоить .addClass ('actualx').

 

Это единственная алгаритм по которому я додумался реализовать "выделение" категории.

 

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

post-20777-0-39327800-1367574346_thumb.jpgpost-20777-0-57974200-1367574353_thumb.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Если сильно не заморачиваться и если я правильно понял, то проще сделать еще один цикл по #header:

<script type="text/javascript">
$(document).ready(function(){
var url=document.location.href;
 $.each($("#column-left a"),function(){
  if(url.indexOf(this.href)>=0){
    $(this).addClass('actual');
  };
 });
});
 $.each($("#header a"),function(){
  if(url.indexOf(this.href)>=0){
    $(this).addClass('actualx');
  };
 });
});
</script>

 

Но повторюсь, все же это больше костыль и в идеале это нужно делать на PHP, как написано выше.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Если сильно не заморачиваться и если я правильно понял, то проще сделать еще один цикл по #header:

<script type="text/javascript">
$(document).ready(function(){
var url=document.location.href;
 $.each($("#column-left a"),function(){
  if(url.indexOf(this.href)>=0){
    $(this).addClass('actual');
  };
 });
});
 $.each($("#header a"),function(){
  if(url.indexOf(this.href)>=0){
    $(this).addClass('actualx');
  };
 });
});
</script>

 

Но повторюсь, все же это больше костыль и в идеале это нужно делать на PHP, как написано выше.

Данное решение немного не то.. т.к. проверка идет и по левой колонке и по верхним ссылкам, но в случае с колонкой - всегда работает, а с верхними ссылками, только при открытие тойже, на какую ведет "верхняя ссылка"... поэтому и нужен скрипт который по сути определяет какая из навигаций в данный момент "активна" чтобы выделить ссылку вверху для всех вложений этой навигации.. поиском через JS 1 совпадения ссылки и левого блока.

 

Для категорий PHP пример мне не пойдет, т.к. в навигации у меня еще ссылки на статью и блог будут.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Так верхнее меню (с картинками) и кажется оно статично, ведет на первые пункты левого меню? Тут можно что-нибудь придумать с атрибутами ссылок. Например: в левое меню ввести атрибут type="ID верхнего меню" с сверять их(type==id) при рендере страницы. Но придется глумится далее(предвкушаю переход на карточку товара)...

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Так верхнее меню (с картинками) и кажется оно статично, ведет на первые пункты левого меню? Тут можно что-нибудь придумать с атрибутами ссылок. Например: в левое меню ввести атрибут type="ID верхнего меню" с сверять их(type==id) при рендере страницы. Но придется глумится далее(предвкушаю переход на карточку товара)...

 

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

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

 

Решить это можно ИМХО только скриптом, который при загрузке страницы читает все хрефы в блока А (левый блок) и сравнивает их с блоком Б (верхний блок) и если находит сходство даёт класс этой ссылке из блока Б. Т.к. у меня все висит на разных схемах  - вложения товара уже не проблема, т.к. они висят на техже схемах что и блок А! Но с моими познаниями школьного бэйсика и крошки РУ 15 летней давности для меня JS как для гуся коллайдер :D Я несколько дней гуглил чтобы решить первую проблему (сабж) и втыкал мануалы, но так и не доперло тупо добавить знак >=, а тут так вообще отдельный скрипт - вешалка! Уповаю на помощь знающих людей :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

1. Добавьте ссылкам из шаблона меню категорий атрибут, например type="ID пункта верхнего меню".

2. 

<script type="text/javascript">
$(document).ready(function(){
var url=document.location.href;
 $.each($("#column-left a"),function(){
  if(url.indexOf(this.href)>=0){
    $(this).addClass('actual');
    type = $(this).attr('type');
    $("#"+type).addClass('actualx');
  };
 });
});

});
</script>

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.