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

Нужна помощь с модулем категории.

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

Уважаемые знатоки. Помогите разобраться с структурой модуля категорий. Не могу реализовать такой вывод категорий как на этом сайте http://magmedteh.com

Есть готовый код и стили, а также скрипт но не знаю куда что подставлять.

 

<div id='cssmenu'> 
  <ul> 
  <li class='has-sub'><a href='#'><span>Тонометры</span></a> 
  <ul> 
  <li><a href='http://magmedteh.com/auto_ton.php'><span>Тонометры Автоматические</span></a></li>
  <li><a href='http://magmedteh.com/semiauto_ton.php'><span>Тонометры Полуавтоматические</span></a></li>
  <li><a href='http://magmedteh.com/mech_ton.php'><span>Тонометры Механические</span></a></li>
  <li><a href='http://magmedteh.com/tonometr-na-zapjastje.php'><span>Тонометры на запястье</span></a></li>
  <li><a href='http://magmedteh.com/komplekt_k_tonometram.php'><span>Комплектующие к тонометрам</span></a></li>
  </ul> 
  </li> 
  
  <li class='has-sub'><a href=#'><span>Товары для диабетиков</span></a> 
  <ul> 
  <li><a href='http://magmedteh.com/glukometrs.php'><span>Глюкометры</span></a>
  <li><a href='http://magmedteh.com/test-poloski.php'><span>Тест - полоски</span></a></li>
  <li><a href='http://magmedteh.com/lancety.php'><span>Ланцеты</span></a></li>
  <li><a href='http://magmedteh.com/shpric-ruchki-dlja-insulina.php'><span>Шприц - ручки</span></a></li>
  </ul> 
  </li>

  <li class='has-sub'><a href='#'><span>Слуховые аппараты</span></a>
  <ul>
  <li><a href='http://magmedteh.com/hearing_aids.php'><span>Слуховые аппараты</span></a>
  <li><a href='http://magmedteh.com/accessories-for-hearing-aids.php'><span>Комплектующие к слуховым аппаратам</span></a></li>
  </ul>
  </li>
  
  <li class='has-sub'><a href='#'><span>Товары для мед.учреждений</span></a>
  <ul> 
  <li><a href='http://magmedteh.com/medicinskij-instrument.php'><span>Инструмент</span></a>
  </ul>
  </li>
  
  <li class='has-sub'><a href='#'><span>Домашняя медицина</span></a>
  <ul> 
  <li><a href='http://magmedteh.com/vesi.php'><span>Весы</span></a></li>
  <li><a href='http://magmedteh.com/ingaljatory.php'><span>Ингаляторы</span></a></li>
  <li><a href='http://magmedteh.com/elektrogrelki.php'><span>Электрогрелки</span></a></li>
  <li><a href='http://magmedteh.com/molokootsos.php'><span>Молокоотсосы</span></a></li>
  </ul>
  </li>
  
  <li class='has-sub'><a href='#'><span>Средства реабилитации</span></a>
  <ul> 
  <li><a href='http://magmedteh.com/khodunki.php'><span>Ходунки</span></a></li>
  <li><a href='http://magmedteh.com/trosti.php'><span>Трости</span></a></li>
  <li><a href='http://magmedteh.com/kostyli.php'><span>Костыли</span></a></li>
  </ul> 
  </li>
  
  <li class='has-sub'><a href='#'><span>Ортопедические изделия</span></a>
  <ul> 
  <li><a href='http://magmedteh.com/bandazhi.php'><span>Бандажи</span></a></li>
  <li><a href='http://magmedteh.com/korseti.php'><span>Корсеты</span></a></li>
  <li><a href='http://magmedteh.com/fiksatory-verkhnikh-konechnostej.php'><span>Фиксаторы верхних конечностей</span></a></li>
  <li><a href='http://magmedteh.com/fiksatsii-nizhnih-konechnostey.php'><span>Фиксаторы нижних конечностей</span></a></li>
  <li><a href='http://magmedteh.com/fiksator-dlya-shei.php'><span>Фиксаторы для Шеи</span></a></li>
  <li><a href='http://magmedteh.com/ortopedicheskie-stelki.php'><span>Ортопедические стельки</span></a></li>
  
  <li class='has-sub'><a href='#'><span>Компрессионный трикотаж</span></a>
  <ul>
  <li><a href='http://magmedteh.com/golfy.php'><span>Гольфы</span></a></li>
  <li><a href='http://magmedteh.com/kolgoty.php'><span>Колготы</span></a></li>
  <li><a href='http://magmedteh.com/chulki.php'><span>Чулки</span></a></li>
  </ul> 
  </li> 
  </ul> 
  </li> 
  
  <li><a href='#'><span>Средства по уходу за больными</span></a></li>
  
  <li class='has-sub'><a href='#'><span>Лечебно - проф. товары</span></a>
  <ul> 
  <li><a href='http://magmedteh.com/applikator-lyapko.php'><span>Аппликаторы ляпко</span></a></li>
  <li><a href='http://magmedteh.com/dieticheskie-dobavki.php'><span>Диетические добавки</span></a></li>
  </ul>
  </li> 
  
  <li class='has-sub'><a href='#'><span>Комплектующие</span></a> 
  <ul> 
  <li><a href='http://magmedteh.com/komplekt_k_tonometram.php'><span>Комплектующие к тонометрам</span></a></li>
  <li><a href='http://magmedteh.com/komplekt_k_ingalyatoram.php'><span>Комплектующие к ингаляторам</span></a></li>
  <li><a href='http://magmedteh.com/accessories-for-hearing-aids.php'><span>Комплектующие к слуховым аппаратам</span></a></li>
  <li><a href='http://magmedteh.com/stetoskop.php'><span>Стетоскопы</span></a></li>
  </ul> 
  </li> 

  <li><a href='#'><span>О магазине</span></a></li> 
  <li><a href='#'><span>Контакты</span></a></li> 
  </ul> 
