Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

7

Каталог Товаров

Автор Igork, 16 апр. 2011 22:55

Авторизуйтесь для ответа в теме

Сообщений в теме: 192

#61 Repych

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

Пользователи
52 сообщений

ГородМосква

Отправлено 22 Апрель 2013 - 12:27

Vaccina (20 Апрель 2013 - 01:29) писал:

У вас по сути меню работает корректно, отсутствуют стили, изображения такие как "treeview-default-line.gif" и "treeview-default.gif". Так же потерялась стандартная структура каталога - плашки и т.д

У вас блок с каталогом должен быть вида

<div class="block">
<div class="blocktitle bluesmall"><a href="http://test-storeland.storeland.ru/catalog">Каталог сайта</a></div>
<div class="blockmain navigation fnt12n">
	 <ul id="navigation" class="treeview">
		 .....							
	 </ul>
</div>
<div class="blockbottom"></div>
</div>

а у вас сейчас просто

	 <ul id="navigation" class="treeview">
		 .....							
	 </ul>

Из-за этого слетела стандартная стилизация.

Я скопировал код каталога из темы, в которой производилась настройка. Вернул обратно стандартный код с изменениями

<!-- Каталог сайта -->
<div class="block">
	 <div class="blocktitle bluesmall"><a href="{CATALOG_URL}">Каталог сайта</a></div>
	 <div class="blockmain navigation fnt12n">
	 <ul id="navigation" class="treeview">
	 {% IFNOT catalog_full_empty %}
		 {% FOR catalog_full %}
		 {% IFNOT catalog_full.HIDE %}
			 <li class="{% IF catalog_full.LEVEL>0%}incat{% ENDIF %} {% IF catalog_full.CURRENT %}fnt12b{% ENDIF %}"><a href="{catalog_full.URL}" {% IF catalog_full.LEVEL>0%}style="padding-left:{catalog_full.LEVEL | multiply("30")}px"{% ENDIF %}>{catalog_full.NAME}</a></li>
		 {% ENDIF %}
		 {% ENDFOR %}
	 {% ENDIF %}
	 </ul>
	 </div>
	 <div class="blockbottom"></div>
</div>
<!-- END Каталог сайта -->

Результата нет, каталог развернут, эту картинку я уже видел.

Наверх

#62 Repych

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

Пользователи
52 сообщений

ГородМосква

Отправлено 23 Апрель 2013 - 01:07

Доброй ночи!
Воспользовался опытом коллег, подключил:

<link rel="stylesheet" href="{ASSETS_STYLES_PATH}jquery.treeview.css" type="text/css" />
<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.treeview.js"></script>

В main.js добавил:

$(document).ready(function(){
$("#treenavigation").treeview({
animated: "fast",
persist: "location",
collapsed: true,
unique: true,
});
});

Судя по всему осталось правильно написать раздел "Каталог сайта". С лету не удалось это сделать, буду благодарен за подсказку. Я понимаю, что к <li> нужно добавлять класс collapsable или expandable, добавлять блоки с картинками <div class="hitarea collapsable-hitarea"></div> и т.д., но осилить пока не могу.
Помогите, пожалуйста, тестовый аккаунт SL-198568

Наверх

#63 Сake

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

Модератоpы
5 979 сообщений

Отправлено 23 Апрель 2013 - 02:55

Вы не правильно поняли сообщение http://forum.storela...__40#entry61453
вам не нужно было полностью возвращать старый код каталога, вам необходимо было только обвернуть код каталога который у вас был в дополнительные стандартные блоки. Должно получиться так

<!-- Каталог сайта -->
<div class="block">
		 <div class="blocktitle bluesmall"><a href="{CATALOG_URL}">Каталог сайта</a></div>
		 <div class="blockmain navigation fnt12n">
		 <ul id="navigation" class="treeview">
