Jump to content
Sign in to follow this  
sdld

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

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го "/" слеша... или еще как-то, чтобы решить эту головоломку?

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

Share this post


Link to post
Share on other sites
<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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

 

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

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

Share this post


Link to post
Share on other sites
<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

Share this post


Link to post
Share on other sites
<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. Опечатка была.

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

Share this post


Link to post
Share on other sites

 

<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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Не только.

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

  • +1 1

Share this post


Link to post
Share on other sites

Еще 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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

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

 

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

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

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.