Отключен JavaScript

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

0

как сделать список товаров по три штуки в ряд???

Автор lubovr, 05 янв. 2011 18:59

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

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

#1 lubovr

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

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

Отправлено 05 Январь 2011 - 18:59

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

Наверх

#2 lubovr

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

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

Отправлено 05 Январь 2011 - 19:03

извиняюсь, нужно по 2 штуки в ряд

Наверх

#4 lubovr

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

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

Отправлено 06 Январь 2011 - 11:46

ОК !СПАСИБО!!!! попытаюсь разобраться
и еще один маленький вопросик. есть скрипт "летящих бабочек" - куда его нужно вставить/( что бы они летали на главной странице) - ???

Наверх

#5 lubovr

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

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

Отправлено 06 Январь 2011 - 12:07

уже разобралась, спасибо

Наверх

#6 lubovr

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

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

Отправлено 26 Январь 2011 - 13:35

Добрый день!
1)подскажите как сделать отображение товара в виде списка, где два товар занимает одну строку (пример: http://candykid.ru/)(то что вы писали выше сделала- но это совсем не то что нужно).
2)где можно изменить значения Сортировать по:???например не по цене: дорогие -дешевые, а по размеру62-68
3)как закрасить фоном бока страницы?

Наверх

#7 support

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

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

ГородМосква

Отправлено 26 Январь 2011 - 17:53

lubovr (26 Январь 2011 - 13:35) писал:

Добрый день!
1)подскажите как сделать отображение товара в виде списка, где два товар занимает одну строку (пример: http://candykid.ru/)(то что вы писали выше сделала- но это совсем не то что нужно).

Здравствуйте! На указанном сайте товары идут ячейками, заполняя экран. У меня например здесь 2 столбика идёт. Ячейки соответственно сделаны по аналогии с нашими стандартными. Для отображения в таком виде используется свойства float и списков вида

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

lubovr (26 Январь 2011 - 13:35) писал:

2)где можно изменить значения Сортировать по:???например не по цене: дорогие -дешевые, а по размеру62-68

Эти значения сортировки стандартные и не меняются, можно лишь настроить значение сортировки по умолчанию, через "Настройки" -> "Основные" -> "Поле сортировки товаров по умолчанию". Можно их изменять по визуальному оформлению, например как здесь, в виде ссылок. Для подбора размеров лучше использовать механизм фильтров, например как здесь:
http://neocube.store...catalog/Неокубы

lubovr (26 Январь 2011 - 13:35) писал:

Добрый день!
3)как закрасить фоном бока страницы?

Видимо проще всего прописать у тега

<body>

цвет, через редактор тем ("Сайт" -> "Редактор тем") получится примерно так:

<body style="background:#000000;">

Для подбора цвета можно использовать этот сервис:
http://www.colorpicker.com/

Наверх

#8 lubovr

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

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

Отправлено 27 Январь 2011 - 11:48

support (26 Январь 2011 - 17:53) писал:

Здравствуйте! На указанном сайте товары идут ячейками, заполняя экран. У меня например здесь 2 столбика идёт. Ячейки соответственно сделаны по аналогии с нашими стандартными. Для отображения в таком виде используется свойства float и списков вида

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Добрый день!Ксожалению у меня ничего не получилась.Помогите пожалуйста!!!!!! нужно что бы товары были в 2 столбика и при этом отображалось наименование, цена и кнопка подробнее.

Видимо проще всего прописать у тега

<body>

цвет, через редактор тем ("Сайт" -> "Редактор тем") получится примерно так:

<body style="background:#000000;">

Для подбора цвета можно использовать этот сервис:
http://www.colorpicker.com/

Стиль прописала, но замостилась вся страница, а нужно только бока.

Наверх

#9 support

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

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

ГородМосква

Отправлено 27 Январь 2011 - 14:42

Видимо требуется прописать для тела сайта фон, который будет закрашиваться, а бока останутся закрашенными предыдущим цветом. Это делается добавлением стиля в main.csstemplate через редактор тем ("Сайт" -> "Редактор тем"):

.content_page {
  background-color: #ffffff;
}

Наверх

#10 lubovr

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

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

Отправлено 27 Январь 2011 - 15:18

