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


Перенесение каталога в левую часть


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

#1 Kost

Kost

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

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

Отправлено 05 Октябрь 2010 - 17:08

Здравствуйте!
Подскажите пожалуйста, каким образом можно перенести каталог в левую часть страницы?
И второй вопрос, как можно сделать, чтобы каталог был не лентой, по одной фотографии сверху вниз, а по три товара одновременно, с прокруткой вниз.
В качестве примера могу привести вот этот сайт http://oscarexpress.ru/

Спасибо!

#2 support

support

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

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

Отправлено 08 Октябрь 2010 - 22:30

Просмотр сообщенияKost (05 Октябрь 2010 - 17:08) писал:

Здравствуйте!
Подскажите пожалуйста, каким образом можно перенести каталог в левую часть страницы?
И второй вопрос, как можно сделать, чтобы каталог был не лентой, по одной фотографии сверху вниз, а по три товара одновременно, с прокруткой вниз.
В качестве примера могу привести вот этот сайт http://oscarexpress.ru/

Спасибо!

По большому счету тут все решается простым копипастом. Зайдите во вкладку "Сайт" -> "Редактор тем"-> шаблон с названием "html" откройте его.
Там есть 2 ячейки таблицы:
<td class="content_body cont700">
и
<td class="content_catalog cont250">
Просто поменяйте их местами и каталог окажется справа.

Далее нужно будет подвинуть фон разделитель. Нашел я его довольно просто, через "Анализировать элемент" в гугл хроме, подробно процесс описывали, когда нужно было сдвинуть разделитель на 2-3 пикселя вниз. Для этого откройте main.csstemplate и найдите такую строчку:
.content_page {
  background: url({ASSETS_IMAGES_PATH}content-page-br.gif) no-repeat 710px 68px;
  overflow:hidden;  
  padding-bottom: 2em;
}

Этот стиль описывает стиль, создающий разделитель страницы на 2 части. Изменяем его положение с 710 пикселей, на 230 пикселей. Получится такой стиль:
.content_page {
  background: url({ASSETS_IMAGES_PATH}content-page-br.gif) no-repeat 230px 68px;
  overflow:hidden;  
  padding-bottom: 2em;
}
Нажимаем сохранить и сайт изменился, все выглядит довольно адекватно:
shine-catalog-move-to-left.jpg

#3 Kost

Kost

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

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

Отправлено 11 Октябрь 2010 - 03:14

С переносом фонового разделителя получилось, а вот перенос каталога в другую сторону почему-то не получился.. Сделал как вы сказали, поменял эти две строки местами, вот что вышло.


Изображение

и второй вопрос: в каталоге есть несколько основных категорий, превьюшки этих категорий распологаются в матричном порядке, это хорошо

Изображение

а вот в подкатегориях превьюшки уже располагаются лентой, а это не очень хорошо. Подскажите пожалуйста, как сделать их по 4 (или по 3) штуки в ряд, как на фото выше.

Изображение

#4 support

support

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

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

Отправлено 11 Октябрь 2010 - 14:50

Просмотр сообщенияKost (11 Октябрь 2010 - 03:14) писал:

С переносом фонового разделителя получилось, а вот перенос каталога в другую сторону почему-то не получился.. Сделал как вы сказали, поменял эти две строки местами, вот что вышло.


Изображение

и второй вопрос: в каталоге есть несколько основных категорий, превьюшки этих категорий распологаются в матричном порядке, это хорошо

Изображение

а вот в подкатегориях превьюшки уже располагаются лентой, а это не очень хорошо. Подскажите пожалуйста, как сделать их по 4 (или по 3) штуки в ряд, как на фото выше.

Изображение

Видимо ячейка была скопирована не полностью, на том сайте, где тестировал, все выглядит нормально:
left-catalog.jpg

Отображение в матричном виде можно сделать по аналогии с другими шаблонами, мокко или лайт, можно сделать и 2 вида отображения одновременно, с переключателем, используя переменную {GOODS_VIEW_TYPE}. Для такого переключателя обычно используют следующий код:
{% IF GOODS_VIEW_TYPE=2 %}
   <strong title="Список товаров сейчас отображается в виде таблицы, по 2 товара на строку">Таблица</strong>&nbsp;
   <a href="?goods_view_type=1" title="Отображать список товаров в виде списка">Список</a>
{% ELSE %}
   <a href="?goods_view_type=2" title="Отображать список товаров в виде таблицы с 2мя товарами на одну строку">Таблица</a>&nbsp;
   <strong title="Список товаров сейчас отображается в виде списка, где один товар занимает одну строку">Список</strong>
{% ENDIF %}

и соответственно выдачу меняете на 2 варианта:
{% IF GOODS_VIEW_TYPE=1 %}
  Отображаем товары в виде списка
  ...
{% ELSE %}
  Отображаем товары в виде таблицы
  ...
{% ENDIF %}

Второй вариант в шаблонах отсутствует, но его всегдя можно скопировать из другого шаблона. Для того чтобы не переустанавливать тему и не терять изменения, на данный момент проще всего создать новый магазин и вставить код списка товаров оттуда. Изображение поскольку идет более мелкого размера, используйте пятый размер изображений, примерно так:
<img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" />
Его размер указывается в настройках, в блоке размеров изображений, называется "Изображения товаров"
settings-image-sizes.jpg

#5 Kost

Kost

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

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

Отправлено 12 Октябрь 2010 - 01:06

Цитата

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

Ячейку я скопировал точно так, как вы написали. Пробовал раз 10 в общей сложности и по разному, и целиком и по частям... и в разных браузерах. Результат не тот.. Могу вам даже пароль от админки дать, чтобы вы проверили) Может вы на тестовом сайте что-то еще изменили?

Цитата

Отображение в матричном виде можно сделать по аналогии с другими шаблонами, мокко или лайт, можно сделать и 2 вида отображения одновременно, с переключателем, используя переменную {GOODS_VIEW_TYPE}. Для такого переключателя обычно используют следующий код:{% IF GOODS_VIEW_TYPE=2 %}
  
<strong title="Список товаров сейчас отображается в виде таблицы, по 2 товара на строку">Таблица</strong>&nbsp;
  
<a href="?goods_view_type=1" title="Отображать список товаров в виде списка">Список</a>
{% ELSE %}
  
<a href="?goods_view_type=2" title="Отображать список товаров в виде таблицы с 2мя товарами на одну строку">Таблица</a>&nbsp;
  
<strong title="Список товаров сейчас отображается в виде списка, где один товар занимает одну строку">Список</strong>
{% ENDIF %}

и соответственно выдачу меняете на 2 варианта:
{% IF GOODS_VIEW_TYPE=1 %}
  
Отображаем товары в виде списка
  
...
{% ELSE %}
  
Отображаем товары в виде таблицы
  
...
{% ENDIF %}

Второй вариант в шаблонах отсутствует, но его всегдя можно скопировать из другого шаблона. Для того чтобы не переустанавливать тему и не терять изменения, на данный момент проще всего создать новый магазин и вставить код списка товаров оттуда. Изображение поскольку идет более мелкого размера, используйте пятый размер изображений, примерно так:
<img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" />
Его размер указывается в настройках, в блоке размеров изображений, называется "Изображения товаров"

Изображение

честно говоря я в HTML вообще не разбираюсь пока, и по этому могу следовать только по инструкции:
1) зайди туда
2) найди строку
3) скопируй туда то-то
4) сохрани
Поэтому как и что сделать так и не понял (Но старался :)
Лучше всего сделать, чтобы был не переключатель между матричным и ленточным видом ,а просто матричный вид по 3 товара в ряду.
Напишите мне пожалуйста инструкцию.

#6 support

support

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

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

Отправлено 13 Октябрь 2010 - 12:03

Просмотр сообщенияKost (12 Октябрь 2010 - 01:06) писал:

Ячейку я скопировал точно так, как вы написали. Пробовал раз 10 в общей сложности и по разному, и целиком и по частям... и в разных браузерах. Результат не тот.. Могу вам даже пароль от админки дать, чтобы вы проверили) Может вы на тестовом сайте что-то еще изменили?