Старый код вашего каталога до изменения после прочтения сообщения http://forum.storeland.ru/index.php?/topic/456-%d0%ba%d0%b0%d1%82%d0%b0%d0%bb%d0%be%d0%b3-%d1%82%d0%be%d0%b2%d0%b0%d1%80%d0%be%d0%b2/page__st__40#entry61453
		 </ul>
		 </div>
		 <div class="blockbottom"></div>
</div>
<!-- END Каталог сайта -->

Наверх

#64 Repych

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

Пользователи
52 сообщений

ГородМосква

Отправлено 24 Апрель 2013 - 23:00

Сake (23 Апрель 2013 - 02:55) писал:

Вы не правильно поняли сообщение http://forum.storela...__40#entry61453
вам не нужно было полностью возвращать старый код каталога, вам необходимо было только обвернуть код каталога который у вас был в дополнительные стандартные блоки. Должно получиться так

<!-- Каталог сайта -->
<div class="block">
		 <div class="blocktitle bluesmall"><a href="{CATALOG_URL}">Каталог сайта</a></div>
		 <div class="blockmain navigation fnt12n">
		 <ul id="navigation" class="treeview">
Старый код вашего каталога до изменения после прочтения сообщения http://forum.storeland.ru/index.php?/topic/456-%d0%ba%d0%b0%d1%82%d0%b0%d0%bb%d0%be%d0%b3-%d1%82%d0%be%d0%b2%d0%b0%d1%80%d0%be%d0%b2/page__st__40#entry61453
		 </ul>
		 </div>
		 <div class="blockbottom"></div>
</div>
<!-- END Каталог сайта -->

Наконец-то хоть что-то похожее у меня получилось, спасибо! Но работает неверно, категории отображаются с отступом, подкатегории - без. Выбранная категория без фона. И хотелось бы, что иконка менялась при развертывании категории. Подскажите, пожалуйста, как всё это исправить и сделать?
Тестовый аккаунт SL-198568.

Наверх

#65 Сake

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

Модератоpы
5 979 сообщений

Отправлено 25 Апрель 2013 - 02:43

Вам необходимо сделать следующее: В файле стилей main.css найти

#left .block .navigation ul li, #right .block .navigation ul li {
	background: url("http://basist.storeland.net/block-main-nav-bg.jpg") no-repeat scroll 0 0 transparent;
	border-bottom: 1px solid #E2E2E2;
	border-top: 1px solid #FFFFFF;
	overflow: hidden;
	width: 223px;
}

и заменить на

#left .block .navigation ul li, #right .block .navigation ul li {
	border-bottom: 1px solid #E2E2E2;
	border-top: 1px solid #FFFFFF;
	overflow: hidden;
}

далее найти

#left .block .navigation ul li a, #right .block .navigation ul li a {
	color: #4C4C4C;
	display: block;
	line-height: 24px;
	overflow: hidden;
	padding: 4px 5px 5px 25px;
}

и заменить на

#left .block .navigation ul li a, #right .block .navigation ul li a {
	color: #4C4C4C;
	display: block;
	line-height: 24px;
	overflow: hidden;
	padding: 4px 5px 5px 5px;
}

далее найти

#left .block .navigation ul li:hover, #right .block .navigation ul li:hover {
	background: url("http://basist.storeland.net/block-main-nav-bg.jpg") no-repeat scroll 0 -34px transparent;
}

и заменить на

#left .block .navigation ul li:hover, #right .block .navigation ul li:hover {
	background: none;
}

далее необходимо в файле стилей jquery.treeview.css найти

.treeview li {
	margin: 0 12px 0 -12px;
}

и заменить на

.treeview li {
	margin: 0;
}

далее найти

.treeview li {
	padding: 0 5pt 0 12px;
}

и заменить на

.treeview li {
	padding: 0;
}

далее найти

.treeview li.last {
	margin: 0 12px 0 -12px;
}

и заменить на

.treeview li.last {
	margin: 0;
}

далее найти

.treeview .hitarea.expandable-hitarea {
	background: url("/design/plus.png") no-repeat scroll 0 0 transparent;
	cursor: pointer;
	float: left;
	height: 18px;
	margin-left: 3px;
	margin-top: 6px;
	width: 18px;
}