[quote name='support' timestamp='1296053639' post='1155']
Здравствуйте! На указанном сайте товары идут ячейками, заполняя экран. У меня например здесь 2 столбика идёт. Ячейки соответственно сделаны по аналогии с нашими стандартными. Для отображения в таком виде используется свойства float и списков вида

Добрый день!Ксожалению у меня ничего не получилась.Помогите пожалуйста!!!!!! нужно что бы товары были в 2 столбика и при этом отображалось наименование, цена и кнопка подробнее

Наверх

#11 support

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

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

ГородМосква

Отправлено 27 Январь 2011 - 17:33

Для шаблона сияние достаточно использовать вот этот код на странице списка товаров:
http://forum.storela...ndpost__p__1154

В случае отображения 2х товаров вместо 3х, достаточно будет изменить стили вместо предложенных в примере:

/* Список товаров в виде таблицы. Ячейки с товаром */
.goodsListItem					  {text-align:center;vertical-align:top;width:195px;overflow:hidden;padding:0px;}   /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/
.goodsListItemBlock				 {height:300px;width:210px;margin:5px;overflow:hidden;}
.goodsListItemBlock a			   {}
.goodsListItemImage				 {height:185px;width:100%;margin-top:1em;border-collapse: collapse;border-spacing: 0;}
.goodsListItemImage td			  {text-align:center;vertical-align:middle;}
.goodsListItemName				  {line-height:1.2em;padding:0px 2px 0px 2px;margin:0px;max-height:3.6em;overflow:hidden;}
.goodsListItemName a				{font-size:15px;line-height:1.2em;padding:0px;margin:0px;}

Следующие:

/* Список товаров в виде таблицы. Ячейки с товаром */
.goodsListItem					  {text-align:center;vertical-align:top;width:195px;overflow:hidden;padding:0px;}   /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/
.goodsListItemBlock				 {height:330px;width:330px;margin:5px;overflow:hidden;}
.goodsListItemBlock a			   {}
.goodsListItemImage				 {height:185px;width:100%;margin-top:1em;border-collapse: collapse;border-spacing: 0;}
.goodsListItemImage td			  {text-align:center;vertical-align:middle;}
.goodsListItemName				  {line-height:1.2em;padding:0px 2px 0px 2px;margin:0px;max-height:3.6em;overflow:hidden;}
.goodsListItemName a				{font-size:15px;line-height:1.2em;padding:0px;margin:0px;}

И вместо строчки:

{goods.index | is_divided("3","</tr><tr>","")}

вставить

{goods.index | is_divided("2","</tr><tr>","")}

Для отображения описания в режиме таблицы, достаточно добавить его, например так:
Было:

Стало:

<div>
  {goods.DESCRIPTION_SHORT}
</div>

Результирующий код шаблона "Товары", в котором:
1) В каталоге товаров отображается список корневый категорий
2) Есть переключатель с режима таблицы на режим отображения списком
3) В таблице отображается по 2 товара, есть короткое описание, расширены ячейки:

<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 Строка пути -->

  {% IF IS_FULL_CATALOG %}
	<!-- Блок навигации по категориям, вложенным в текущую категорию -->
	<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" width="130"{% 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 %}

	<!-- Короткое SEO описание категории -->
	{% IF CATEGORY_SEO_DESCRIPTION_SHORT %}
	  <div style="padding-bottom:1em;">{CATEGORY_SEO_DESCRIPTION_SHORT}</div>
	{% ENDIF %}
  
	<!-- Фильтры показываются только если есть товары в категории -->
	{% 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="alignCenter viewSelector">
			  <!-- Переключатель режима просмотра -->
			  {% IF GOODS_VIEW_TYPE=2 %}
				<strong title="Список товаров сейчас отображается в виде таблицы, по 2 товара на строку">Таблица</strong> 
				<a href="?goods_view_type=1" title="Отображать список товаров в виде списка">Список</a>
			  {% ELSE %}
				<a href="?goods_view_type=2" title="Отображать список товаров в виде таблицы с 2мя товарами на одну строку">Таблица</a> 
				<strong title="Список товаров сейчас отображается в виде списка, где один товар занимает одну строку">Список</strong>
			  {% 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" width="130"{% 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=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">
				<table class="goodsListItemImage">
				  <tr>
					<td>
					  <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>
					</td>
				  </tr>
				</table>
				
				<h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3>
				<div>
				  {goods.DESCRIPTION_SHORT}
				</div>
				<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("2","</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 -->
  
	<!-- Описание категории -->
	{% IF CATEGORY_DESCRIPTION %}
	  <div>
		{CATEGORY_DESCRIPTION}
	  </div>
	{% ENDIF %}
  
	<!-- Полное SEO описание категории -->
	{% IF CATEGORY_SEO_DESCRIPTION_LARGE %}
	  <div>
		{CATEGORY_SEO_DESCRIPTION_LARGE}
	  </div>
	{% ENDIF %}
  {% ENDIF %}
</div>

Стили в файле main.csstemplate, в самом конце:

/* Список товаров в виде таблицы. Ячейки с товаром */
.goodsListItem					  {text-align:center;vertical-align:top;width:195px;overflow:hidden;padding:0px;}   /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/
.goodsListItemBlock				 {height:300px;width:330px;margin:5px;overflow:hidden;}
.goodsListItemBlock a			   {}
.goodsListItemImage				 {height:185px;width:100%;margin-top:1em;border-collapse: collapse;border-spacing: 0;}
.goodsListItemImage td			  {text-align:center;vertical-align:middle;}
.goodsListItemName				  {line-height:1.2em;padding:0px 2px 0px 2px;margin:0px;max-height:3.6em;overflow:hidden;}
.goodsListItemName a				{font-size:15px;line-height:1.2em;padding:0px;margin:0px;}

Для отображения списка товаров в другом виде, где имеются отличительный свойства:
1) Товары отображаются в виде таблицы, нет переключателя на список товаров
2) В таблице отображается по 2 товара, есть короткое описание, расширены ячейки:
3) В каталоге товаров отображается список корневый категорий
используем следующий код шаблона:

<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 Строка пути -->

  {% IF IS_FULL_CATALOG %}
	<!-- Блок навигации по категориям, вложенным в текущую категорию -->
	<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" width="130"{% 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 %}

	<!-- Короткое SEO описание категории -->
	{% IF CATEGORY_SEO_DESCRIPTION_SHORT %}
	  <div style="padding-bottom:1em;">{CATEGORY_SEO_DESCRIPTION_SHORT}</div>
	{% ENDIF %}
  
	<!-- Фильтры показываются только если есть товары в категории -->
	{% 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" width="130"{% 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 %}
	  
		<!-- Список товаров. Таблица -->
		<table>
		  {% FOR goods %}
			<td class="goodsListItem">  
			  <div class="goodsListItemBlock withBorder cornerAll">
				<table class="goodsListItemImage">
				  <tr>
					<td>
					  <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>
					</td>
				  </tr>
				</table>
				
				<h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3>
				<div>
				  {goods.DESCRIPTION_SHORT}
				</div>
				<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("2","</tr><tr>","")}
		  {% ENDFOR goods %}
		</table>
	  <!-- /Список товаров. Таблица -->
  
	{% 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 -->
  
	<!-- Описание категории -->
	{% IF CATEGORY_DESCRIPTION %}
	  <div>
		{CATEGORY_DESCRIPTION}
	  </div>
	{% ENDIF %}
  
	<!-- Полное SEO описание категории -->
	{% IF CATEGORY_SEO_DESCRIPTION_LARGE %}
	  <div>
		{CATEGORY_SEO_DESCRIPTION_LARGE}
	  </div>
	{% ENDIF %}
  {% ENDIF %}
  
</div>

и следующий набор стилей:


/* Список товаров в виде таблицы. Ячейки с товаром */
.goodsListItem					  {text-align:center;vertical-align:top;width:195px;overflow:hidden;padding:0px;}   /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/
.goodsListItemBlock				 {height:300px;width:330px;margin:5px;overflow:hidden;}
.goodsListItemBlock a			   {}
.goodsListItemImage				 {height:185px;width:100%;margin-top:1em;border-collapse: collapse;border-spacing: 0;}
.goodsListItemImage td			  {text-align:center;vertical-align:middle;}
.goodsListItemName				  {line-height:1.2em;padding:0px 2px 0px 2px;margin:0px;max-height:3.6em;overflow:hidden;}
.goodsListItemName a				{font-size:15px;line-height:1.2em;padding:0px;margin:0px;}

Для изменения шаблона, чтобы список товаров отображался со свойствами:
1) В каталоге товаров отображаются только товары.
2) В списке товаров нет переключателя
3) В списке товаров товары идут в 2 ряда, в больших ячейках с описанием
используем следующий код:


<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 Строка пути -->

  <!-- Короткое SEO описание категории -->
  {% IF CATEGORY_SEO_DESCRIPTION_SHORT %}
	<div style="padding-bottom:1em;">{CATEGORY_SEO_DESCRIPTION_SHORT}</div>
  {% ENDIF %}

  <!-- Фильтры показываются только если есть товары в категории -->
  {% 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="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div>
			  <a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">{nested_categories_list.NAME}</a>
			</li>
		  {% ENDFOR %}
		</ul>
		<br clear="all"/>
		
	  <!-- Если в категории нет ни товаров, ни категорий то сообщим пользователю что ничего нет -->
	  {% ELSE %}
	   <h3>Нет товаров в категории</h3>
	  {% ENDIF %}

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

  {% ELSE %}
	
	  <!-- Список товаров. Таблица -->
	  <table>
		{% FOR goods %}
		  <td class="goodsListItem">  
			<div class="goodsListItemBlock withBorder cornerAll">
			  <table class="goodsListItemImage">
				<tr>
				  <td>
					<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>
				  </td>
				</tr>
			  </table>
			  
			  <h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3>
			  <div>
				{goods.DESCRIPTION_SHORT}
			  </div>
			  <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("2","</tr><tr>","")}
		{% ENDFOR goods %}
	  </table>
	<!-- /Список товаров. Таблица -->

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

  <!-- Описание категории -->
  {% IF CATEGORY_DESCRIPTION %}
	<div>
	  {CATEGORY_DESCRIPTION}
	</div>
  {% ENDIF %}

  <!-- Полное SEO описание категории -->
  {% IF CATEGORY_SEO_DESCRIPTION_LARGE %}
	<div>
	  {CATEGORY_SEO_DESCRIPTION_LARGE}
	</div>
  {% ENDIF %}
  
</div>

Наверх

#12 lubovr

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

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

Отправлено 28 Январь 2011 - 08:06

Добрый день!Огромное спасибо за помощь, но к сожалению опять не то. Нужно вот так!!!

.

Наверх

#13 support

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

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

ГородМосква

Отправлено 28 Январь 2011 - 13:04

lubovr (28 Январь 2011 - 08:06) писал:

Добрый день!Огромное спасибо за помощь, но к сожалению опять не то. Нужно вот так!!! Прикрепленный файл

category_1 копия.jpg.

В указанной картинке изменены пропорции, отображение в таком виде физически не позволяет отобразить и кнопку и изображение товара, они просто по сумме длин измерений не влезают, я не говорю про то что максимальный размер названия товара будет 12 символов на строку, что довольно большая редкость даже для магазинов в 100-200 товаров. Обычно название всегда больше, по крайней мере некоторые слова в названиях стабильно больше 12 символов. Поэтому требуется так же приходится уменьшать шрифт названия товара.

Мы пробовали уменьшить размеры изображений до 170 пикселей и описательной части до 180 т.к размер блока с товарами - 700 пикселей, если используется 2 ряда - то выходит на одну ячейку с товаром - 350 пикслей. Хорошего результата из этого эксперимента не вышло... По крайней мере я сделать подобное отображение товаров без потери качества выдачи не смогу. Можно к ячейкам товаров из вышеуказанных примеров, в предыдущем ответе, просто добавить кнопки "Подробнее" и "Купить" в принципе это делается не сложно, если надо могу написать пример такого кода, где добавлены:

<a class="readmore" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Добавить в корзину">В корзину</a><br />
<a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a>

Наверх

#14 lubovr

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

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

Отправлено 28 Январь 2011 - 13:58

support (28 Январь 2011 - 13:04) писал:

В указанной картинке изменены пропорции, отображение в таком виде физически не позволяет отобразить и кнопку и изображение товара, они просто по сумме длин измерений не влезают, я не говорю про то что максимальный размер названия товара будет 12 символов на строку, что довольно большая редкость даже для магазинов в 100-200 товаров. Обычно название всегда больше, по крайней мере некоторые слова в названиях стабильно больше 12 символов. Поэтому требуется так же приходится уменьшать шрифт названия товара.