Довольно странно, вроде ничего кроме копипаста там не делал, код шаблона целиком у меня сейчас такой:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
  <title>{PAGE_TITLE}</title>
  <meta name="keywords" content="{PAGE_META_KEYWORDS}" />
  <meta name="description" content="{PAGE_META_DESCRIPTION}" />
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Language" content="ru" />
  <link href="{ASSETS_IMAGES_PATH}favicon.ico" rel="icon" type="image/x-icon" />
  
  <!-- Стили которые не нужно менять, грузятся из папки общих файлов -->
  <link rel="stylesheet" href="{FORALL_STYLES_PATH}reset_03.css" type="text/css" />
  <link rel="stylesheet" href="{FORALL_STYLES_PATH}nyroModal/nyroModal.full.css" type="text/css" />
  <link rel="stylesheet" href="{FORALL_STYLES_PATH}jquery-ui/jquery.ui.all.min.css" type="text/css" />

  <!-- Если в тарифном плане подключен модуль отзывов о товаре -->
  {% IF TARIFF_FEATURE_GOODS_OPINION %}
	<!-- Если не выключен модуль отзывов о товаре, то загружаем css для рейтинга -->
	{% IFNOT SETTINGS_OPINION_DISABLE %}
	  <link rel="stylesheet" href="{FORALL_STYLES_PATH}jquery-ui-stars/jquery.ui.stars.min.css" type="text/css" />
	{% ENDIF %}
  {% ENDIF %}

  <!-- Стили магазина -->
  <link rel="stylesheet" href="{ASSETS_STYLES_PATH}main.css" type="text/css" />

  <!-- Скрипты которые не нужно менять, грузятся из папки общих файлов -->
  <!-- Это собранные в один файл скрипты из файлов:
	{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>

  <!-- Если в тарифном плане подключен модуль отзывов о товаре -->
  {% IF TARIFF_FEATURE_GOODS_OPINION %}
	<!-- Если не выключен модуль отзывов о товаре, то загружаем css для рейтинга -->
	{% IFNOT SETTINGS_OPINION_DISABLE %}
	  <script type="text/javascript" src="{FORALL_JS_PATH}jquery.ui.stars.min.js"></script>
	{% ENDIF %}
  {% ENDIF %}

  <!-- Скрипты магазина -->
  <script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

</head>
<body>
  <div class="b_page" id="wrapper">
	<div class="container" id="header">
  
	  <div class="pad-box cont620" id="logo"><h1><a href="http://{NET_DOMAIN}/"><span>На главную</span></a></h1></div>
  
	  <!-- Контакты -->
	  <div id="contactInfo">
		<table>
		  <tr>
			<td class="contactInfoContent">
			  <table>
				<!-- Первый контактный телефон -->
				{% IF SETTINGS_STORE_PHONE_NUMBER1 %}
				  <tr>
					<td class="contentTableHeadMainPhone">
					  {SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}
					</td>
				  </tr>
				{% ENDIF %}
				
				<!-- Второй контактный телефон -->
				{% IF SETTINGS_STORE_PHONE_NUMBER2 %}
				  <tr>
					<td class="contentTableHeadMainPhone">
					  {SETTINGS_STORE_PHONE_COUNTRY_CODE2} {% IF SETTINGS_STORE_PHONE_CITY_CODE2 %}({SETTINGS_STORE_PHONE_CITY_CODE2}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER2}
					</td>
				  </tr>
				{% ENDIF %}
			  
				<!-- Третий контактный телефон -->
				{% IF SETTINGS_STORE_PHONE_NUMBER3 %}
				  <tr>
					<td class="contentTableHeadMainPhone">
					  {SETTINGS_STORE_PHONE_COUNTRY_CODE3} {% IF SETTINGS_STORE_PHONE_CITY_CODE3 %}({SETTINGS_STORE_PHONE_CITY_CODE3}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER3}
					</td>
				  </tr>
				{% ENDIF %}
	  
				<!-- Время работы магазина -->
				{% IF SETTINGS_STORE_WORK_TIME %}
				  <tr>
					<td class="contentTableHeadMainWorkTime">
					  {SETTINGS_STORE_WORK_TIME}
					</td>
				  </tr>
				{% ENDIF %}
				
				<!-- ICQ номер -->
				{% IF SETTINGS_STORE_ICQ %}
				  <tr>
					<td class="contentTableHeadMainIcq">
					  <img class="valignMiddle" src="http://wwp.icq.com/scripts/online.dll?icq={SETTINGS_STORE_ICQ_ONLY_DIGITS}&img=27" alt="Статус" width="16" height="16" />
					  <span class="valignMiddle">{SETTINGS_STORE_ICQ}</span>
					</td>
				  </tr>
				{% ENDIF %}
			  </table>
			</td>
		  </tr>
		</table>
	  </div>
	  <!-- end Контакты -->
	   
	  
	  <!-- Корзина -->
	  <div id="cartInfo">
		<a href="{CART_URL}">в корзине товаров на</a>:
		<span id="cartSum">
		  {% IF cart_count_empty %}
			<span>0</span> {CURRENCY_NAME}
		  {% ELSE %}
			{% FOR cart_sum %}
			  <span class="num">{cart_sum.NOW | money_format}</span><br />
			{% ENDFOR %}
		  {% ENDIF %}
		</span>
	  </div>
	  <!-- end Корзина -->
  
	  <!-- Поиск -->
	  <div id="search">
		<form action="http://{NET_DOMAIN}/search" id="searchform" method="get">
		  <div>
			<input type="text"  value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}Поиск{%ENDIF%}" onblur="this.value=(this.value=='') ? 'Поиск' : this.value;" onfocus="this.value=(this.value=='Поиск') ? '' : this.value;" id="s" class="search_box alignleft" name="q" />
			<input type="image" class="submit alignright" src="{ASSETS_IMAGES_PATH}search_but.gif" />
			<div class="clr"></div>
		  </div>
		</form>
	  </div>
	  <div class="clr"></div>
	  <!-- end Поиск -->
	  
	  <!-- Верхний блок навигации -->
	  <div class="containerin" id="top-menu">
		<ul class="pad-box cont620" id="mainmenu">
		  {% FOR menu %}
			{% FOR header %}
			  {% FOR links %}
				<li><a href="{menu.header.links.URL}" {% IF menu.header.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.header.links.TITLE %}title="{menu.header.links.TITLE}"{% ENDIF %}>{menu.header.links.NAME}</a></li>
			  {% ENDFOR %}
			{% ENDFOR %}
		  {% ENDFOR %}
		</ul>
		<div class="clr"></div>
	  </div>
	  <!-- end Верхний блок навигации -->
	</div>

	<!-- контент -->
	<div class="container" id="cpages">
	  <div class="content_page">
		<table>
		  <tr>
			<td class="content_catalog cont250">
			<!-- Каталог -->
			  <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>

				  <!-- Если в тарифном плане подключен модуль фильтров по товарам -->
				  {% IF TARIFF_FEATURE_GOODS_FILTERS %}
					<!-- Фильтры по товарам. Появляются только на странице категории и поиска по товарам -->
					{% IF SHOW_GOODS_FILTERS %}
					  <li class="goods_filters"><br /><h2>Фильтры</h2>
						<ul>
						  <!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
						  <form action="" method="get">
							<div class="contentTbodySearchFilterBlock cornerAll">
  
							  <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
							  {% FOR filter_attr_list %}
								<span class="contentTbodySearchFilterBlockHeader">{filter_attr_list.NAME}</span>
								<div class="contentTbodySearchFilterBlockValues">
								{% FOR values %}
								  <input type="checkbox" name="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" value="1" id="filterAttrVal{filter_attr_list.values.ID}" {% IF filter_attr_list.values.CHECKED %}checked="checked"{% ENDIF %} /> 
								  <label for="filterAttrVal{filter_attr_list.values.ID}">{filter_attr_list.values.VALUE}</label><br />
								{% ENDFOR %}
								</div>
							  {% ENDFOR %}
  
							  <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
							  {% FOR filter_prop_list %}
								<span class="contentTbodySearchFilterBlockHeader">{filter_prop_list.NAME}</span>
								<div class="contentTbodySearchFilterBlockValues">
								{% FOR values %}
								  <input type="checkbox" name="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" value="1" id="filterPropVal{filter_prop_list.values.ID}" {% IF filter_prop_list.values.CHECKED %}checked="checked"{% ENDIF %} > 
								  <label for="filterPropVal{filter_prop_list.values.ID}">{filter_prop_list.values.VALUE}</label><br />
								{% ENDFOR %}
								</div>
							  {% ENDFOR %}
							</div>
						  </form>
						</ul>
					  </li>
					{% ENDIF %}
				  {% ENDIF %}
				  <!-- END Если в тарифном плане подключен модуль фильтров по товарам -->

				  <!-- Если в тарифном плане подключен модуль сравнения товаров -->
				  {% IF TARIFF_FEATURE_GOODS_COMPARE %}
					<!-- Если не выключен модуль сравнения товаров, то покажем этот блок -->
					{% IFNOT SETTINGS_COMPARE_DISABLE %}
					  <li class="compare"><br /><h2><a href="{COMPARE_URL}">Сравнить товары</a></h2>
						<ul>
						  <div class="contentTbodyCompare">
							{%IF COMPARE_GOODS_COUNT=0 %}
							  <em class="contentTbodyCompareEmpty">Нет товаров для сравнения</em>
							{% ELSE %}
							  <em>Товаров на сравнении: {COMPARE_GOODS_COUNT} шт.</em><br />
							  <a class="contentTbodyCompareDetails" href="{COMPARE_URL}">Посмотреть</a>
							{% ENDIF %}
						  </div>
						</ul>
					  </li>
					{% ENDIF %}
				  {% ENDIF %}
				  <!-- END Если в тарифном плане подключен модуль сравнения товаров -->
				  
				  <!-- Если в тарифном плане подключен модуль новостей -->
				  {% IF TARIFF_FEATURE_NEWS %}
					<!-- Все новости -->
					{%IFNOT news_list_all_empty %}
					  <li class="news_all"><br /><h2><a href="{NEWS_ALL_URL}">Лента новостей</a></h2>
						<ul>
						  <div class="contentTbodyNews">
				
							<!-- Список новостей магазина -->
							<p class="contentTbodyNewsBlock">
							  {% FOR news_list_all %}
								<div class="contentTbodyNewsBlockItem"> 
								  <a href="{news_list_all.URL}" class="contentTbodyNewsBlockItemTitle" title="Перейти к странице новости">{news_list_all.TITLE}</a><br />
								  
								  <div class="newsListBlockItemPreview">{news_list_all.TEXT_SHORT} </div>
								  {% IF news_list_all.SHOW_TIME %}<em class="contentTbodyNewsBlockItemTime">{news_list_all.TIME | date("d.m.Y")}</em><br />{% ENDIF %}
								</div>
							  {% ENDFOR %}
							  <a class="contentTbodyNewsArchive" href="{NEWS_ALL_URL}">Архив новостей</a>
							</p>
						  </div>
						</ul>
					  </li>
					{% ENDIF %}

					<!-- Новости магазина -->
					{%IFNOT news_list_shop_empty %}
					  <li class="news_shop"><br /><h2><a href="{NEWS_SHOP_URL}">Новости магазина</a></h2>
						<ul>
						  <div class="contentTbodyNews">

							<!-- Список новостей магазина -->
							<p class="contentTbodyNewsBlock">
							  {% FOR news_list_shop %}
								<div class="contentTbodyNewsBlockItem"> 
								  <a href="{news_list_shop.URL}" class="contentTbodyNewsBlockItemTitle" title="Перейти к странице новости">{news_list_shop.TITLE}</a><br />
								  
								  <div class="newsListBlockItemPreview">{news_list_shop.TEXT_SHORT} </div>
								  {% IF news_list_shop.SHOW_TIME %}<em class="contentTbodyNewsBlockItemTime">{news_list_shop.TIME | date("d.m.Y")}</em><br />{% ENDIF %}
								</div>
							  {% ENDFOR %}
							  <a class="contentTbodyNewsArchive" href="{NEWS_SHOP_URL}">Архив новостей</a>
							</p>
						  </div>
						</ul>
					  </li>
					{% ENDIF %}

					<!-- Статьи -->
					{%IFNOT news_list_articles_empty %}
					  <li class="news_articles"><br /><h2><a href="{NEWS_ARTICLES_URL}">Статьи</a></h2>
						<ul>
						  <div class="contentTbodyNews">

							<!-- Список статей -->
							<p class="contentTbodyNewsBlock">
							  {% FOR news_list_articles %}
								<div class="contentTbodyNewsBlockItem"> 
								  <a href="{news_list_articles.URL}" class="contentTbodyNewsBlockItemTitle" title="Перейти к странице новости">{news_list_articles.TITLE}</a><br />
								  
								  <div class="newsListBlockItemPreview">{news_list_articles.TEXT_SHORT} </div>
								  {% IF news_list_articles.SHOW_TIME %}<em class="contentTbodyNewsBlockItemTime">{news_list_articles.TIME | date("d.m.Y")}</em><br />{% ENDIF %}
								</div>
							  {% ENDFOR %}
							  <a class="contentTbodyNewsArchive" href="{NEWS_ARTICLES_URL}">Архив статей</a>
							</p>
						  </div>
						</ul>
					  </li>
					{% ENDIF %}

					<!-- Материалы СМИ -->
					{%IFNOT news_list_mass_media_empty %}
					  <li class="news_mass_media"><br /><h2><a href="{NEWS_MASS_MEDIA_URL}">Новости СМИ</a></h2>
						<ul>
						  <div class="contentTbodyNews">

							<!-- Список статей -->
							<p class="contentTbodyNewsBlock">
							  {% FOR news_list_mass_media %}
								<div class="contentTbodyNewsBlockItem"> 
								  <a href="{news_list_mass_media.URL}" class="contentTbodyNewsBlockItemTitle" title="Перейти к странице новости">{news_list_mass_media.TITLE}</a><br />
								  
								  <div class="newsListBlockItemPreview">{news_list_mass_media.TEXT_SHORT} </div>
								  {% IF news_list_mass_media.SHOW_TIME %}<em class="contentTbodyNewsBlockItemTime">{news_list_mass_media.TIME | date("d.m.Y")}</em><br />{% ENDIF %}
								</div>
							  {% ENDFOR %}
							  <a class="contentTbodyNewsArchive" href="{NEWS_MASS_MEDIA_URL}">Архив новостей</a>
							</p>
						  </div>
						</ul>
					  </li>
					{% ENDIF %}
				  {% ENDIF %}
				  </div>

				</ul>
			  </div>
			</td>
			<td class="content_body cont700">
			  {BODY}
			  
			  <!-- Всевозможные списки товаров -->
			  {% IF index_page %}
				<!-- Список новинок на главной -->
				{% IFNOT index_page_new_goods_empty %}
				  <div class="pad-box">
					<h3><a href="{CATALOG_NEW_URL}" class="indexPage">Новинки</a></h3>
					{% FOR index_page_new_goods %}
					  <div class="listing">
						<div class="imagem"><a href="{index_page_new_goods.URL}"><img {% IF index_page_new_goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{index_page_new_goods.IMAGE_SMALL}"{% ENDIF %} alt="{index_page_new_goods.NAME}" /></a></div>
				  
						<div class="contm">
						  <h3><a href="{index_page_new_goods.URL}">{index_page_new_goods.NAME}</a></h3>
						  <p>
							{index_page_new_goods.DESCRIPTION_SHORT}
						  </p>
						  <p>
							Цена сейчас: <a href="{index_page_new_goods.URL_MIN_PRICE_NOW}">{index_page_new_goods.MIN_PRICE_NOW | money_format}</a><br />
							{% IF index_page_new_goods.MIN_PRICE_OLD>index_page_new_goods.MIN_PRICE_NOW %}
							  Старая цена: <a href="{index_page_new_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_new_goods.MIN_PRICE_OLD | money_format}</a>
							{% ENDIF %}
						  </p>
						  <p>
							<a class="readmore" title="{index_page_new_goods.NAME}" href="{index_page_new_goods.URL}">Подробнее</a>
						  </p>
						</div>
						<div class="clr"></div>
					  </div>
				  {% ENDFOR index_page_new_goods %}
				  </div>
				{% ENDIF %}	   
				<!-- end Список новинок на главной -->
				
				<!-- Список хитов продаж на главной -->
				{% IFNOT index_page_favorites_goods_empty %}
				  <div class="pad-box">
					<h3><a href="{CATALOG_TOP_SALES_URL}" class="indexPage">Хиты продаж</a></h3>
					{% FOR index_page_favorites_goods %}
					  <div class="listing">
						<div class="imagem"><a href="{index_page_favorites_goods.URL}"><img {% IF index_page_favorites_goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{index_page_favorites_goods.IMAGE_SMALL}"{% ENDIF %} alt="{index_page_favorites_goods.NAME}" /></a></div>
				  
						<div class="contm">
						  <h3><a href="{index_page_favorites_goods.URL}">{index_page_favorites_goods.NAME}</a></h3>
						  <p>
							{index_page_favorites_goods.DESCRIPTION_SHORT}
						  </p>
						  <p>
							Цена сейчас: <a href="{index_page_favorites_goods.URL_MIN_PRICE_NOW}">{index_page_favorites_goods.MIN_PRICE_NOW | money_format}</a><br />
							{% IF index_page_favorites_goods.MIN_PRICE_OLD>index_page_favorites_goods.MIN_PRICE_NOW %}
							  Старая цена: <a href="{index_page_favorites_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_favorites_goods.MIN_PRICE_OLD | money_format}</a>
							{% ENDIF %}
						  </p>
						  <p>
							<a class="readmore" title="{index_page_favorites_goods.NAME}" href="{index_page_favorites_goods.URL}">Подробнее</a>
						  </p>
						</div>
						<div class="clr"></div>
					  </div>
				  {% ENDFOR index_page_favorites_goods %}
				  </div>
				{% ENDIF %}	   
				<!-- end Список хитов продаж на главной -->
				
				<!-- Список товаров на главной -->
				{% IFNOT index_page_goods_empty %}
				  <div class="pad-box">
					<h3>Интересные предложения</h3>
					{% FOR index_page_goods %}
					  <div class="listing">
						<div class="imagem"><a href="{index_page_goods.URL}"><img {% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{index_page_goods.IMAGE_SMALL}"{% ENDIF %} alt="{index_page_goods.NAME}" /></a></div>
				  
						<div class="contm">
						  <h3><a href="{index_page_goods.URL}">{index_page_goods.NAME}</a></h3>
						  <p>
							{index_page_goods.DESCRIPTION_SHORT}
						  </p>
						  <p>
							Цена сейчас: <a href="{index_page_goods.URL_MIN_PRICE_NOW}">{index_page_goods.MIN_PRICE_NOW | money_format}</a><br />
							{% IF index_page_goods.MIN_PRICE_OLD>index_page_goods.MIN_PRICE_NOW %}
							  Старая цена: <a href="{index_page_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_goods.MIN_PRICE_OLD | money_format}</a>
							{% ENDIF %}
						  </p>
						  <p>
							<a class="readmore" title="{index_page_goods.NAME}" href="{index_page_goods.URL}">Подробнее</a>
						  </p>
						</div>
						<div class="clr"></div>
					  </div>
				  {% ENDFOR index_page_goods %}
				  </div>
				{% ENDIF %}	   
				<!-- end Список товаров на главной -->
			  {% ENDIF %}
			  <!-- END Всевозможные списки товаров -->
			  
			</td>
			
		  </tr>
		</table>
	  </div>
	</div>
  </div>

  <!-- Подвал сайта -->
  <div id="footer">
	<div class="left">
	  <p>&copy; {DATE_YEAR} {SETTINGS_STORE_NAME}. {SETTINGS_STORE_ORG_NAME}. Все права защищены.</p>
	  <ul>
		{% FOR menu %}
		  {% FOR footer %}
			{% FOR links %}<li {% IF menu.footer.links.last %}class="last"{% ENDIF %}><a href="{menu.footer.links.URL}" {% IF menu.footer.links.SELECTED %}class="selected"{%ENDIF%} {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %}>{menu.footer.links.NAME}</a></li>{% ENDFOR %}
		  {% ENDFOR %}
		{% ENDFOR %}
	  </ul>
	</div>
	<div class="right"><p>{COPYRIGHT_FOR_DESIGN_SHINE} {SETTINGS_STORE_REGION}</p></div>
	<div class="clr"></div>
	<div>{SETTINGS_STORE_HTML_CODE}</div>
  </div>
</body>
</html>

Просмотр сообщенияKost (12 Октябрь 2010 - 01:06) писал:

честно говоря я в HTML вообще не разбираюсь пока, и по этому могу следовать только по инструкции:
1) зайди туда
2) найди строку
3) скопируй туда то-то
4) сохрани
Поэтому как и что сделать так и не понял (Но старался :)
Лучше всего сделать, чтобы был не переключатель между матричным и ленточным видом ,а просто матричный вид по 3 товара в ряду.
Напишите мне пожалуйста инструкцию.

