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

[sdld 14]

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

 

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

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

Выделение активной ссылке идет присвоением класса через 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

 

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

 

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

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

[max201181 32]

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

[max201181 32]

сайт покажите.

[sdld 14]

http://shop.fosografia.ru/admin demo/demo

cтраница с модулем над которым бьюсь http://shop.fosografia.ru/mugpopular

[max201181 32]

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

 

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

[sdld 14]

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

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

[sdld 14]

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

 

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

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

[max201181 32]

<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. Опечатка была.

[sdld 14]

<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. Опечатка была.

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

[max201181 32]

 

<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. Опечатка была.

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

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

[sdld 14]

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

[sdld 14]

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

[RomanPavlovich 4]

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

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

[max201181 32]

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

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

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

[Einshtein 711]

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

[max201181 32]

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

[tim21701 508]

Не только.

Обратите внимание на разницу между 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>

[Einshtein 711]

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

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

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

[max201181 32]

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

[sdld 14]

Еще 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 сравнимый с верхним блоком, в котором иконки, то этой иконке дать другой класс, чтобы она "залипшая была" как при наведении.

[max201181 32]

Если сильно не заморачиваться и если я правильно понял, то проще сделать еще один цикл по #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, как написано выше.

[sdld 14]

Если сильно не заморачиваться и если я правильно понял, то проще сделать еще один цикл по #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 пример мне не пойдет, т.к. в навигации у меня еще ссылки на статью и блог будут.

[max201181 32]

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

 

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

[sdld 14]

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

 

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

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

 

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

[max201181 32]

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, т.к. левое меню динамическое. Нужно будет править шаблон модуля, который выводит список категорий слева, чтобы добавить им новый атрибут.