Перейти к содержимому


Помогите С Горизонтальным Каталогом

каталог

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 5

#1 pin

pin

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 71 сообщений
  • ГородМосква

Отправлено 18 Февраль 2014 - 10:59

Всем доброго дня! помогите пожалуйста сделать на сайте каталог товаров.
Сейчас у меня горизонтальный каталог и при наведении на категорию первого уровня открываются вертикально категории второго уровня и т.д.
Хотелось бы чтобы все категории и подкатегории открывались горизонтально например при наведения на категорию первого уровня (Кондиционеры) открывались подкатегории второго уровня вложенные под категорией (Кондиционеры). а при наведений на подкатегорию например (Сплит системы) открывались подкатегории третьего уровня (Бренды). Помогите пожалуйста! мой сайт http://ayr-split.ru/   вот сайт на котором почти какой каталог http://www.imperiale...onery/nastennye

Прикрепленные изображения

  • Ayr-Split.ru.jpg
  • Безымянный123.png


#2 @lina_va

@lina_va

    Активный участник

  • Модератоpы
  • 498 сообщений

Отправлено 18 Февраль 2014 - 14:39

Просмотр сообщенияpin (18 Февраль 2014 - 10:59) писал:

Всем доброго дня! помогите пожалуйста сделать на сайте каталог товаров.
Сейчас у меня горизонтальный каталог и при наведении на категорию первого уровня открываются вертикально категории второго уровня и т.д.
Хотелось бы чтобы все категории и подкатегории открывались горизонтально например при наведения на категорию первого уровня (Кондиционеры) открывались подкатегории второго уровня вложенные под категорией (Кондиционеры). а при наведений на подкатегорию например (Сплит системы) открывались подкатегории третьего уровня (Бренды). Помогите пожалуйста! мой сайт http://ayr-split.ru/   вот сайт на котором почти какой каталог http://www.imperiale...onery/nastennye
В шаблоне Товар замените:
   <!-- Если список товаров пуст -->
				  {% IF goods_empty %}
						<td>
						  <!-- Если не применено ни одного фильтра, значит в категории нет товаров -->
						  {% IF goods_filters_empty %}
						 
								<!-- Если в категории нет товаров, но есть категории, то отобразим их -->
								{%IFNOT nested_categories_list_empty %}
				
								  <!-- Блок навигации по категориям, вложенным в текущую категорию -->
								  <ul class="content_catalog_nested_categories">
										{% FOR nested_categories_list %}
										  <li>
												<div class="withBorder cornerAll" style="padding:1em">
												  <div><a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;"><img class="goods-cat-image-medium" {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div>
												  <a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">{nested_categories_list.NAME}</a>
												</div>
										  </li>
										{% ENDFOR %}
								  </ul>
								  <br clear="all"/>
								<!-- Если в категории нет ни товаров, ни категорий то сообщим пользователю что ничего нет -->
								{% ELSE %}
								 <h3>Нет товаров в категории</h3>
								{% ENDIF %}
				
						  <!-- Если производили фильтрацию товаров в категории -->
						  {% ELSE %}
								<h3>Нет товаров для выбранных условий</h3>
						  {% ENDIF %}
						</td>
				  <!-- Если есть товары -->
				  {% ELSE %}
						{% FOR goods %}
на
<!-- Если список товаров пуст -->
				  {% IF goods_filters_empty %}
						<td>
						  <!-- Если не применено ни одного фильтра, значит в категории нет товаров -->
						
						 
								<!-- Если в категории нет товаров, но есть категории, то отобразим их -->
								{%IFNOT nested_categories_list_empty %}
				
								  <!-- Блок навигации по категориям, вложенным в текущую категорию -->
								  <ul class="content_catalog_nested_categories">
										{% FOR nested_categories_list %}
										  <li>
												<div class="withBorder cornerAll" style="padding:1em">
												  <div><a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;"><img class="goods-cat-image-medium" {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div>
												  <a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">{nested_categories_list.NAME}</a>
												</div>
										  </li>
										{% ENDFOR %}
								  </ul>
								  <br clear="all"/>
								<!-- Если в категории нет ни товаров, ни категорий то сообщим пользователю что ничего нет -->
								{% ELSEIF goods_empty %}
								 <h3>Нет товаров в категории</h3>
								{% ENDIF %}
				
						  <!-- Если производили фильтрацию товаров в категории -->
						  {% ELSE %}
								<h3>Нет товаров для выбранных условий</h3>
						
						</td>
				  {% ENDIF %}
				  <!-- Если есть товары -->
				  {% IFNOT goods_empty && nested_categories_list_empty %}
						{% FOR goods %}