Объясню на примере шаблона отображения "Товары". Для поиска и отображения товаров в акции он будет точно такой же.
Во первых нужно создать стили отображения табличного вида. Т.к я не дизайнер и в этом мало понимаю, скопировал стили из соседнего шаблона, Мокко, вот код:
/* Страница категории. ячейки с товаром */
.goodsListItem					  {text-align:center;vertical-align:top;width:200px;overflow:hidden;padding:0px;}   /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/
.goodsListItemBlock				 {height:200px;margin:5px;overflow:hidden;}
.goodsListItemBlock a			   {color:#BE9E4C}
.goodsListItemImage				 {height:100px;margin-top:1em}
.goodsListItemName				  {line-height:1.2em;padding:0px 2px 0px 2px;margin:0px;max-height:3.6em;overflow:hidden;}
.goodsListItemName a				{color:#2f97cb;font-size:15px;line-height:1.2em;padding:0px;margin:0px;}
вставил их в конец файла main.csstemplate
Можно вставлять их и через тег style внутри шаблона, кому как удобней.

Далее вставил сверху переключатель, который я посылал Вам выше:
<!-- Переключатель режима просмотра -->
{% IF GOODS_VIEW_TYPE=2 %}
  <strong title="Список товаров сейчас отображается в виде таблицы, по 2 товара на строку">Таблица</strong>&nbsp;
  <a href="?goods_view_type=1" title="Отображать список товаров в виде списка">Список</a>
{% ELSE %}
  <a href="?goods_view_type=2" title="Отображать список товаров в виде таблицы с 2мя товарами на одну строку">Таблица</a>&nbsp;
  <strong title="Список товаров сейчас отображается в виде списка, где один товар занимает одну строку">Список</strong>
{% ENDIF %}
<!-- /Переключатель режима просмотра -->

Пол дела сделано.
Осталось добавить условие
{% IF GOODS_VIEW_TYPE=1 %}
для старого списка, и в остальных случаях
{% ELSE %}
выдавать табличный вид из шаблона мокко, по 3 товара в ряду.
Было так:
{% FOR goods %}
  <div class="listing">
	<div class="imagem"><a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a></div>

	<div class="contm">
	  <h3><a href="{goods.URL}">{goods.NAME}</a></h3>
	  <p>
		{goods.DESCRIPTION_SHORT}
	  </p>
	  <p>
		Цена сейчас: <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a><br />
		{% IF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
			Старая цена: <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a>
		  {% ENDIF %}
		</p>
		<p>
		<a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a>
		</p>
	</div>
	<div class="clr"></div>
  </div>
{% ENDFOR goods %}


Стало так:
{% IF GOODS_VIEW_TYPE=1 %}
  <!-- Список товаров. Список -->
  {% FOR goods %}
	<div class="listing">
	  <div class="imagem"><a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a></div>

	  <div class="contm">
		<h3><a href="{goods.URL}">{goods.NAME}</a></h3>
		<p>
		  {goods.DESCRIPTION_SHORT}
		</p>
		<p>
		  Цена сейчас: <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a><br />
		  {% IF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
			Старая цена: <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a>
		  {% ENDIF %}
		</p>
		<p>
		  <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a>
		</p>
	  </div>
	  <div class="clr"></div>
	</div>
  {% ENDFOR goods %}
  <!-- /Список товаров. Список -->
{% ELSE %}
  <!-- Список товаров. Таблица -->
  <table>
	{% FOR goods %}
	  <td class="goodsListItem">  
		<div class="goodsListItemBlock withBorder cornerAll">
		  <div class="goodsListItemImage"><a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a></div>
		  <h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3>
		  <div class="goodsListItemPriceNew">
	  		<a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a>
	  	  </div>  
	  	  <div class="goodsListItemPriceOld">
			{% IF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
			  <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a>
			{% ENDIF %} 
		  </div>
		</div>
	  </td>
	{goods.index | is_divided("3","</tr><tr>","")}
	{% ENDFOR goods %}
  </table>
<!-- /Список товаров. Таблица -->
{% ENDIF %}

Ну и поменял настройки, указав для остальных изображений 100 px можете указать и другую цифру, указывал на глаз.
Целиком код страницы списка товаров получился такой:
<div class="page-headline">
  <h1>{CATEGORY_NAME}</h1>
</div>

<div class="pad-box">
  <!-- Строка пути -->
  <div id="site-path">
	<p>
	  <a href="http://{NET_DOMAIN}/">Главная</a> 
	  
	  <!-- Если отображаем полный каталог товаров, без указания категории -->
	  {% IF IS_FULL_CATALOG %}
		 » <span class="current">Каталог товаров</span>
	  <!-- Если отображаем товары в категории -->
	  {% ELSE %}
		» <a href="{CATALOG_URL}" >Каталог товаров</a> 
		{% FOR upper_navigation %}
		  {% IF upper_navigation.CURRENT %} » <span class="current">{upper_navigation.NAME}</span>{% ELSEIF upper_navigation.CURRENT_PARENT %} » <a href="{upper_navigation.URL}" >{upper_navigation.NAME}</a>{% ENDIF %}
		{% ENDFOR %}
	  {% ENDIF %}
	  
	</p>
  </div>
  <!-- end Строка пути -->

  
  <!-- Фильтры показываются только если есть товары в категории -->
  {% IFNOT goods_empty %}
	<!-- Блок выбора параметра по которому производится сортировка списка товаров и возможность изменения лимитов выдачи -->
	<form action="">
	  <table class="goodsListingTopNavigation">
		<tr>
		  <td>
			<!-- Список фильтров, которые сейчас действуют на результаты поиска -->
			{% FOR goods_filters %}
			  <input type="hidden" name="{goods_filters.NAME}" value="{goods_filters.VALUE}" />
			{% ENDFOR %}
		
			<!-- Поле выбора сортировки -->
			{% IF goods_show_order_fields %}
			  Сортировать по:
			  <select name="goods_search_field_id" onchange="this.form.submit();">
				{% FOR goods_order_fields %}
				  <option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>{goods_order_fields.NAME}</option>
				{% ENDFOR %}
			  </select>
			{% ENDIF %}
		  </td>
		  <td class="alignRight">
			<!-- Поле выбора лимитов -->
			{% IF goods_show_per_page %}
			  Показывать по:
			  <select name="per_page" onchange="this.form.submit();">
				{% FOR goods_per_page_list %}
				  <option value="{goods_per_page_list.LIMIT}" {% IF goods_per_page_list.SELECTED %}selected="selected"{% ENDIF %}>{goods_per_page_list.LIMIT}</option>
				{% ENDFOR %}
			  </select>
			{% ENDIF %}
		  </td>
		</tr>
	  </table>
	</form>
	<!-- END Блок выбора параметра по которому производится сортировка списка товаров -->
  {% ENDIF %}
  <!-- END Фильтры показываются только если есть товары в категории -->
  
  <!-- Goods list -->
  {% IF goods_empty %}

	<!-- Если не применено ни одного фильтра, значит в категории нет товаров -->
	{% IF goods_filters_empty %}
	 
	  <!-- Если в категории нет товаров, но есть категории, то отобразим их -->
	  {%IFNOT nested_categories_list_empty %}

		<!-- Блок навигации по категориям, вложенным в текущую категорию -->
		<ul class="content_catalog_nested_categories">
		  {% FOR nested_categories_list %}
			<li>
			  <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории «{nested_categories_list.NAME}»"><img {% 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="Перейти к категории «{nested_categories_list.NAME}»">{nested_categories_list.NAME}</a>
			</li>
		  {% ENDFOR %}
		</ul>
		<br clear="all"/>
		
	  <!-- Если в категории нет ни товаров, ни категорий то сообщим пользователю что ничего нет -->
	  {% ELSE %}
	   <h3>Нет товаров в категории</h3>
	  {% ENDIF %}

	<!-- Если производили фильтрацию товаров в категории -->
	{% ELSE %}
	  <h3>Нет товаров для выбранных условий</h3>
	{% ENDIF %}

  {% ELSE %}
	<!-- Переключатель режима просмотра -->
	{% IF GOODS_VIEW_TYPE=2 %}
	  <strong title="Список товаров сейчас отображается в виде таблицы, по 2 товара на строку">Таблица</strong>&nbsp;
	  <a href="?goods_view_type=1" title="Отображать список товаров в виде списка">Список</a>
	{% ELSE %}
	  <a href="?goods_view_type=2" title="Отображать список товаров в виде таблицы с 2мя товарами на одну строку">Таблица</a>&nbsp;
	  <strong title="Список товаров сейчас отображается в виде списка, где один товар занимает одну строку">Список</strong>
	{% ENDIF %}
	<!-- /Переключатель режима просмотра -->
	
	{% IF GOODS_VIEW_TYPE=1 %}
	  <!-- Список товаров. Список -->
	  {% FOR goods %}
		<div class="listing">
		  <div class="imagem"><a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a></div>
	
		  <div class="contm">
			<h3><a href="{goods.URL}">{goods.NAME}</a></h3>
			<p>
			  {goods.DESCRIPTION_SHORT}
			</p>
			<p>
			  Цена сейчас: <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a><br />
			  {% IF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
				Старая цена: <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a>
			  {% ENDIF %}
			</p>
			<p>
			  <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a>
			</p>
		  </div>
		  <div class="clr"></div>
		</div>
	  {% ENDFOR goods %}
	  <!-- /Список товаров. Список -->
	{% ELSE %}
	  <!-- Список товаров. Таблица -->
	  <table>
		{% FOR goods %}
		  <td class="goodsListItem">  
			<div class="goodsListItemBlock withBorder cornerAll">
			  <div class="goodsListItemImage"><a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a></div>
			  <h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3>
			  <div class="goodsListItemPriceNew">
		  		<a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a>
		  	  </div>  
		  	  <div class="goodsListItemPriceOld">
				{% IF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
				  <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a>
				{% ENDIF %} 
			  </div>
			</div>
		  </td>
		{goods.index | is_divided("3","</tr><tr>","")}
		{% ENDFOR goods %}
	  </table>
	<!-- /Список товаров. Таблица -->
	{% ENDIF %}
  {% ENDIF %}	   
  <!-- end Goods list -->
  
  <!-- Pages -->
  {% IF show_pages %}
  <div class="pagination">
	<span class="pp-title">Страницы:</span>
	{% FOR goods_pages %}
	  {% IF goods_pages.CURRENT %}
		<span class="pp-page pp-current">{goods_pages.PAGE}</span>
	  {% ELSE %}
		<a class="pp-page" href="{GOODS_PAGINATE_URL}&page={goods_pages.PAGE}">{goods_pages.PAGE}</a>
	  {% ENDIF %}
	{% ENDFOR %}
  </div>
  {% ENDIF %}
  <!-- end Pages -->

  <p>{CATEGORY_DESCRIPTION}</p>
</div>

Результат работы такой:
shine-view-type-1.jpg
shine-view-type-2.jpg

#7 Kost

Kost

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

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

Отправлено 14 Октябрь 2010 - 04:04

По поводу переноса каталога в левую сторону, теперь все отлично! Копирнул то что вы предложили и все стало как и должно было)
Вобще из того что вы написали все получилось!

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



#8 support

support

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

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

Отправлено 14 Октябрь 2010 - 12:41

Просмотр сообщенияKost (14 Октябрь 2010 - 04:04) писал:

А возможно сделать так, чтобы табличный тип отображения фотографий был по умолчанию?
Изменить условие, поставив по умолчанию сравнение с
{% IF GOODS_VIEW_TYPE=1 %}
на
{% IF GOODS_VIEW_TYPE=2 %}
По идее этого будет достаточно.

#9 Kost

Kost

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

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

Отправлено 20 Октябрь 2010 - 03:27

Спасибо вам большое за помощь!  )



#10 ike

ike

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

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

Отправлено 07 Ноябрь 2010 - 00:29

Почитал....попробовал.....и не понял.....объясните еще раз для особо твердолобых :rolleyes:
мне нужно чтобы товары на главной странице из категорий  "Акции" "Товары на главной" "Новинки" и "Хиты продаж" отображались в матричном виде т.е. по три в ряду, а размещение товаров в основном каталоге товаров не изменилось.....
                      PLEASE еще раз..... вообще не уловил :unsure:))))

#11 support

support

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

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

Отправлено 07 Ноябрь 2010 - 01:36

Для главной страницы логика по сути та же, только вот перменные там немного другие, возможно не вышло из-за этого. В каталоге идет {goods.} в на главной эта переменная меняется на {index_page_new_goods.} для новинок, {index_page_favorites_goods.} для хитов продаж и {index_page_goods.} для товаров, категории главная.

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

Итак, чтобы на главной странице магазина товары отображались в матричном виде нужно поменять код по аналогии с предыдущим примером. В итоге в редакторе тем из кода в шаблоне "HTML"
<!-- Всевозможные списки товаров -->
{% IF index_page %}
  <!-- Список новинок на главной -->
  {% IFNOT index_page_new_goods_empty %}
	<div class="pad-box">
	  <h3><a href="{CATALOG_NEW_URL}" class="indexPage">Новинки</a></h3>
	  {% FOR index_page_new_goods %}
		<div class="listing">
		  <div class="imagem"><a href="{index_page_new_goods.URL}"><img {% IF index_page_new_goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{index_page_new_goods.IMAGE_SMALL}"{% ENDIF %} alt="{index_page_new_goods.NAME}" /></a></div>
	
		  <div class="contm">
			<h3><a href="{index_page_new_goods.URL}">{index_page_new_goods.NAME}</a></h3>
			<p>
			  {index_page_new_goods.DESCRIPTION_SHORT}
			</p>
			<p>
			  Цена сейчас: <a href="{index_page_new_goods.URL_MIN_PRICE_NOW}">{index_page_new_goods.MIN_PRICE_NOW | money_format}</a><br />
			  {% IF index_page_new_goods.MIN_PRICE_OLD>index_page_new_goods.MIN_PRICE_NOW %}
					Старая цена: <a href="{index_page_new_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_new_goods.MIN_PRICE_OLD | money_format}</a>
				  {% ENDIF %}
				</p>
				<p>
			  <a class="readmore" title="{index_page_new_goods.NAME}" href="{index_page_new_goods.URL}">Подробнее</a>
				</p>
		  </div>
		  <div class="clr"></div>
		</div>
	{% ENDFOR index_page_new_goods %}
	</div>
  {% ENDIF %}	   
  <!-- end Список новинок на главной -->
  
  <!-- Список хитов продаж на главной -->
  {% IFNOT index_page_favorites_goods_empty %}
	<div class="pad-box">
	  <h3><a href="{CATALOG_TOP_SALES_URL}" class="indexPage">Хиты продаж</a></h3>
	  {% FOR index_page_favorites_goods %}
		<div class="listing">
		  <div class="imagem"><a href="{index_page_favorites_goods.URL}"><img {% IF index_page_favorites_goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{index_page_favorites_goods.IMAGE_SMALL}"{% ENDIF %} alt="{index_page_favorites_goods.NAME}" /></a></div>
	
		  <div class="contm">
			<h3><a href="{index_page_favorites_goods.URL}">{index_page_favorites_goods.NAME}</a></h3>
			<p>
			  {index_page_favorites_goods.DESCRIPTION_SHORT}
			</p>
			<p>
			  Цена сейчас: <a href="{index_page_favorites_goods.URL_MIN_PRICE_NOW}">{index_page_favorites_goods.MIN_PRICE_NOW | money_format}</a><br />
			  {% IF index_page_favorites_goods.MIN_PRICE_OLD>index_page_favorites_goods.MIN_PRICE_NOW %}
					Старая цена: <a href="{index_page_favorites_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_favorites_goods.MIN_PRICE_OLD | money_format}</a>
				  {% ENDIF %}
				</p>
				<p>
			  <a class="readmore" title="{index_page_favorites_goods.NAME}" href="{index_page_favorites_goods.URL}">Подробнее</a>
				</p>
		  </div>
		  <div class="clr"></div>
		</div>
	{% ENDFOR index_page_favorites_goods %}
	</div>
  {% ENDIF %}	   
  <!-- end Список хитов продаж на главной -->
  
  <!-- Список товаров на главной -->
  {% IFNOT index_page_goods_empty %}
	<div class="pad-box">
	  <h3>Интересные предложения</h3>
	  {% FOR index_page_goods %}
		<div class="listing">
		  <div class="imagem"><a href="{index_page_goods.URL}"><img {% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{index_page_goods.IMAGE_SMALL}"{% ENDIF %} alt="{index_page_goods.NAME}" /></a></div>
	
		  <div class="contm">
			<h3><a href="{index_page_goods.URL}">{index_page_goods.NAME}</a></h3>
			<p>
			  {index_page_goods.DESCRIPTION_SHORT}
			</p>
			<p>
			  Цена сейчас: <a href="{index_page_goods.URL_MIN_PRICE_NOW}">{index_page_goods.MIN_PRICE_NOW | money_format}</a><br />
			  {% IF index_page_goods.MIN_PRICE_OLD>index_page_goods.MIN_PRICE_NOW %}
					Старая цена: <a href="{index_page_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_goods.MIN_PRICE_OLD | money_format}</a>
				  {% ENDIF %}
				</p>
				<p>
			  <a class="readmore" title="{index_page_goods.NAME}" href="{index_page_goods.URL}">Подробнее</a>
				</p>
		  </div>
		  <div class="clr"></div>
		</div>
	{% ENDFOR index_page_goods %}
	</div>
  {% ENDIF %}	   
  <!-- end Список товаров на главной -->
{% ENDIF %}
<!-- END Всевозможные списки товаров -->

у нас получится вот такой код (я просто взял тот пример что выше и заменил {goods.} на соответствующую списку переменную):
<!-- Всевозможные списки товаров -->
{% IF index_page %}
  
  <!-- Список новинок на главной -->
  {% IFNOT index_page_new_goods_empty %}
	<div class="pad-box">
	  <h3><a href="{CATALOG_NEW_URL}" class="indexPage">Новинки</a></h3>
	  <!-- Список товаров. Таблица -->
	  <table>
		<col width="33%" />
		<col width="33%" />
		<col width="33%" />
		{% FOR index_page_new_goods %}
		  <td class="goodsListItem">  
			<div class="goodsListItemBlock withBorder cornerAll">
			  <div class="goodsListItemImage"><a href="{index_page_new_goods.URL}"><img src="{% IF index_page_new_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{index_page_new_goods.IMAGE_OTHER}{% ENDIF %}" alt="{index_page_new_goods.NAME}" /></a></div>
			  <h3 class="goodsListItemName"><a href="{index_page_new_goods.URL}">{index_page_new_goods.NAME}</a></h3>
			  <div class="goodsListItemPriceNew">
				<a href="{index_page_new_goods.URL_MIN_PRICE_NOW}">{index_page_new_goods.MIN_PRICE_NOW | money_format}</a>
			  </div>  
			  <div class="goodsListItemPriceOld">
				{% IF index_page_new_goods.MIN_PRICE_OLD>index_page_new_goods.MIN_PRICE_NOW %}
				  <a href="{index_page_new_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_new_goods.MIN_PRICE_OLD | money_format}</a>
				{% ENDIF %} 
			  </div>
			</div>
		  </td>
		  {index_page_new_goods.index | is_divided("3","</tr><tr>","")}
		{% ENDFOR index_page_new_goods %}
	  </table>
	<!-- /Список товаров. Таблица -->
	</div>
  {% ENDIF %}	   
  <!-- end Список новинок на главной -->
  
  <!-- Список хитов продаж на главной -->
  {% IFNOT index_page_favorites_goods_empty %}
	<div class="pad-box">
	  <br /><h3><a href="{CATALOG_TOP_SALES_URL}" class="indexPage">Хиты продаж</a></h3>
	  <!-- Список товаров. Таблица -->
	  <table>
		<col width="33%" />
		<col width="33%" />
		<col width="33%" />
		{% FOR index_page_favorites_goods %}
		  <td class="goodsListItem">  
			<div class="goodsListItemBlock withBorder cornerAll">
			  <div class="goodsListItemImage"><a href="{index_page_favorites_goods.URL}"><img src="{% IF index_page_favorites_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{index_page_favorites_goods.IMAGE_OTHER}{% ENDIF %}" alt="{index_page_favorites_goods.NAME}" /></a></div>
			  <h3 class="goodsListItemName"><a href="{index_page_favorites_goods.URL}">{index_page_favorites_goods.NAME}</a></h3>
			  <div class="goodsListItemPriceNew">
				<a href="{index_page_favorites_goods.URL_MIN_PRICE_NOW}">{index_page_favorites_goods.MIN_PRICE_NOW | money_format}</a>
			  </div>  
			  <div class="goodsListItemPriceOld">
				{% IF index_page_favorites_goods.MIN_PRICE_OLD>index_page_favorites_goods.MIN_PRICE_NOW %}
				  <a href="{index_page_favorites_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_favorites_goods.MIN_PRICE_OLD | money_format}</a>
				{% ENDIF %} 
			  </div>
			</div>
		  </td>
		  {index_page_favorites_goods.index | is_divided("3","</tr><tr>","")}
		{% ENDFOR index_page_favorites_goods %}
	  </table>
	</div>
  {% ENDIF %}	   
  <!-- end Список хитов продаж на главной -->
  
  <!-- Список товаров на главной -->
  {% IFNOT index_page_goods_empty %}
	<div class="pad-box">
	  <br /><h3>Интересные предложения</h3>
	  <!-- Список товаров. Таблица -->
	  <table>
		<col width="33%" />
		<col width="33%" />
		<col width="33%" />
		{% FOR index_page_goods %}
		  <td class="goodsListItem">  
			<div class="goodsListItemBlock withBorder cornerAll">
			  <div class="goodsListItemImage"><a href="{index_page_goods.URL}"><img src="{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{index_page_goods.IMAGE_OTHER}{% ENDIF %}" alt="{index_page_goods.NAME}" /></a></div>
			  <h3 class="goodsListItemName"><a href="{index_page_goods.URL}">{index_page_goods.NAME}</a></h3>
			  <div class="goodsListItemPriceNew">
				<a href="{index_page_goods.URL_MIN_PRICE_NOW}">{index_page_goods.MIN_PRICE_NOW | money_format}</a>
			  </div>  
			  <div class="goodsListItemPriceOld">
				{% IF index_page_goods.MIN_PRICE_OLD>index_page_goods.MIN_PRICE_NOW %}
				  <a href="{index_page_goods.URL_MIN_PRICE_OLD}" class="lineThrough">{index_page_goods.MIN_PRICE_OLD | money_format}</a>
				{% ENDIF %} 
			  </div>
			</div>
		  </td>
		  {index_page_goods.index | is_divided("3","</tr><tr>","")}
		{% ENDFOR index_page_goods %}
	  </table>
	</div>
  {% ENDIF %}	   
  <!-- end Список товаров на главной -->
  
{% ENDIF %}
<!-- END Всевозможные списки товаров -->

Ну и естественно не забываем прописать те стили, которые были указаны выше, чтобы всё отображалось как надо:
/* Страница категории. ячейки с товаром */
.goodsListItem					  {text-align:center;vertical-align:top;width:200px;overflow:hidden;padding:0px;}   /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/
.goodsListItemBlock				 {height:300px;width:215px;margin:5px;overflow:hidden;}
.goodsListItemBlock a			   {color:#BE9E4C}
.goodsListItemImage				 {height:190px;margin-top:1em}
.goodsListItemName				  {line-height:1.2em;padding:0px 2px 0px 2px;margin:0px;max-height:3.6em;overflow:hidden;}
.goodsListItemName a				{color:#2f97cb;font-size:15px;line-height:1.2em;padding:0px;margin:0px;}


#12 ike

ike

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

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

Отправлено 07 Ноябрь 2010 - 02:19

все сделал....получилось частично....думаю все будет понятно из скриншота
Моя ссылка

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

  • Снимок.PNG


#13 support

support

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

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

Отправлено 07 Ноябрь 2010 - 04:21

В вашем случае нужно указать во вкладке "Настройки" больший размер для параметра "Максимальный размер по высоте/ширине в пикселях для используемых пользователем изображений" например до 190 px для того чтобы разобраться почему поехала верстка, киньте пожалуйста, сайт, посмотрю повнимательней, у меня тестовые данные слишком простые)

#14 ike

ike

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

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

Отправлено 07 Ноябрь 2010 - 08:39

Просмотр сообщенияsupport (07 Ноябрь 2010 - 04:21) писал:

В вашем случае нужно указать во вкладке "Настройки" больший размер для параметра "Максимальный размер по высоте/ширине в пикселях для используемых пользователем изображений" например до 100 px для того чтобы разобраться почему поехала верстка, киньте пожалуйста, сайт, посмотрю повнимательней, у меня тестовые данные слишком простые)

отправил в личку....

#15 support

support

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

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

Отправлено 07 Ноябрь 2010 - 14:30

Просмотр сообщенияike (07 Ноябрь 2010 - 08:39) писал:

отправил в личку....
Для удобства изменил немного код предыдущего поста, чтобы вставка кода была более удачной.
Для вашего сайта поправил немного отступы, изменил немного размеры ячеек, сделал фиксированными по 215 пикселей в ширину, закачал файл для отсутствующих изображений, 100 на 100 пикселей:
no-photo-other.png
и все заработало, вот результат:
index-page-cells.jpg

P.S. По большому счету было бы неплохо изображения сделать по 150-170 пикселей, они должны бы смотреться более эффектно

#16 ike

ike

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

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

Отправлено 07 Ноябрь 2010 - 19:08

Просмотр сообщенияsupport (07 Ноябрь 2010 - 14:30) писал:

Для удобства изменил немного код предыдущего поста, чтобы вставка кода была более удачной.
Для вашего сайта поправил немного отступы, изменил немного размеры ячеек, сделал фиксированными по 215 пикселей в ширину, закачал файл для отсутствующих изображений, 100 на 100 пикселей:
Прикрепленный файл no-photo-other.png
и все заработало, вот результат:
Прикрепленный файл index-page-cells.jpg

P.S. По большому счету было бы неплохо изображения сделать по 150-170 пикселей, они должны бы смотреться более эффектно


спасибо....были проблемы...решил сам!!!!
СПАСИБО!!!

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

  • Снимок.PNG

Сообщение отредактировал ike: 07 Ноябрь 2010 - 19:13


#17 support

support

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

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

Отправлено 08 Ноябрь 2010 - 01:15

К слову говоря при переносе каталога в левую часть изменяете и положение заголовка страницы, для того чтобы оно встало с левого края, над категориями, можно использовать хитрый но простой приём, указать относительное смещение заголовка влево, как на сайте http://jam4you.ru/

Вставьте код через редактор тем в конец файла main.csstemplate
.page-headline {
  left: -230px;
  position: relative;
}
Это сдвинет заголовок на 230 пикслелей в лево. Кросбраузерно.

#18 Юлия А.

Юлия А.

    Новичок

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

Отправлено 11 Апрель 2011 - 14:35

Добрый день!
спасибо большое за предыдущие подробные ответы - удалось переместить каталог в левую часть экрана
Но при этом возникла вертикальная полоса
Изображение

как ее убрать, подскажите, пожалуйста

второй вопрос:

Изображение

как поменять "Главная страница" на "Салон кукол"

и во вкладке "Каталог товаров" оставить просто "Каталог" (удалить слово "товаров")?


ну и третий вопрос))) :
Изображение

как заменить на свой рисунок?

заранее спасибо!

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

#19 support

support

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

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

Отправлено 11 Апрель 2011 - 17:30

Просмотр сообщенияЮлия А. (11 Апрель 2011 - 14:35) писал:

Добрый день!
спасибо большое за предыдущие подробные ответы - удалось переместить каталог в левую часть экрана
Но при этом возникла вертикальная полоса
Изображение

как ее убрать, подскажите, пожалуйста

Просмотр сообщенияsupport (08 Октябрь 2010 - 22:30) писал:

Далее нужно будет подвинуть фон разделитель. Нашел я его довольно просто, через "Анализировать элемент" в гугл хроме, подробно процесс описывали, когда нужно было сдвинуть разделитель на 2-3 пикселя вниз. Для этого откройте main.csstemplate и найдите такую строчку:
.content_page {
  background: url({ASSETS_IMAGES_PATH}content-page-br.gif) no-repeat 710px 68px;
  overflow:hidden;  
  padding-bottom: 2em;
}

Этот стиль описывает стиль, создающий разделитель страницы на 2 части. Изменяем его положение с 710 пикселей, на 230 пикселей. Получится такой стиль:
.content_page {
  background: url({ASSETS_IMAGES_PATH}content-page-br.gif) no-repeat 230px 68px;
  overflow:hidden;  
  padding-bottom: 2em;
}
Нажимаем сохранить и сайт изменился, все выглядит довольно адекватно:
Прикрепленный файл shine-catalog-move-to-left.jpg


Просмотр сообщенияЮлия А. (11 Апрель 2011 - 14:35) писал:

Изображение

как поменять "Главная страница" на "Салон кукол"
Для этого достаточно в разделе "Сайт" > "Страницы" найти главную и указать другой заголовок страницы.

Просмотр сообщенияЮлия А. (11 Апрель 2011 - 14:35) писал:

и во вкладке "Каталог товаров" оставить просто "Каталог" (удалить слово "товаров")?
Это можно сделать поправив код в разделе "Сайт" > "Редактор тем" для шаблона "Товары" с:

<div class="page-headline">
  <h1>{CATEGORY_NAME}</h1>
</div>

На
<div class="page-headline">
  <h1>
	{% IF CATEGORY_NAME=Каталог товаров %}
	  Салон кукол
	{% ELSE %}
	  {CATEGORY_NAME}
	{% ENDIF %}
  </h1>
</div>

Поскольку думаю требуется изменить название в других местах, вот как это сделать для строки навигации сверху в шаблоне "Товары":
Меняем код с:
	  <!-- Если отображаем полный каталог товаров, без указания категории -->
	  {% IF IS_FULL_CATALOG %}
		 » <span class="current">Каталог товаров</span>
	  <!-- Если отображаем товары в категории -->
	  {% ELSE %}
		» <a href="{CATALOG_URL}" >Каталог товаров</a> 
		{% FOR upper_navigation %}
		  {% IF upper_navigation.CURRENT %} » <span class="current">{upper_navigation.NAME}</span>{% ELSEIF upper_navigation.CURRENT_PARENT %} » <a href="{upper_navigation.URL}" >{upper_navigation.NAME}</a>{% ENDIF %}
		{% ENDFOR %}
	  {% ENDIF %}

На:
	  <!-- Если отображаем полный каталог товаров, без указания категории -->
	  {% IF IS_FULL_CATALOG %}
		 » <span class="current">Салон кукол</span>
	  <!-- Если отображаем товары в категории -->
	  {% ELSE %}
		» <a href="{CATALOG_URL}" >Салон кукол</a> 
		{% FOR upper_navigation %}
		  {% IF upper_navigation.CURRENT %} » <span class="current">{upper_navigation.NAME}</span>{% ELSEIF upper_navigation.CURRENT_PARENT %} » <a href="{upper_navigation.URL}" >{upper_navigation.NAME}</a>{% ENDIF %}
		{% ENDFOR %}
	  {% ENDIF %}

А в шаблоне "Товар" меняем код с:
  <!-- Строка пути -->
  <div id="site-path">
	<p>
	  <a href="http://{NET_DOMAIN}/">Главная</a> » <a href="{CATALOG_URL}" >Каталог товаров</a>
	  {% FOR upper_navigation %}
		{% IF upper_navigation.CURRENT %} » <a href="{upper_navigation.URL}" >{upper_navigation.NAME}</a>{% ELSEIF upper_navigation.CURRENT_PARENT %} » <a href="{upper_navigation.URL}" >{upper_navigation.NAME}</a>{% ENDIF %}
	  {% ENDFOR %}
	  » <span class="current">{GOODS_NAME}</span>
	</p>
  </div>
  <!-- end Строка пути -->

на:
  <!-- Строка пути -->
  <div id="site-path">
	<p>
	  <a href="http://{NET_DOMAIN}/">Главная</a> » <a href="{CATALOG_URL}" >Салон кукол</a>
	  {% FOR upper_navigation %}
		{% IF upper_navigation.CURRENT %} » <a href="{upper_navigation.URL}" >{upper_navigation.NAME}</a>{% ELSEIF upper_navigation.CURRENT_PARENT %} » <a href="{upper_navigation.URL}" >{upper_navigation.NAME}</a>{% ENDIF %}
	  {% ENDFOR %}
	  » <span class="current">{GOODS_NAME}</span>
	</p>
  </div>
  <!-- end Строка пути -->

Последним изменением будет правка названия "Каталог товаров" на "Каталог" в панели управления магазином, в разделе "Сайт" > "Меню".

Просмотр сообщенияЮлия А. (11 Апрель 2011 - 14:35) писал:

ну и третий вопрос))) :
Изображение

как заменить на свой рисунок?
Это делается аналогично этой ветке нашего форума:
http://forum.storela..._findpost__p__5

Для вставки логотипа проще использовать photoshop изменив изображение в разделе "Сайт" > "Редактор тем" header_page_without_logo.png и вставив получившееся изображение вместо header_page.png дополнительных действий делать не придётся.

Просмотр сообщенияЮлия А. (11 Апрель 2011 - 14:35) писал:

пс да, еще хочу поменять местами расположение вкладок: главная, каталог, корзина, доставка, контакты
Это делается в разделе "Сайт" > "Меню" перетягиванием пункта меню туда, куда будет нужно.

#20 Юлия А.

Юлия А.

    Новичок

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

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

Добрый день! спасибо огромное - все получилось, кроме замены шапки.
Я скачала файл header_page_without_logo.png, наложила на него свой рисунок.
переименовала его в header_page.png (см прилагаемый файл)

далее удлила отсюда:
Изображение

исходный header_page.png

вставила свой с компьютера - а у меня сайт отображается без логотипа совсем: ни старого, ни нового рисунка

подскажите, пожалуйста, как исправить?

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

  • header_page.png





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

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