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


Как Сделать Такой Каталог


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

#1 dimmox

dimmox

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

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

Отправлено 17 Март 2014 - 18:55

вот такой каталог нужен слева блоки все убрать и расширить основное поле влево

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

  • aeefa929.jpg


#2 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 18 Март 2014 - 03:20

Чтобы убрать левый каталог, найдите:
#column-left {
	float: left;
	padding-top: 10px;
	width: 210px;
}
замените на:
#column-left {
	display: none;
	float: left;
	padding-top: 10px;
	width: 210px;
}

Далее чтобы расширить контент найдите и удалите:
#column-left + #content {
	margin-left: 235px;
}

Далее в шаблоне HTML после:
<div id="content">
	   
		  <div class="box">
вставляете код каталога:
<!-- Каталог -->
			  <ul id="subNavigation">
			{%IFNOT catalog_empty %}
				  {% FOR catalog %}
					{% IFNOT catalog.HIDE %}
					  <li>
						<a href="{catalog.URL}"
						  {% IF catalog.LEVEL>0%}style="display:none;"{% ENDIF %}
						  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
						>{catalog.NAME}</a>
					  </li>
					{% ENDIF %}
				  {% ENDFOR %}
				{% ENDIF %}
		  </ul>
		  <!-- end Каталог -->

Далее уже необходимо простилизовать его и задать картинку для каждой категории

#3 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 17 Сентябрь 2014 - 15:57

Просмотр сообщенияVaccina (18 Март 2014 - 03:20) писал:


Далее уже необходимо простилизовать его и задать картинку для каждой категории

А как это сделать? И где задавать картинки для категори?

Заранее спасибо.

#4 Dars

Dars

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

  • Пользователи
  • PipPipPipPip
  • 1 410 сообщений

Отправлено 17 Сентябрь 2014 - 16:02

Просмотр сообщенияgrappp (17 Сентябрь 2014 - 15:57) писал:

А как это сделать? И где задавать картинки для категори?

Заранее спасибо.
Картинки для категории задаются в разделе "Товары" - "Товары" - правый клик по категории - "Настроить категорию". Под блоком описания можно добавлять картинки.

Что касается стилизации - выполните инструкции и пришлите нам желаемый внешний вид, и мы напишем вам код стилей.

#5 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 25 Сентябрь 2014 - 12:47

Просмотр сообщенияDars (17 Сентябрь 2014 - 16:02) писал:

Картинки для категории задаются в разделе "Товары" - "Товары" - правый клик по категории - "Настроить категорию". Под блоком описания можно добавлять картинки.

Что касается стилизации - выполните инструкции и пришлите нам желаемый внешний вид, и мы напишем вам код стилей.

Здравствуйте!

Решил сегодня заняться каталогом и выполнить все по инструкции приведенной Vaccina , но дело в том, что ни одного из выше указанных кодов нет в моем шаблоне. Как быть?

#6 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 26 Сентябрь 2014 - 01:10

Чтобы слева убрать каталог в main.css пропишите:
#left > .block:first-child {
display:none;
}

далее в шаблоне HTML найдите:
<div id="panelsite">
перед ним расположите:
<!-- Каталог -->
						  <ul id="subNavigation">
						{%IFNOT catalog_empty %}
								  {% FOR catalog %}
										{% IFNOT catalog.HIDE %}
										  <li>
												<a href="{catalog.URL}"
												  {% IF catalog.LEVEL>0%}style="display:none;"{% ENDIF %}
												  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
												>{catalog.NAME}</a>
										  </li>
										{% ENDIF %}
								  {% ENDFOR %}
								{% ENDIF %}
				  </ul>
				  <!-- end Каталог -->

и в main.css добавьте:
#subNavigation li{
display:inline-block;
}

уточните пожалуйста номер аккаунта, где вы хотите произвести желаемое, так как дизайн сайта указанного у вас в профиле и на скриншоте не совпадают

#7 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 26 Сентябрь 2014 - 01:24