Мы пробовали уменьшить размеры изображений до 170 пикселей и описательной части до 180 т.к размер блока с товарами - 700 пикселей, если используется 2 ряда - то выходит на одну ячейку с товаром - 350 пикслей. Хорошего результата из этого эксперимента не вышло... По крайней мере я сделать подобное отображение товаров без потери качества выдачи не смогу. Можно к ячейкам товаров из вышеуказанных примеров, в предыдущем ответе, просто добавить кнопки "Подробнее" и "Купить" в принципе это делается не сложно, если надо могу написать пример такого кода, где добавлены:

<a class="readmore" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Добавить в корзину">В корзину</a><br />
<a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a>

Если не затруднит напишите пожалуйста!!! СПАСИБО!!!

Наверх

#15 support

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

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

ГородМосква

Отправлено 29 Январь 2011 - 15:22

Добавил обновления в код...

Результирующий код шаблона "Товары", в котором:
1) В каталоге товаров отображается список корневый категорий
2) Есть переключатель с режима таблицы на режим отображения списком
3) В таблице отображается по 2 товара, есть короткое описание, расширены ячейки
4) В списке товаров в виде таблицы добавлены кнопки купить и подробнее

<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 Строка пути -->

  {% IF IS_FULL_CATALOG %}
	<!-- Блок навигации по категориям, вложенным в текущую категорию -->
	<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" width="130"{% 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 %}

	<!-- Короткое SEO описание категории -->
	{% IF CATEGORY_SEO_DESCRIPTION_SHORT %}
	  <div style="padding-bottom:1em;">{CATEGORY_SEO_DESCRIPTION_SHORT}</div>
	{% ENDIF %}
  
	<!-- Фильтры показываются только если есть товары в категории -->
	{% 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="alignCenter viewSelector">
			  <!-- Переключатель режима просмотра -->
			  {% IF GOODS_VIEW_TYPE=2 %}
				<strong title="Список товаров сейчас отображается в виде таблицы, по 2 товара на строку">Таблица</strong> 
				<a href="?goods_view_type=1" title="Отображать список товаров в виде списка">Список</a>
			  {% ELSE %}
				<a href="?goods_view_type=2" title="Отображать список товаров в виде таблицы с 2мя товарами на одну строку">Таблица</a> 
				<strong title="Список товаров сейчас отображается в виде списка, где один товар занимает одну строку">Список</strong>
			  {% 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" width="130"{% 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=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">
				<table class="goodsListItemImage">
				  <tr>
					<td>
					  <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>
					</td>
				  </tr>
				</table>
				
				<h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3>
				<div>
				  {goods.DESCRIPTION_SHORT}
				</div>
				
				<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>

				<table class="goodsListItemButtonsTable">
				  <tr>
					<td>
					  <a class="readmore" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Добавить в корзину">В корзину</a>
					</td>
					<td>
					  <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a>
					</td>
				  </tr>
				</table>
			  </div>
			</td>
		  {goods.index | is_divided("2","</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 -->
  
	<!-- Описание категории -->
	{% IF CATEGORY_DESCRIPTION %}
	  <div>
		{CATEGORY_DESCRIPTION}
	  </div>
	{% ENDIF %}
  
	<!-- Полное SEO описание категории -->
	{% IF CATEGORY_SEO_DESCRIPTION_LARGE %}
	  <div>
		{CATEGORY_SEO_DESCRIPTION_LARGE}
	  </div>
	{% ENDIF %}
  {% ENDIF %}
</div>

Стили в файле main.csstemplate, в самом конце:

/* Список товаров в виде таблицы. Ячейки с товаром */
.goodsListItem					  {text-align:center;vertical-align:top;width:195px;overflow:hidden;padding:0px;}   /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/
.goodsListItemBlock				 {position:relative;height:330px;width:330px;margin:5px;overflow:hidden;}
.goodsListItemBlock a			   {}
.goodsListItemImage				 {height:185px;width:100%;margin-top:1em;border-collapse: collapse;border-spacing: 0;}
.goodsListItemImage td			  {text-align:center;vertical-align:middle;}
.goodsListItemName				  {line-height:1.2em;padding:0px 2px 0px 2px;margin:0px;max-height:3.6em;overflow:hidden;}
.goodsListItemName a				{font-size:15px;line-height:1.2em;padding:0px;margin:0px;}
.goodsListItemButtonsTable		  {position:absolute;bottom:10px;left:5px;}
.goodsListItemButtonsTable td	   {padding:5px;}

Для отображения списка товаров в другом виде, где имеются отличительный свойства:
1) Товары отображаются в виде таблицы, нет переключателя на список товаров
2) В таблице отображается по 2 товара, есть короткое описание, расширены ячейки:
3) В каталоге товаров отображается список корневый категорий
4) В списке товаров в виде таблицы добавлены кнопки купить и подробнее
используем следующий код шаблона:

<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 Строка пути -->

  {% IF IS_FULL_CATALOG %}
	<!-- Блок навигации по категориям, вложенным в текущую категорию -->
	<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" width="130"{% 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 %}

	<!-- Короткое SEO описание категории -->
	{% IF CATEGORY_SEO_DESCRIPTION_SHORT %}
	  <div style="padding-bottom:1em;">{CATEGORY_SEO_DESCRIPTION_SHORT}</div>
	{% ENDIF %}
  
	<!-- Фильтры показываются только если есть товары в категории -->
	{% 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" width="130"{% 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 %}
	  
		<!-- Список товаров. Таблица -->
		<table>
		  {% FOR goods %}
			<td class="goodsListItem">  
			  <div class="goodsListItemBlock withBorder cornerAll">
				<table class="goodsListItemImage">
				  <tr>
					<td>
					  <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>
					</td>
				  </tr>
				</table>
				
				<h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3>
				<div>
				  {goods.DESCRIPTION_SHORT}
				</div>
				<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>
				<table class="goodsListItemButtonsTable">
				  <tr>
					<td>
					  <a class="readmore" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Добавить в корзину">В корзину</a>
					</td>
					<td>
					  <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a>
					</td>
				  </tr>
				</table>
			  </div>
			</td>
		  {goods.index | is_divided("2","</tr><tr>","")}
		  {% ENDFOR goods %}
		</table>
	  <!-- /Список товаров. Таблица -->
  
	{% 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 -->
  
	<!-- Описание категории -->
	{% IF CATEGORY_DESCRIPTION %}
	  <div>
		{CATEGORY_DESCRIPTION}
	  </div>
	{% ENDIF %}
  
	<!-- Полное SEO описание категории -->
	{% IF CATEGORY_SEO_DESCRIPTION_LARGE %}
	  <div>
		{CATEGORY_SEO_DESCRIPTION_LARGE}
	  </div>
	{% ENDIF %}
  {% ENDIF %}
  
</div>

и следующий набор стилей:


/* Список товаров в виде таблицы. Ячейки с товаром */
.goodsListItem					  {text-align:center;vertical-align:top;width:195px;overflow:hidden;padding:0px;}   /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/
.goodsListItemBlock				 {position:relative;height:330px;width:330px;margin:5px;overflow:hidden;}
.goodsListItemBlock a			   {}
.goodsListItemImage				 {height:185px;width:100%;margin-top:1em;border-collapse: collapse;border-spacing: 0;}
.goodsListItemImage td			  {text-align:center;vertical-align:middle;}
.goodsListItemName				  {line-height:1.2em;padding:0px 2px 0px 2px;margin:0px;max-height:3.6em;overflow:hidden;}
.goodsListItemName a				{font-size:15px;line-height:1.2em;padding:0px;margin:0px;}
.goodsListItemButtonsTable		  {position:absolute;bottom:10px;left:5px;}
.goodsListItemButtonsTable td	   {padding:5px;}

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


<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 Строка пути -->

  <!-- Короткое SEO описание категории -->
  {% IF CATEGORY_SEO_DESCRIPTION_SHORT %}
	<div style="padding-bottom:1em;">{CATEGORY_SEO_DESCRIPTION_SHORT}</div>
  {% ENDIF %}

  <!-- Фильтры показываются только если есть товары в категории -->
  {% 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="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div>
			  <a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">{nested_categories_list.NAME}</a>
			</li>
		  {% ENDFOR %}
		</ul>
		<br clear="all"/>
		
	  <!-- Если в категории нет ни товаров, ни категорий то сообщим пользователю что ничего нет -->
	  {% ELSE %}
	   <h3>Нет товаров в категории</h3>
	  {% ENDIF %}

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

  {% ELSE %}
	
	  <!-- Список товаров. Таблица -->
	  <table>
		{% FOR goods %}
		  <td class="goodsListItem">  
			<div class="goodsListItemBlock withBorder cornerAll">
			  <table class="goodsListItemImage">
				<tr>
				  <td>
					<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>
				  </td>
				</tr>
			  </table>
			  
			  <h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3>
			  <div>
				{goods.DESCRIPTION_SHORT}
			  </div>
			  <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>
			  <table class="goodsListItemButtonsTable">
				<tr>
				  <td>
					<a class="readmore" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Добавить в корзину">В корзину</a>
				  </td>
				  <td>
					<a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a>
				  </td>
				</tr>
			  </table>
			</div>
		  </td>
		{goods.index | is_divided("2","</tr><tr>","")}
		{% ENDFOR goods %}
	  </table>
	<!-- /Список товаров. Таблица -->

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

  <!-- Описание категории -->
  {% IF CATEGORY_DESCRIPTION %}
	<div>
	  {CATEGORY_DESCRIPTION}
	</div>
  {% ENDIF %}

  <!-- Полное SEO описание категории -->
  {% IF CATEGORY_SEO_DESCRIPTION_LARGE %}
	<div>
	  {CATEGORY_SEO_DESCRIPTION_LARGE}
	</div>
  {% ENDIF %}
  
</div>

и следующий набор стилей:


/* Список товаров в виде таблицы. Ячейки с товаром */
.goodsListItem					  {text-align:center;vertical-align:top;width:195px;overflow:hidden;padding:0px;}   /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/
.goodsListItemBlock				 {position:relative;height:330px;width:330px;margin:5px;overflow:hidden;}
.goodsListItemBlock a			   {}
.goodsListItemImage				 {height:185px;width:100%;margin-top:1em;border-collapse: collapse;border-spacing: 0;}
.goodsListItemImage td			  {text-align:center;vertical-align:middle;}
.goodsListItemName				  {line-height:1.2em;padding:0px 2px 0px 2px;margin:0px;max-height:3.6em;overflow:hidden;}
.goodsListItemName a				{font-size:15px;line-height:1.2em;padding:0px;margin:0px;}
.goodsListItemButtonsTable		  {position:absolute;bottom:10px;left:5px;}
.goodsListItemButtonsTable td	   {padding:5px;}

Наверх

#16 lubovr

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

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

Отправлено 30 Январь 2011 - 14:13

Спасибо огромное! все получилось!есть еще пару вопросиков:
1)Как изменить размер шрифта в стоимост товара?
2)Каксместить кнопку подробнее в ценрт?http://evrodetki.sto...ods_view_type=2

Наверх

#17 support

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

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

ГородМосква

Отправлено 30 Январь 2011 - 21:02

lubovr (30 Январь 2011 - 14:13) писал:

1)Как изменить размер шрифта в стоимост товара?