</div>

#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a { 
  border: 0 none; 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
  display: block; 
  line-height: 1; 
  list-style: none outside none; 
  margin: 0; 
  padding: 0; 
  position: relative; 
} 
#cssmenu { 
  color: #ffffff; 
  font-family: Helvetica,Arial,sans-serif; 
  width: 240px; 
} 
#cssmenu ul ul { 
  display: none; 
} 
#cssmenu > ul > li > a { 
  background: rgb(54,170,231); /* Old browsers */ 
  background: -moz-linear-gradient(top, rgba(54,170,231,1) 0%, rgba(31,160,228,1) 100%); /* FF3.6+ */ 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(54,170,231,1)), color-stop(100%,rgba(31,160,228,1))); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(top, rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* Chrome10+,Safari5.1+ */ 
  background: -o-linear-gradient(top, rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* Opera 11.10+ */ 
  background: -ms-linear-gradient(top, rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* IE10+ */ 
  background: linear-gradient(to bottom, rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* W3C */ 
  border-left: 1px solid #1682ba; 
  border-right: 1px solid #1682ba; 
  border-top: 1px solid #1682ba; 
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset; 
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset; 
  color: #ffffff; 
  cursor: pointer; 
  font-size: 14px; 
  font-weight: bold; 
  padding: 15px 20px; 
  text-decoration: none; 
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); 
  z-index: 2; 
} 
#cssmenu > ul > li > a:hover, 
#cssmenu > ul > li.active > a, 
#cssmenu > ul > li.open > a { 
  background: rgb(31,160,228); /* Old browsers */ 
  background: -moz-linear-gradient(top, rgba(31,160,228,1) 0%, rgba(25,146,209,1) 100%); /* FF3.6+ */ 
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(31,160,228,1)), color-stop(100%,rgba(25,146,209,1))); /* Chrome,Safari4+ */ 
  background: -webkit-linear-gradient(top, rgba(31,160,228,1) 0%,rgba(25,146,209,1) 100%); /* Chrome10+,Safari5.1+ */ 
  background: -o-linear-gradient(top, rgba(31,160,228,1) 0%,rgba(25,146,209,1) 100%); /* Opera 11.10+ */ 
  background: -ms-linear-gradient(top, rgba(31,160,228,1) 0%,rgba(25,146,209,1) 100%); /* IE10+ */ 
  background: linear-gradient(to bottom, rgba(31,160,228,1) 0%,rgba(25,146,209,1) 100%); /* W3C */ 
  color: #f5f5f5; 
} 
#cssmenu > ul > li.open > a { 
  border-bottom: 1px solid #1682ba; 
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.15); 
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.15); 
} 
#cssmenu > ul > li:last-child > a, 
#cssmenu > ul > li.last > a { 
  border-bottom: 1px solid #1682ba; 
} 
.holder { 
  height: 0; 
  position: absolute; 
  right: 0; 
  top: 0; 
  width: 0; 
} 
.holder:after, .holder:before { 
  content: ""; 
  display: block; 
  height: 6px; 
  position: absolute; 
  right: 15px; 
  -webkit-transform: rotate(-135deg); 
  -moz-transform: rotate(-135deg); 
  transform: rotate(-135deg); 
  width: 6px; 
  z-index: 10; 
} 
.holder:after { 
  border-left: 2px solid #ffffff; 
  border-top: 2px solid #ffffff; 
  top: 17px; 
} 
#cssmenu > ul > li > a:hover > span:after, 
#cssmenu > ul > li.active > a > span:after, 
#cssmenu > ul > li.open > a > span:after { 
  border-color: #f5f5f5; 
} 
.holder:before { 
  border-left-color: inherit; 
  border-left-style: solid; 
  border-left-width: 2px; 
  border-top-color: inherit; 
  border-top-style: solid; 
  border-top-width: 2px; 
  top: 18px; 
} 
#cssmenu ul ul li a { 
  background:#49505a;  /* цвет подменю */
  border-bottom: 1px solid #32373e; 
  border-left: 1px solid #32373e; 
  border-right: 1px solid #32373e; 
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset; 
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset; 
  color: #eeeeee; 
  cursor: pointer; 
  font-size: 13px; 
  padding: 10px 20px; 
  text-decoration: none; 
  z-index: 1; 
} 
#cssmenu ul ul li:hover > a, 
#cssmenu ul ul li.open > a, 
#cssmenu ul ul li.active > a { 
  background: none repeat scroll 0 0 #d2d4d6; 
  color: black; 
} 
#cssmenu ul ul li:first-child > a { 
  -webkit-box-shadow: none; 
  box-shadow: none; 
} 
#cssmenu ul ul ul li:first-child > a { 
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset; 
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset; 
} 
#cssmenu ul ul ul li a { 
  padding-left: 30px; 
} 
#cssmenu > ul > li > ul > li:last-child > a, 
#cssmenu > ul > li > ul > li.last > a { 
  border-bottom: 0 none; 
} 
#cssmenu > ul > li > ul > li.open:last-child > a, 
#cssmenu > ul > li > ul > li.last.open > a { 
  border-bottom: 1px solid #d2d4d6; 
} 
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a { 
  border-bottom: 0 none; 
} 
#cssmenu ul ul li.has-sub > a:after { 
  border-left: 2px solid #f5f5f5; 
  border-top: 2px solid #f5f5f5; 
  content: ""; 
  display: block; 
  height: 5px; 
  position: absolute; 
  right: 20px; 
  top: 11.5px; 
  -webkit-transform: rotate(-135deg); 
  -moz-transform: rotate(-135deg); 
  transform: rotate(-135deg); 
  width: 5px; 
  z-index: 10; 
} 
#cssmenu ul ul li.active > a:after, 
#cssmenu ul ul li.open > a:after, 
#cssmenu ul ul li > a:hover:after { 
  border-color: #ffffff; 
}

