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

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

Змінено 21 листопада 2016 користувачем Skunk
скрывайте простыни пот тег [spoiler]

[neonox]

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

 

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

Змінено 21 листопада 2016 користувачем neonox

[kolyan12]

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

[kolyan12]

  В 21.11.2016 в 08:08, Pascha сказав:

может стоит рассмотреть и доработать например такой вариант

https://opencartforum.com/files/file/684-1000-%D0%BA%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D0%B9-%D0%BC%D0%B5%D0%BD%D1%8E-%D0%B0%D0%BA%D0%BA%D0%BE%D1%80%D0%B4%D0%B5%D0%BE%D0%BD/

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

[neonox]

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

Змінено 21 листопада 2016 користувачем neonox

[neonox]

  В 21.11.2016 в 08:23, Pascha сказав:

neonox

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

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

[kolyan12]

  В 21.11.2016 в 08:15, neonox сказав:

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

 

 

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

[SiteMix]

  kolyan12 писав:

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

 

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

 

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

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

[djnick]

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

 

Файл: 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 ближе к футеру.

Змінено 25 листопада 2016 користувачем djnick

[kolyan12]

  В 25.11.2016 в 11:41, djnick сказав:

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

 

Файл: 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 ближе к футеру.

 

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

[Shureg]

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

[djnick]

  В 25.11.2016 в 17:23, Shureg сказав:

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

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