и заменить на

.treeview .hitarea.expandable-hitarea {
	background: url("http://basist.storeland.net/plus.gif") no-repeat scroll 0 0 transparent;
	cursor: pointer;
	float: left;
	height: 18px;
	margin-left: 3px;
	margin-top: 12px;
	width: 18px;
}

далее найти

.treeview li.expandable {
	background-image: url("http://basist.storeland.net/plus.gif");
}

и заменить на

.treeview li.expandable {
	background-image: none;
}

далее найти

.treeview li.collapsable {
	background-image: url("http://basist.storeland.net/minus.gif");
}

и заменить на

.treeview li.collapsable {
	background-image: none;
}

далее найти

.treeview .hitarea.collapsable-hitarea {
	background: url("/design/minus.png") no-repeat scroll 0 0 transparent;
	cursor: pointer;
	float: left;
	height: 18px;
	margin-left: 3px;
	margin-top: 6px;
	width: 18px;
}

и заменить на

.treeview .hitarea.collapsable-hitarea {
	background: url("http://basist.storeland.net/minus.gif") no-repeat scroll 0 0 transparent;
	cursor: pointer;
	float: left;
	height: 18px;
	margin-left: 3px;
	margin-top: 12px;
	width: 18px;
}

далее добавить

.treeview ul li {
	padding-left: 35px;
}

Наверх

#66 Repych

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

Пользователи
52 сообщений

ГородМосква

Отправлено 25 Апрель 2013 - 17:57

Спасибо большое, но не все заработало.
Еще изменил:
.treeview li.lastCollapsable {background-image: url({ASSETS_IMAGES_PATH}minus.gif);}
на
.treeview li.lastCollapsable {background-image: none;}

.treeview li.lastExpandable {background-image: url({ASSETS_IMAGES_PATH}plus.gif);}
на
.treeview li.lastExpandable {background-image: none;}

И вот что осталось:

Категории Для него и Для неё на разных уровнях, снизу две нижние границы на расстоянии от левого края и одна нижняя граница лишняя.

Наверх

#67 Koderhan

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

Модератоpы
6 227 сообщений

Отправлено 25 Апрель 2013 - 20:55

Repych (25 Апрель 2013 - 17:57) писал:

Спасибо большое, но не все заработало.
Еще изменил:
.treeview li.lastCollapsable {background-image: url({ASSETS_IMAGES_PATH}minus.gif);}
на
.treeview li.lastCollapsable {background-image: none;}

.treeview li.lastExpandable {background-image: url({ASSETS_IMAGES_PATH}plus.gif);}
на
.treeview li.lastExpandable {background-image: none;}

И вот что осталось:
Прикрепленный файл

Снимок.PNG
Категории Для него и Для неё на разных уровнях, снизу две нижние границы на расстоянии от левого края и одна нижняя граница лишняя.

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Добавить в конец файла код:


.treeview ul .lastExpandable {
	padding-left: 14px;
}

Наверх

#68 Repych

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

Пользователи
52 сообщений

ГородМосква

Отправлено 25 Апрель 2013 - 21:28

Koderhan (25 Апрель 2013 - 20:55) писал:

Панель администратора, "Сайт"->"Редактор тем".
В файле "main.css".
Добавить в конец файла код:


.treeview ul .lastExpandable {
padding-left: 14px;
}

Если добавить еще строку .treeview ul .lastCollapsable { padding-left: 14px; }, то получается вот так:

Как убрать разрывы границ слева у подкатегорий и двойную нижнюю границу у последней категории?

Наверх

#69 Сake

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

Модератоpы
5 979 сообщений

Отправлено 26 Апрель 2013 - 02:18

Добавьте в файл стилей jquery.treeview.css

.treeview li ul li, .treeview li ul {
	 border: medium none ! important;
}

сделать корректный отступ и в тоже время подчеркивание всего блока - не получиться, поэтому у вложенных блоков лучше подчеркивание убрать.

Наверх

#70 Repych

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

Пользователи
52 сообщений

ГородМосква

Отправлено 26 Апрель 2013 - 10:09

Сake (26 Апрель 2013 - 02:18) писал:

Добавьте в файл стилей jquery.treeview.css

.treeview li ul li, .treeview li ul {
	 border: medium none ! important;
}

сделать корректный отступ и в тоже время подчеркивание всего блока - не получиться, поэтому у вложенных блоков лучше подчеркивание убрать.

Если по другому никак, то остановлюсь на этом варианте. Спасибо!

Наверх

#71 tatachka

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

Пользователи
52 сообщений

ГородВеликий Новгород

Отправлено 26 Май 2013 - 09:51

Добрый день.
В очередной раз попробовала все, что написано в этой ветке. и обратно откатила. Скажите, пожалуйста, должна работать (или нет) инструкция-ответ на вопрос:
Как в разворачиваемом меню кат. товаров слева, сделать так чтобы:
по клику на знак + или стрелочка меню разворачивается без смены страницы
по клику на пункт меню — меню разворачивается и происходит переход на
новую страницу
С чего все же начинать. Или эта настройка индивидуальна для каждого конкретного магазина.
Мой аккаунт SL-93507

Наверх

#72 miyako

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

Модератоpы
5 372 сообщений

Отправлено 26 Май 2013 - 10:21

tatachka (26 Май 2013 - 09:51) писал:

Добрый день.
В очередной раз попробовала все, что написано в этой ветке. и обратно откатила. Скажите, пожалуйста, должна работать (или нет) инструкция-ответ на вопрос:
Как в разворачиваемом меню кат. товаров слева, сделать так чтобы:
по клику на знак + или стрелочка меню разворачивается без смены страницы
по клику на пункт меню — меню разворачивается и происходит переход на
новую страницу
С чего все же начинать. Или эта настройка индивидуальна для каждого конкретного магазина.
Мой аккаунт SL-93507

Как я понимаю у вас тема сияние.
Для вас подойдет такой код каталога:
Найдите код:

<!-- Каталог -->
			  <div class="pad-box">
				<ul class="leftmenu">
				  <li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров</a></h2>
					<ul>
					{%IFNOT catalog_empty %}
					  {% FOR catalog %}
						{% IFNOT catalog.HIDE %}
						  <li class="cat-item">
							<a href="{catalog.URL}"
							  {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
							  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
							>{catalog.NAME}</a>
						  </li>
						{% ENDIF %}
					  {% ENDFOR %}
					{% ENDIF %}
					</ul><br />
				  </li>

и замените на:

<!-- Каталог -->
			  <div class="pad-box">
				<ul class="leftmenu">
				  <li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров</a></h2>
				   {%IFNOT catalog_full_empty %}
						  {% FOR catalog_full %}
								{% IFNOT catalog_full.HIDE %}
								  {% IF catalog_full.FIRST %}<ul id="myTree">{% ENDIF %}
										 <li>
										   <a href="{catalog_full.URL}"
												  {% IF catalog_full.CURRENT %}
														class="contentTbodycatalog_fullCurent"
												  {% ELSEIF catalog_full.CURRENT_PARENT %}
														class="contentTbodycatalog_fullCurentBranch"
												  {% ENDIF %}
												  {% IF catalog_full.ISSET_SUB %}rel="withchild"{% ENDIF %}
										   >
												{catalog_full.NAME}
												<!-- Отображение количества товаров в категории -->
												{% IF catalog_full.GOODS_COUNT>0 %}
												 ({catalog_full.GOODS_COUNT})
												{% ENDIF %}
										  </a>
										{% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
								  {% IF catalog_full.LAST %}
										{% FOR out %}</ul>{%IFNOT catalog_full.out.LAST %}</li>{% ENDIF %}{% ENDFOR %}
								  {% ENDIF %}
								{% ENDIF %}
						  {% ENDFOR %}
						{% ENDIF %}
					</ul><br />
				  </li>

В остальном все также как и в сообщении - http://forum.storela...аров/#entry2906

Наверх

#73 tatachka

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

Пользователи
52 сообщений

ГородВеликий Новгород

Отправлено 26 Май 2013 - 10:44

miyako (26 Май 2013 - 10:21) писал:

Как я понимаю у вас тема сияние.
Для вас подойдет такой код каталога:

замените на:

<!-- Каталог -->
			 <div class="pad-box">
			 <ul class="leftmenu">
				 <li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров</a></h2>
				 {%IFNOT catalog_full_empty %}
						 {% FOR catalog_full %}
							 {% IFNOT catalog_full.HIDE %}
								 {% IF catalog_full.FIRST %}<ul id="myTree">{% ENDIF %}
										 <li>
										 <a href="{catalog_full.URL}"
												 {% IF catalog_full.CURRENT %}
													 class="contentTbodycatalog_fullCurent"
												 {% ELSEIF catalog_full.CURRENT_PARENT %}
													 class="contentTbodycatalog_fullCurentBranch"
												 {% ENDIF %}
												 {% IF catalog_full.ISSET_SUB %}rel="withchild"{% ENDIF %}
										 >
											 {catalog_full.NAME}
											 <!-- Отображение количества товаров в категории -->
											 {% IF catalog_full.GOODS_COUNT>0 %}
												 ({catalog_full.GOODS_COUNT})
											 {% ENDIF %}
										 </a>
									 {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
								 {% IF catalog_full.LAST %}
									 {% FOR out %}</ul>{%IFNOT catalog_full.out.LAST %}</li>{% ENDIF %}{% ENDFOR %}
								 {% ENDIF %}
							 {% ENDIF %}
						 {% ENDFOR %}
					 {% ENDIF %}
				 </ul><br />
				 </li>

В остальном все также как и в сообщении - http://forum.storela...аров/#entry2906

Спасибо. Нашла, заменила... Изменений не заметила...

Наверх

#74 miyako

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

Модератоpы
5 372 сообщений

Отправлено 26 Май 2013 - 10:47

tatachka (26 Май 2013 - 10:44) писал:

Спасибо. Нашла, заменила... Изменений не заметила...

не нашла в main.css кода в конце:

#myTree .menuTree:before {
  content: "[+] ";
}
#myTree .expanded:before {
  content: "[-] ";
}
#myTree .collapsed {
  display: none;
}

а также кода в main.js:

$(document).ready(function() {
  $('#myTree').menuTree({
		animation: true,
		handler: 'slideToggle',
		anchor: 'a[rel="withchild"]',
		trace: false
  });
});

Наверх

#75 tatachka

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

Пользователи
52 сообщений

ГородВеликий Новгород

Отправлено 26 Май 2013 - 11:00

Спасибо, Miyako!
А ведь все вроде было на месте. Видимо лишний раз поудаляла...
Подскажите, а возможно сделать выступ влево:
   СНПЧ (3)
+ Фотобумага
+ Чернила / картриджи
   Сублимация (8)
   Фототовары (6)

как поправить такой момент:
при переходе в раздел каталога:  + Фотобумага   ->  IST
каталог опять сворачивается

Можно сделать, чтобы он остался развернутым, пока покупатель не нажмет на: "- Фотобумага "
И совершенно не удобно опять разворачивать , чтобы перейти к другому подразделу: + Фотобумага -> Kodak.

Сообщение отредактировал tatachka: 26 Май 2013 - 11:52

Наверх

#76 miyako

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

Модератоpы
5 372 сообщений

Отправлено 26 Май 2013 - 12:57

tatachka (26 Май 2013 - 11:00) писал:

Спасибо, Miyako!
А ведь все вроде было на месте. Видимо лишний раз поудаляла...
Подскажите, а возможно сделать выступ влево:
   СНПЧ (3)
+ Фотобумага
+ Чернила / картриджи
   Сублимация (8)
   Фототовары (6)

как поправить такой момент:
при переходе в раздел каталога:  + Фотобумага   ->  IST
каталог опять сворачивается

Можно сделать, чтобы он остался развернутым, пока покупатель не нажмет на: "- Фотобумага "
И совершенно не удобно опять разворачивать , чтобы перейти к другому подразделу: + Фотобумага -> Kodak.

Найдите код:

	   <li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров</a></h2>
								   {%IFNOT catalog_full_empty %}
												  {% FOR catalog_full %}
																{% IFNOT catalog_full.HIDE %}
																  {% IF catalog_full.FIRST %}<ul id="myTree">{% ENDIF %}
																				 <li>
				 
																				   <a href="{catalog_full.URL}"

в шаблоне HTML
и после него вставьте код:

{% IF catalog_full.LEVEL>0%}style="padding-left:{catalog_full.LEVEL | multiply("20")}px"{% ENDIF %}

Наверх

#77 tatachka

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

Пользователи
52 сообщений

ГородВеликий Новгород

Отправлено 29 Май 2013 - 18:03

Спасибо за помощь, сделала: нашла, вставила. Что-то изменилось, хотя не поняла что именно.
Но вопрос остался.
Что сделать, чтобы каталог сворачивался только, когда покупатель нажмет на "минус"?
Сейчас он сворачивается сразу как кликнешь на подраздел. А для перехода в другой подраздел того же раздела приходится опять разворачивать...

Наверх

#78 Сake

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

Модератоpы
5 979 сообщений

Отправлено 30 Май 2013 - 02:16

Пожалуйста, приложите код вашего каталога, или весь шаблон "HTML".

Наверх

#79 tatachka

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

Пользователи
52 сообщений

ГородВеликий Новгород

Отправлено 30 Май 2013 - 11:05

Сake (30 Май 2013 - 02:16) писал:

Пожалуйста, приложите код вашего каталога, или весь шаблон "HTML".

Пожалуйста:


  <div class="pad-box">
    <ul class="leftmenu">
  <li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров</a></h2>
   {%IFNOT catalog_full_empty %}
  {% FOR catalog_full %}
    {% IFNOT catalog_full.HIDE %}
  {% IF catalog_full.FIRST %}<ul id="myTree">{% ENDIF %}
<li>
   <a href="{catalog_full.URL}"
   {% IF catalog_full.LEVEL>0%}style="padding-left:{catalog_full.LEVEL | multiply("20")}px"{% ENDIF %}
  {% IF catalog_full.CURRENT %}
    class="contentTbodycatalog_fullCurent"
  {% ELSEIF catalog_full.CURRENT_PARENT %}
    class="contentTbodycatalog_fullCurentBranch"
  {% ENDIF %}
  {% IF catalog_full.ISSET_SUB %}rel="withchild"{% ENDIF %}
   >
    {catalog_full.NAME}
    
    {% IF catalog_full.GOODS_COUNT>0 %}
({catalog_full.GOODS_COUNT})
    {% ENDIF %}
  </a>
    {% IF catalog_full.ISSET_SUB=0 %}</li>{% ENDIF %}
  {% IF catalog_full.LAST %}
    {% FOR out %}</ul>{%IFNOT catalog_full.out.LAST %}</li>{% ENDIF %}{% ENDFOR %}
  {% ENDIF %}
    {% ENDIF %}
  {% ENDFOR %}
    {% ENDIF %}
    </ul><br />
  </li>

Очень расчитываю на помощь

Наверх

#80 Сake

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

Модератоpы
5 979 сообщений

Отправлено 31 Май 2013 - 01:50

Попробуйте использовать другую библиотеку каталога treeview она позволяет гибче настроить отображение. Примеры можете посмотреть тут http://jquery.bassis.../treeview/demo/

Информацию по интеграции можете почитать тут

http://forum.storela...ени/#entry16214

http://forum.storela...__40#entry58232