<script>
    $(document).ready(function () { 
  $('#cssmenu li.has-sub > a').on('click', function(){ 
  $(this).removeAttr('href'); 
  var element = $(this).parent('li'); 
  if (element.hasClass('open')) { 
  element.removeClass('open'); 
  element.find('li').removeClass('open'); 
  element.find('ul').slideUp(); 
  } 
  else { 
  element.addClass('open'); 
  element.children('ul').slideDown(); 
  element.siblings('li').children('ul').slideUp(); 
  element.siblings('li').removeClass('open'); 
  element.siblings('li').find('li').removeClass('open'); 
  element.siblings('li').find('ul').slideUp(); 
  } 
  }); 
   
  $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>'); 
});
</script>
Изменено пользователем Skunk
скрывайте простыни пот тег [spoiler]

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


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

То, что Вы скопировали код с представленного сайта еще ничего не знает. Если я правильно понял, этот сайт не Ваш, а Вы просто хотите сделать аналогичное меню. Ищите в сторону вертикального меню для ОС.

 

P.S.: Есть еще несколько костыльный метод. Можно html код вставить через этот модуль https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=15439. Но в случае удаления/добавления категорий, понадобится менять код

Изменено пользователем neonox

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


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

Сайт мой, просто хочу посадить его на движок OC. Вставлять через код не вариант не удобно потом будет добавлять или удалять категории. 

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


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

может стоит рассмотреть и доработать например такой вариант
https://opencartforum.com/files/file/684-1000-категорий-меню-аккордеон/

еще вариант

https://opencartforum.com/files/file/2069-yo-%D0%BC%D0%B5%D0%BD%D1%8E-%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%BD%D1%8B%D0%B9-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8C-%D0%BC%D0%B5%D0%BD%D1%8E/

зачем изобретать велосипед, если на нем уже полмира ездит?

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


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

Охота понять именно мой пример как реализовать.

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


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

Править самому код ОС или ставить модуль.

Изменено пользователем neonox

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


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

neonox
не рекомендовал бы кидать сюда ссылки на варезники, могут забанить)))

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


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

neonox

не рекомендовал бы кидать сюда ссылки на варезники, могут забанить)))

упс... увидел цену и не обратил внимание, что это варезник

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


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

Править самому код ОС или ставить модуль

 

 

Правит самому.

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


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

Правит самому.

вряд ли кто выложит решение, которое априори стоит того, чтоб выложить его за деньги (даже малые)

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


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

Уважаемые знатоки. Помогите разобраться с структурой модуля категорий. Не могу реализовать такой вывод категорий как на этом сайте http://magmedteh.com

 

Нечто подобное я делал как-то раз из стандартного модуля категории меняя только css. Сейчас, конечно, не вспомню, что да как, но если есть минимальное представление о css, то вполне реально методом тыка сделать, как это сделал я.

 

Как вариант, посмотри это меню: Модуль меню категорий с изображениями для Opencart

Оно, к тому же, ещё и с картинками (можно отключить)

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


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

Попробуйте так:

 

Файл: catalog\view\theme\ВАШ_ШАБЛОН\template\module\category.tpl

<div id='cssmenu'> 
  <ul> 
  <?php foreach ($categories as $category) { ?>
  <li class='has-sub'><a href="<?php echo $category['href']; ?>"><span><?php echo $category['name']; ?></span></a> 
    <?php if ($category['children']) { ?>
	 <ul>
  <?php foreach ($category['children'] as $child) { ?>
  <li><a href="<?php echo $child['href']; ?>" ><span><?php echo $child['name']; ?></span></a></li>
    <?php } ?>
  </ul> 
    <?php } ?>
	</li>
   <?php } ?>
</ul> 
</div>

CSS пихнуть в Style.css

 

А javascript ближе к футеру.

Изменено пользователем djnick

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


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

по мне так один в один

демка

останется только переверстать HTML и повставлять переменные из дефолтного варианта, думаю минут 5-10 займет у Вас
готового кода выкладывать принципиально не собираюсь (голова ТС то же должна работать в процессе)

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


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

