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

Добрый вечер!

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

по клику на знак + или стрелочка меню разворачивается без смены страницы
по клику на пункт меню — меню разворачивается и происходит переход на
новую страницу

Да, конечно же можно, для этого понадобится подправить код в разделе "Сайт" > "Редактор тем", взяв например Jquery JsTree:
http://code.google.c.../downloads/list
или jquery menuTree
http://plugins.jquer...roject/menuTree

Я для простоты примера выберу втрой плагин, он добавляется проще, поэтому приступим:
1) Скачиваем архив плагина отсюда:
https://github.com/p...enuTree-Plugin/


и закачиваем файл в редактор тем.


2) Вставляем загрузку плагина в шаблоне "html", после загрузки основного списка скриптов как написано в документации, путь берём из картинки выше:

<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.plugin.menuTree.pack.js"></script>

У меня получилось так:

  <!-- Скрипты которые не нужно менять, грузятся из папки общих файлов -->
  <!-- Это собранные в один файл скрипты из файлов:
	{FORALL_JS_PATH}jquery-1.4.2.min.js
	{FORALL_JS_PATH}jquery.nyroModal-1.6.2.min.js
	{FORALL_JS_PATH}jquery-ui-1.8.4.custom.min.js
	{FORALL_JS_PATH}jquery.validate.min.js
	{FORALL_JS_PATH}jquery.capslock.min.js
  -->
  <script type="text/javascript" src="{FORALL_JS_PATH}jquery-1.4.2_nyroModal-1.6.2_validate_capslock_jquery-ui-1.8.4.custom.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>

3) В том же шаблоне "html" вместо старого массива категорий выдаём полный список категорий. Было:

			{%IFNOT catalog_empty %}
			  {% FOR catalog %}
				{% IFNOT catalog.HIDE %}
				  {% IF catalog.FIRST %}<ul>{% ENDIF %}
					 <li>
					   <a href="{catalog.URL}"
						  {% IF catalog.CURRENT %}
							class="contentTbodyCatalogCurent"
						  {% ELSEIF catalog.CURRENT_PARENT %}
							class="contentTbodyCatalogCurentBranch"
						  {% ENDIF %}
					   >
						{catalog.NAME}

						<!-- Отображение количества товаров в категории -->
						{% IF catalog.GOODS_COUNT>0 %}
						 ({catalog.GOODS_COUNT})
						{% ENDIF %}
					  </a>
					{% IF catalog.ISSET_SUB=0 %}</li>{% ENDIF %}
				  {% IF catalog.LAST %}
					{% FOR out %}</ul>{%IFNOT catalog.out.LAST %}</li>{% ENDIF %}{% ENDFOR %}
				  {% ENDIF %}
				{% ENDIF %}
			  {% ENDFOR %}
			{% ENDIF %}

Стало:

			{%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 %}

4) Как просят в документации, добавляем простенькие стили в конец файла "main.csstemplate":

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

5) В файле main.js допишем код который нас просят добавить в документации:

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

6) Если всё делалось по инструкции получается примерно так:



А вообще изменять отображение дерева категорий можно как угодно, здесь Вы ничем не ограничены, в сочетании с волшебными функциями

{print_vars}

,

{print_arrays}

и этой веткой форума Вы получите в подарок счастье

Не понял 2 пункт. Вставляем строчку <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.plugin.menuTree.pack.js"></script> откуда берется

<script src="http://ajax.googleap.../jquery.min.js" type="text/javascript" charset="utf-8"></script>

Строка

<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.plugin.menuTree.pack.js"></script>

предполагает - что вы перешли по адресу http://plugins.jquer...roject/menuTree
далее там скачали библиотеку menuTree, после нашли файл jquery.plugin.menuTree.pack.js
Затем залили его в разделе редактора темы.

Я так и сделал.

1)Скачал архив jQuery-MenuTree-Plugin-v0.7, распаковал, добавил файл jquery.plugin.menuTree.pack.js в стили и скрипты

2)в html шаблон добавил строчку <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.plugin.menuTree.pack.js"></script> получилось:

<!-- Скрипты которые не нужно менять, грузятся из папки общих файлов -->
   <!-- Это собранные в один файл скрипты из файлов:
 	{FORALL_JS_PATH}jquery-1.4.2.min.js
 	{FORALL_JS_PATH}jquery.nyroModal-1.6.2.min.js
 	{FORALL_JS_PATH}jquery-ui-1.8.4.custom.min.js
 	{FORALL_JS_PATH}jquery.validate.min.js
 	{FORALL_JS_PATH}jquery.capslock.min.js
   -->

   <script type="text/javascript" src="{FORALL_JS_PATH}jquery-1.4.2_nyroModal-1.6.2_validate_capslock_jquery-ui-1.8.4.custom.min.js"></script>
   <script type="text/javascript" src="{ASSETS_JS_PATH}jquery.plugin.menuTree.pack.js"></script>

3) заменил старый код <!-- Каталог товаров --> на:

{%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 %}

все подкаталоги открылись, их уже нельзя свернуть


4) добавил как указанно в конец файла


5) вставил в файл main.js в $(document).ready(function() { указанный код


В результате все подкаталоги открылись(в меню каталога товаров), закрыть их нельзя знак + и - не появились

где я допустил ошибку подскажите

Скажите ваш адрес магазина, для возможности вам помочь.

http://   .ru/

Попробуйте заменить свой файл jquery.plugin.menuTree.pack.js на этот

http://menutree.pixe...gin.menuTree.js

закачав файл по выше данной ссылку, а так же изменить путь в шаблоне "html"

c этого

<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.plugin.menuTree.pack.js"></script>

на

<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.plugin.menuTree.js"></script>

Спасибо, все получилось =)

Добрый день. Я пробовал делать как описано, каталог открывается полностью с подкатегориями.Перечитал все возможные ветки форума с вопросом каталог товаров.  Суть в следующем, хочу что-то похожее как тут:http://3grushki.ru Чтоб каталог открывался с подкатегориями.Ну и цвет естественно подходящий для шаблона сияние. Во всем форуме описание подобного вопроса на многих ветках скомкано и не понятно. Хотелось бы поподробнее. Спасибо.

Почитайте данную ветку, в том числе данный пост http://forum.storela..._3177#entry3177

Добрый день! Я читал все ветки. И пробовал как описано. Не получается. Пример по этой именно ветке: Делаю как описано на этой ветке, но у меня в итоге открывается весь каталог с подкатегориями. Пробовал исправить как описано:
Попробуйте заменить свой файл jquery.plugin.menuTree.pack.js на этот

http://menutree.pixe...gin.menuTree.js

закачав файл по выше данной ссылку, а так же изменить путь в шаблоне "html"

c этого

<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.plugin.menuTree.pack.js"></script>


на

<script type="text/javascript" src="{ASSETS_JS_PATH}jquery.plugin.menuTree.js"></script>


но ничего не изменяется.
Я просто хочу сделать меню каталога товаров выпадающим.

Сообщите адрес вашего магазина

http://yarchina.ru/

Хм. попробуйте проделать установку данного каталога еще раз. Нужно что бы файлы и стили уже у вас в шаблоне имелись. так же имелись изменения описанные здесь. Если не получиться не удаляйте изменения - посмотрю, попытаюсь вам помочь.

У меня так же не получилось. Пробовал все как описано. Выводится просто развернутое меню (snowwindwater.ru, смотрите второе меню). Помогите, пожалуйста.

Не нашла у вас подключенного js файла - как описано тут

http://forum.storela...ndpost__p__3063

попробуйте еще раз внимательнее прочитать данную тему. Вы упустили несколько моментов.

Все получилось. Спасибо вам, Vaccina!
Только как теперь мне можно чуть изменить фон выпадающих категорий? чтобы они хоть немного отличались. Заранее благодарю.
Мой сайт для примера

Можно попробовать в файл стилей main.css добавить новый класс

#myTree li ul li a:link, #myTree li ul li a:visited {
 color: #222;
}

и далее изменить свойство color на любой цвет.

Vaccina (01 Октябрь 2011 - 09:46) писал:

Сделал как описано, но без результата.