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

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

kolyan12

Автор: ,
в Opencart 2.x: Пісочниця

 Share

Recommended Posts

kolyan12 Rookie

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]
Надіслати
Поділитися на інших сайтах

neonox Proficient

neonox

Опубліковано:
Опубліковано: (змінено)

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

 

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

Змінено користувачем neonox
Надіслати
Поділитися на інших сайтах

kolyan12 Rookie

kolyan12

Опубліковано:
  • Автор
Опубліковано:

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

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

kolyan12 Rookie

kolyan12

Опубліковано:
  • Автор
Опубліковано:

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

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

SiteMix Grand Master

SiteMix

Опубліковано:
Опубліковано:

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

 

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

 

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

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

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

djnick Contributor

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

Змінено користувачем djnick
Надіслати
Поділитися на інших сайтах

kolyan12 Rookie

kolyan12

Опубліковано:
  • Автор
Опубліковано:

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

 

Файл: 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 Grand Master

Shureg

Опубліковано:
Опубліковано:

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

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

djnick Contributor

djnick

Опубліковано:
Опубліковано:

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

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

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

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

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

  Я даю згоду