Попробуйте так:

 

Файл: catalog\view\theme\ВАШ_ШАБЛОН\template\module\category.tpl

<div id='cssmenu'> 
  <ul> 
  <?php foreach ($categories as $category) { ?>
  <li class='has-sub'><a href="<?php echo $category['href']; ?>"><span><?php echo $category['name']; ?></span></a> 
    <?php if ($category['children']) { ?>
	 <ul>
  <?php foreach ($category['children'] as $child) { ?>
  <li><a href="<?php echo $child['href']; ?>" ><span><?php echo $child['name']; ?></span></a></li>
    <?php } ?>
  </ul> 
    <?php } ?>
	</li>
   <?php } ?>
</ul> 
</div>

CSS пихнуть в Style.css

 

А javascript ближе к футеру.

 

Спасибо за решение. Всё получилось.

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


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

А этот топик точно про ОС2 ? В нём ведь в контроллере надо вывод всех чайлдов дописывать, иначе будут только для активной родительской....

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


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

А этот топик точно про ОС2 ? В нём ведь в контроллере надо вывод всех чайлдов дописывать, иначе будут только для активной родительской....

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

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


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

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

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

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

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

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

Войти

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

Войти

  • Похожий контент

    • От itmades
      В общем суть простая: родной модуль "категории" показывает субкатегории лишь при переходе на родительскую категорию. Нужно сделать так, чтобы отображался список при наведении курсора, как в верхнем меню.
      Для лучшего понимания приведу пример (правда не на opencart)
      basket-parts.ru
    • От Profile
      Доброго времени суток!
      Ищу модуль скидок от количества товара для определённой категории.
      Пример, есть на сайте категории - футболки и джинсы.
      Нужно выставить акцию только на футболки - купи 2 футболки и получи скидку 30% - купи 3 футболки получи 50% скидку.
       
      Нашёл отличный модуль, но в нём не хватает возможности выбора определённой категории.
      https://opencartforum.com/files/file/1316-модуль-скидки-наценки-в-зависимости-от-количес/
      Подскажите, может есть аналогичный модуль но с возможностью выбора категорий?
      Заранее спасибо!
    • От AnnValder
      Здравствуйте! Долго искала как реализовать вывод третьего уровня меню в модуле категорий, в итоге воспользовалась следующим методом (только он и помог) http://echo-igor.livejournal.com/5762.html - редактирование controller/module/category.php и template/module/category.tpl и добавление sisters под child. Теперь на сайте выводится третий уровень вертикального меню, и выглядит это так:
       

       
      Так вот, категории второго уровня появляются только когда категория первого уровня активна. А вот категории третьего уровня видны вне зависимости от активности их старшей, второй категории.
       
      Подскажите, пожалуйста, как реализовать, или в какую сторону копать, чтоб третий уровень категорий было видно только при активности второй (а не просто так, как сейчас), а при неактивности чтоб они были "спрятаны"? Может, кто-то занимался уже таким?...
       
      Спасибо большое за подсказку заранее!
    • От KoMaToZZzz
      Добрый день, подскажите в чем может проблема. Сайт на OCSHOP 2.0.3.1. При включении SEO URL модуль категории не показывает категории 2-го и 3-го уровней. То есть список просто закрыт и переходить в другую категорию находясь в самой последней неудобно - приходиться выходить на самый верх и потом снова идти по категориям. Когда SEO выключен, все норм.
      Та же проблема и с хлебными крошками. Когда SEO включен крошки отображают только главную и категорию, в которой сейчас находишься.
    • От Mimimot
      Здравствуйте,есть желание чтоб в  стандартном модуле категорий по умолчанию были раскрыты все категории и подкатегории
       
      сейчас видны только самые старшие категории   
        а хочу 
        чтобы все категории и подкатегории были видны в этом списке(у меня их не много)
      подскажите пожалуйста,что-то можно сделать?
  • Последние посетители   0 пользователей онлайн

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

×

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

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