Номер аккаунта в профиле верный. А если Вы про скриншот из другой моей темы про каталог, то он не мой )
Я просто нашел его на форуме и привел как желаемый вариант вида.
Я хочу расположить каталог над шапкой.
Причем у меня каталог состоит из 7ми категорий и будет увеличиваться, но в шапку я хочу поместить только 5ть категорий.
Остальные разместить в "подвале".

Вот скрин с моего сайта:

Интернет магазин АкваИНК.РУ - продажа сантехники и мебели для ванной комнаты. 2014-09-26 02-38-46 2014-09-26 02-40-30.jpg

#8 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 26 Сентябрь 2014 - 01:49

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

#9 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 26 Сентябрь 2014 - 01:52

Просмотр сообщенияVaccina (26 Сентябрь 2014 - 01:49) писал:

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

Думаю, что да!
Только если не сложно объясните, пожалуйста, что значит скрытые категории? Эти категории индексируются поисковиками? В общем, что значит скрытые категории? )) Не совсем понимаю )

Заранее спасибо.

#10 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 26 Сентябрь 2014 - 02:18

В разделе Товары - Товары - выбираем и редактируем категорию, обнаруживаем пункт "скрыть категорию на сайте", после установки напротив пункта галочки, категории не отображаются на сайте, но по ссылкам они доступны, а значит из индекса не вылетят.

В этом случае код выше сохраняем в неизменном виде, а вот код подвального каталога:
<div class="column">
<h3>Заголовок</h3>
		 <ul>
		 {% IFNOT catalog_empty %}
				 {% FOR catalog %}
				 {% IFNOT catalog.HIDE %}
						 <li style="{% IF catalog.LEVEL>0%}displai:none;{% ENDIF %}"><a href="{catalog.URL}">{catalog.NAME}</a></li>
				 {% ENDIF %}
				 {% ENDFOR %}
		 {% ENDIF %}
		 </ul>
</div>
изменяем на:
<div class="column">
<h3>Заголовок</h3>
		 <ul>
		 {% IFNOT catalog_empty %}
				 {% FOR catalog %}
				 {% IF catalog.HIDE %}
						 <li style="{% IF catalog.LEVEL>0 %}display:none;{% ENDIF %}"><a href="{catalog.URL}">{catalog.NAME}</a></li>
				 {% ENDIF %}
				 {% ENDFOR %}
		 {% ENDIF %}
		 </ul>
</div>

заодно и опечатку в коде поправим, только сейчас заметила, извиняюсь за нее

после данных изменений каталог будет как обычно отображаться верхний(кроме скрытых категорий), а в подвале только скрытые категории

#11 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 26 Сентябрь 2014 - 12:03

Получилось вот так:

1.png

#12 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 26 Сентябрь 2014 - 12:51

Просмотр сообщенияgrappp (26 Сентябрь 2014 - 12:03) писал:

Получилось вот так:

Прикрепленный файл 1.png
Здравствуйте. Чтоб отображалось в виде картинок Вам нужно сделать следующее: в HTML замените
<!-- Каталог -->
<ul id="subNavigation">
{%IFNOT catalog_empty %}
{% FOR catalog %}
{% IFNOT catalog.HIDE %}
<li>
<a href="{catalog.URL}"
{% IF catalog.LEVEL>0%}style="display:none;"{% ENDIF %}
{% IF catalog.CURRENT %}class="selected"{% ENDIF %}
>{catalog.NAME}</a>
</li>
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}
</ul>
<!-- end Каталог -->
на
<!-- Каталог -->
<ul id="subNavigation">
{%IFNOT catalog_empty %}
{% FOR catalog %}
{% IFNOT catalog.HIDE %}
<li>
{% IF catalog.NAME = Ванны %}
<a href="{catalog.URL}"{% IF catalog.LEVEL>0%}style="display:none;"{% ENDIF %}
{% IF catalog.CURRENT %}class="selected"{% ENDIF %}>
<img src="{ASSETS_IMAGES_PATH}palto.jpg" alt="" class="imgmenu"/>
</a>
{% ELSEIF catalog.NAME = Душевые %}
<a href="{catalog.URL}"{% IF catalog.LEVEL>0%}style="display:none;"{% ENDIF %}
{% IF catalog.CURRENT %}class="selected"{% ENDIF %}>
<img src="{ASSETS_IMAGES_PATH}palto.jpg" alt="" class="imgmenu"/>
</a>
{% ELSEIF catalog.NAME = Мебель для ванной %}
<a href="{catalog.URL}"{% IF catalog.LEVEL>0%}style="display:none;"{% ENDIF %}
{% IF catalog.CURRENT %}class="selected"{% ENDIF %}>
<img src="{ASSETS_IMAGES_PATH}palto.jpg" alt="" class="imgmenu"/>
</a>
{% ELSEIF catalog.NAME = Смесители %}
<a href="{catalog.URL}"{% IF catalog.LEVEL>0%}style="display:none;"{% ENDIF %}
{% IF catalog.CURRENT %}class="selected"{% ENDIF %}>
<img src="{ASSETS_IMAGES_PATH}palto.jpg" alt="" class="imgmenu"/>
</a>
{% ELSE catalog.NAME = Санфаянс %}
<a href="{catalog.URL}"{% IF catalog.LEVEL>0%}style="display:none;"{% ENDIF %}
{% IF catalog.CURRENT %}class="selected"{% ENDIF %}>
<img src="{ASSETS_IMAGES_PATH}palto.jpg" alt="" class="imgmenu"/>
</a>
{% ENDIF %}
</li>
{% ENDIF %}
{% ENDFOR %}
{% ENDIF %}
</ul>
<!-- end Каталог -->
загрузив нужные изображения категорий в разделе Сайт -> Редактор шаблонов -> Добавить файлы и заменив  palto.jpg на нужное для каждого раздела. Затем в main.css добавьте
img.imgmenu {
width: 56px;
height: 56px;
}

и параметрами width: 56px; и height: 56px; отрегулируйте ширину и высоту изображений соответственно.

#13 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 26 Сентябрь 2014 - 15:05

При смене кода, пишет следующие: Ошибка компиляции шаблона. Не верный синтаксис. Неожиданный тег «ELSE». Строка 140

И не сохраняет.

#14 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 26 Сентябрь 2014 - 15:27

Просмотр сообщенияgrappp (26 Сентябрь 2014 - 15:05) писал:

При смене кода, пишет следующие: Ошибка компиляции шаблона. Не верный синтаксис. Неожиданный тег «ELSE». Строка 140

И не сохраняет.
Отредактировал инструкцию, повторите пожалуйста по новой.

#15 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 26 Сентябрь 2014 - 15:46

Получилось, но почему-то весь этот блок не центрируется. Какой бы я не выставлял размер иконок, весь блок съезжает в право.
И Можно как-то убрать пробелы между иконками?

#16 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 26 Сентябрь 2014 - 17:03

Отцентрировать получилось. И пробелы тоже убрал.
Всем спасибо за помощь.

#17 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 26 Сентябрь 2014 - 17:10

А как бы теперь сделать так. что бы при наведении на категорию "выезжало" окошко с подкатегориями? ) Или я многого захотел? )

#18 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 26 Сентябрь 2014 - 23:21

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

#19 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 27 Сентябрь 2014 - 11:00

Просмотр сообщенияVaccina (26 Сентябрь 2014 - 23:21) писал:

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

Да, все основные. Сейчас в шапке 5 категорий, они включают подкатегории, вот они и должны всплывать )

#20 grappp

grappp

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

  • Пользователи
  • PipPipPipPip
  • 298 сообщений
  • ГородСанет-Петербург

Отправлено 29 Сентябрь 2014 - 10:47

Просмотр сообщенияVaccina (26 Сентябрь 2014 - 23:21) писал:

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

Извините, Вы сможете мне помочь с "выплывающим" списком?




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

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