увеличив свойство font, в файле main.csstemplate. Например так:

.goodsListItemPriceNew a {font-size:1.5em;}

lubovr (30 Январь 2011 - 14:13) писал:

2)Как сместить кнопку подробнее в ценрт?http://evrodetki.sto...ods_view_type=2

Можно подвинуть её добавив свойство

margin: auto;

В коде main.csstemplate это выглядеть будет так:

.goodsListItemButtonsTable {margin: auto;}

Наверх

#18 alex21021

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

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

Отправлено 30 Март 2011 - 19:56

А Это Каталог Главная

Вот что получилось!!

Наверх

#19 LeNiN

Новичок

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

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

а возможно сделать на главной разместить товары, как и в каталоге по 2 в ряд, с кнопками в Купить и Подробнее?

Наверх

#20 support

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

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

ГородМосква

Отправлено 05 Апрель 2011 - 09:05

LeNiN (04 Апрель 2011 - 22:15) писал:

а возможно сделать на главной разместить товары, как и в каталоге по 2 в ряд, с кнопками в Купить и Подробнее?

Конечно же возможно, более того код будет идентичен, разница будет лишь в том что в списке товаров в каталоге используется один массив с товарами - goods, на главной их выдаётся 3:

index_page_new_goods
index_page_favorites_goods
index_page_goods

Соответственно:

Новинки
Хиты продаж
Товары на главной

Для использования кода из каталога, например, если нужно чтобы новинки шли по несколько в ряд, как и в каталоге товаров, то достаточно будет просто заменить переменную "goods" на "index_page_new_goods" в которой хранятся новинки. В случае с хитами продаж аналогично "goods" на "index_page_favorites_goods"