#3 pin

pin

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 71 сообщений
  • ГородМосква

Отправлено 18 Февраль 2014 - 16:04

Просмотр сообщения@lina_va (18 Февраль 2014 - 14:39) писал:

В шаблоне Товар замените:
<!-- Если список товаров пуст -->
				 {% IF goods_empty %}
					 <td>
						 <!-- Если не применено ни одного фильтра, значит в категории нет товаров -->
						 {% IF goods_filters_empty %}
						
							 <!-- Если в категории нет товаров, но есть категории, то отобразим их -->
							 {%IFNOT nested_categories_list_empty %}
				
								 <!-- Блок навигации по категориям, вложенным в текущую категорию -->
								 <ul class="content_catalog_nested_categories">
									 {% FOR nested_categories_list %}
										 <li>
											 <div class="withBorder cornerAll" style="padding:1em">
												 <div><a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;"><img class="goods-cat-image-medium" {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div>
												 <a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">{nested_categories_list.NAME}</a>
											 </div>
										 </li>
									 {% ENDFOR %}
								 </ul>
								 <br clear="all"/>
							 <!-- Если в категории нет ни товаров, ни категорий то сообщим пользователю что ничего нет -->
							 {% ELSE %}
								 <h3>Нет товаров в категории</h3>
							 {% ENDIF %}
				
						 <!-- Если производили фильтрацию товаров в категории -->
						 {% ELSE %}
							 <h3>Нет товаров для выбранных условий</h3>
						 {% ENDIF %}
					 </td>
				 <!-- Если есть товары -->
				 {% ELSE %}
					 {% FOR goods %}
на
<!-- Если список товаров пуст -->
				 {% IF goods_filters_empty %}
					 <td>
						 <!-- Если не применено ни одного фильтра, значит в категории нет товаров -->
						
						
							 <!-- Если в категории нет товаров, но есть категории, то отобразим их -->
							 {%IFNOT nested_categories_list_empty %}
				
								 <!-- Блок навигации по категориям, вложенным в текущую категорию -->
								 <ul class="content_catalog_nested_categories">
									 {% FOR nested_categories_list %}
										 <li>
											 <div class="withBorder cornerAll" style="padding:1em">
												 <div><a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;"><img class="goods-cat-image-medium" {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div>
												 <a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">{nested_categories_list.NAME}</a>
											 </div>
										 </li>
									 {% ENDFOR %}
								 </ul>
								 <br clear="all"/>
							 <!-- Если в категории нет ни товаров, ни категорий то сообщим пользователю что ничего нет -->
							 {% ELSEIF goods_empty %}
								 <h3>Нет товаров в категории</h3>
							 {% ENDIF %}
				
						 <!-- Если производили фильтрацию товаров в категории -->
						 {% ELSE %}
							 <h3>Нет товаров для выбранных условий</h3>
						
					 </td>
				 {% ENDIF %}
				 <!-- Если есть товары -->
				 {% IFNOT goods_empty && nested_categories_list_empty %}
					 {% FOR goods %}

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

Прикрепленные изображения

  • Ayr-Split999.jpg


#4 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 19 Февраль 2014 - 01:32

кнопки указанные в примере-скриншоте из сообщения:
http://forum.storela...йт/#entry122389

Это фильтры, только реализованные в виде кнопок. Вам необходимо для этого добавить характеристики "производитель" к товарам и далее включить фильтры в необходимых вам категориях

#5 pin

pin

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 71 сообщений
  • ГородМосква

Отправлено 19 Февраль 2014 - 21:34

Просмотр сообщенияVaccina (19 Февраль 2014 - 01:43) писал:

По поводу горизонтального каталога,в main.css найдите:
#nav ul ul {
top: 0;
}
замените на:
#nav ul ul {
display: none !important;
top: 0;
}
далее найдите:
#nav {
	font-size: 20px;
	margin: 0 auto;
	padding: 0 0 32px 7px;
	position: relative;
	width: 960px;
}
#nav ul {
	background: none repeat scroll 0 0 #2F8BBA;
	border: 0 none;
	font-size: 20px;
	left: -10000px;
	padding: 0;
	position: absolute;
	top: 0;
	width: 15em;
}
#nav li {
	position: relative;
	text-align: left;
}
#nav ul li {
background: none;
border: medium none;
float: none;
width: 100%;
}
#nav ul li a {
	color: #050505 !important;
	float: none;
	font-weight: normal;
	padding: 3px 9px;
}
замените на:
#nav {
font-size: 20px;
margin: 0 auto;
padding: 0 0 32px 7px;
width: 960px;
}
#nav ul {
background: none repeat scroll 0 0 #EFEFEF;
border: 0 none;
font-size: 14px;
left: -10000px;
padding: 0;
position: absolute;
top: 0;
width: 960px;
}
#nav li {
text-align: left;
}
#nav ul li {
background: none;
border: medium none;
float: left;
width: auto;
}
#nav ul li a {
color: #050505;
float: none;
font-weight: bold;
padding: 3px 9px;
text-decoration: none;
text-transform: none;
}

На счет второго уровня категорий кнопками без картинок, ответила в другой теме:
http://forum.storela...328#entry122328

Просмотр сообщенияVaccina (19 Февраль 2014 - 01:32) писал:

кнопки указанные в примере-скриншоте из сообщения:
http://forum.storela...йт/#entry122389

Это фильтры, только реализованные в виде кнопок. Вам необходимо для этого добавить характеристики "производитель" к товарам и далее включить фильтры в необходимых вам категориях

Спасибо Вам огромное!!! Я 2 года пользуюсь Вашей платформой и только сейчас увидел фильтр по характеристикам :) но у меня к Вам еще несколько вопросов:
1) Как закрепить сделать каталог? то есть чтобы при наведении на первую подгруппу ( КОНДИЦИОНЕРЫ | ВЕНТИЛЯЦИЯ | ОТОПЛЕНИЕ) вторая подгруппа не исчезала до тез пор пока посетитель находится в категории КОНДИЦИОНЕРЫ, что бы находясь в оконных кондиционеров он мог перед собой видеть и категории настенные | мультисплит системы и т.д.  

2) Как сделать так что бы фильтр находился над списком товаров?

3) Помогите чуть при отпустить строку поиска ниже а корзину чуть правее)

4) Помогите выровнять сайт а то он у меня потерял все размеры. :Шапку, меню и каталог оставить во весь  экран а список товаров и содержимое страниц по центру как надо.

Фото с примерным того чего хочу прилагаю.
За ранее спасибо! (Вы меня всегда так выручаете)

Прикрепленные изображения

  • 7979.png


#6 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 23 788 сообщений

Отправлено 20 Февраль 2014 - 03:46

1. В main.css найдите:
#nav li.over ul {
	left: 0;
	top: 45px;
}
после добавьте:
#nav li.activeparent ul {
	left: 0;
	top: 45px;
}
также у вас не все изменения, что я указала выше проделаны, а от них работа выпадающего списка зависит, найдите:
#nav li {
	position: relative;
	text-align: left;
}
замените на:
#nav li {
	text-align: left;
}

2. На подобный вопрос уже имеется инструкция:
http://forum.storela...__40#entry14460

3. В main.css найдите:
Для поиска:
#searchPanel {
	position: absolute;
	right: 0.5px;
	top: 80px;
}
увеличьте значение top чтобы блок опустился

Для корзины:
#cartInfo {
	font-size: 13px;
	position: absolute;
	right: 170px;
	text-align: center;
	top: 1px;
	white-space: nowrap;
}
уменьшите значение right

4. В main.css найдите:
#nav {
	font-size: 23px;
	margin: 0 auto;
	padding: 0 0 32px 7px;
	width: 1220px;
}
замените на:
#nav {
	font-size: 23px;
	margin: 0 auto;
	padding: 0 0 32px 7px;
	position: relative;
	width: 100%;
}
далее найдите:
#nav ul {
	background: none repeat scroll 0 0 #ABCDEF;
	border: 1px solid #FFF5EE;
	font-size: 20px;
	left: -10000px;
	padding: 0;
	position: absolute;
	top: 0;
	width: 1220px;
}
замените на:
#nav ul {
	background: none repeat scroll 0 0 #ABCDEF;
	border: 1px solid #FFF5EE;
	font-size: 20px;
	left: -10000px;
	padding: 0;
	position: absolute;
	top: 0;
	width: 100%;
}






Темы с аналогичным тегами каталог

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных