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


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


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

#1 Igork

Igork

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

  • Пользователи
  • PipPipPip
  • 83 сообщений

Отправлено 16 Апрель 2011 - 22:55

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

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

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

#2 support

support

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

  • Модераторы
  • 3 683 сообщений
  • ГородМосква

Отправлено 19 Апрель 2011 - 21:24

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

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

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

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) Если всё делалось по инструкции получается примерно так:
jstree-view-1.png
jstree-view-2.png

А вообще изменять отображение дерева категорий можно как угодно, здесь Вы ничем не ограничены, в сочетании с волшебными функциями
{print_vars}
,
{print_arrays}
и этой веткой форума Вы получите в подарок счастье B)

#3 Igork

Igork

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

  • Пользователи
  • PipPipPip
  • 83 сообщений

Отправлено 21 Апрель 2011 - 21:39

Не понял 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>









#4 Vaccina

Vaccina

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

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

Отправлено 22 Апрель 2011 - 00:25

Строка
<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
Затем залили его в разделе редактора темы.

#5 Igork

Igork

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

  • Пользователи
  • PipPipPip
  • 83 сообщений

Отправлено 23 Апрель 2011 - 13:29

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

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() { указанный код


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

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

#6 Vaccina

Vaccina

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

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

Отправлено 23 Апрель 2011 - 20:04

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

#7 Igork

Igork

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

  • Пользователи
  • PipPipPip
  • 83 сообщений

Отправлено 23 Апрель 2011 - 22:21

http://  :P .ru/

#8 Vaccina

Vaccina

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

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

Отправлено 25 Апрель 2011 - 12:49

Попробуйте заменить свой файл 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>


#9 Igork

Igork

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

  • Пользователи
  • PipPipPip
  • 83 сообщений

Отправлено 26 Апрель 2011 - 07:24

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

#10 hagiel

hagiel

    Пользователь

  • Пользователи
  • PipPip
  • 10 сообщений

Отправлено 08 Июнь 2011 - 00:30

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

#11 Vaccina

Vaccina

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

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

Отправлено 08 Июнь 2011 - 08:58

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

#12 hagiel

hagiel

    Пользователь

  • Пользователи
  • PipPip
  • 10 сообщений

Отправлено 08 Июнь 2011 - 12:14

Добрый день! Я читал все ветки. И пробовал как описано. Не получается. Пример по этой именно ветке: Делаю как описано на этой ветке, но у меня в итоге открывается весь каталог с подкатегориями. Пробовал исправить как описано:
Попробуйте заменить свой файл 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>


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

#13 Vaccina

Vaccina

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

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

Отправлено 09 Июнь 2011 - 08:23

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

#14 hagiel

hagiel

    Пользователь

  • Пользователи
  • PipPip
  • 10 сообщений

Отправлено 14 Июнь 2011 - 13:56

http://yarchina.ru/

#15 Vaccina

Vaccina

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

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

Отправлено 14 Июнь 2011 - 17:16

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

#16 Dimon

Dimon

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

  • Пользователи
  • PipPipPip
  • 62 сообщений

Отправлено 29 Сентябрь 2011 - 20:28

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

#17 Vaccina

Vaccina

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

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

Отправлено 01 Октябрь 2011 - 09:46

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

http://forum.storela...ndpost__p__3063

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

#18 Expert

Expert

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

  • Пользователи
  • PipPipPip
  • 63 сообщений

Отправлено 26 Октябрь 2011 - 12:48

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

#19 Vaccina

Vaccina

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

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

Отправлено 27 Октябрь 2011 - 19:10

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

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

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

#20 Dimon

Dimon

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

  • Пользователи
  • PipPipPip
  • 62 сообщений

Отправлено 27 Октябрь 2011 - 21:35

Просмотр сообщенияVaccina (01 Октябрь 2011 - 09:46) писал:

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

http://forum.storela...ndpost__p__3063

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

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




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

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