Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

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

 

Ребят, подскажите пожалуйся, а то я в 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
Надіслати
Поділитися на інших сайтах

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

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

раз уж затронули тему - я так полагаю это решение подойдет и для выделения активной ссылки в главном горизонтальном меню? Нужно лишь заменить 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 - уже все по дефолту присваивается, спасибо Тим, не обратил внимание :)

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

Надіслати
Поділитися на інших сайтах


Еще 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 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.