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


Изменить Отображение Товаров В Каталоге


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

#1 Serg83

Serg83

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

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

Отправлено 07 Июнь 2013 - 18:34

Назрело несколько вопросов по каталогу.
прикладываю фото для иллюстраций


1) как зафиксировать (выделить определенную область) блок с ценой и названием? например, привязать цену к нижней границе блока с товаром. да и вообще хотелось бы поиграться с расположением картинки, названия товара и его цены.
Сейчас она "плавает" в засисимости от длины названия товара (1-2-3 строки названия товара).

1а) как я понимаю, если добавить кнопки "купить-подробнее" в каталог, как в шаблоне Техника, проблема будет решена, верно?

Снимок экрана 2013-06-07 в 18.06.04.png

2) как сделать картинку товара в каталоге максимально большой относительно блока с товаром? и как опустить картинку ниже?
Снимок экрана 2013-06-07 в 18.06.29.png

3) как переместить фильтры по товарам в каталоге из под левого меню наверх и разместить сразу под названием категории? точнее даже так - как задать нужные размеры для этого блока?
Снимок экрана 2013-06-07 в 19.32.45.png

#2 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

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

1а) Нет, это не решит проблему, так как кнопки будут так же зависеть от высоты названия товара. В данном случае стоит можно визуально ограничить названия товара, и задать фиксированный размер в 3 строки, тогда цены или кнопки будут отображаться ровно. Для этого необходимо в файле стилей main.css найти

.goodsListItemName {
	line-height: 1.2em;
	margin: 0;
	max-height: 70px;
	overflow: hidden;
	padding: 0 2px;
}

и заменить на

.goodsListItemName {
	line-height: 1.2em;
	margin: 0;
	overflow: hidden;
	padding: 0 2px;
	height: 70px;
	display: block;
	margin-bottom: 20px;
}

2) Чтобы опустить изображение - необходимо в файле стилей main.css найти

.stikyes {
	background: url("http://design.knife-for-life.ru/stikerbg5.png") no-repeat scroll center top transparent;
	float: right;
	height: 77px;
	margin: -15px 0 -77px;
	position: relative;
	top: 0;
	width: 103px;
	z-index: 33;
}

и заменить на

.stikyes {
	background: url("http://design.knife-for-life.ru/stikerbg5.png") no-repeat scroll center top transparent;
	float: right;
	height: 77px;
	margin: 0 0 -77px;
	position: relative;
	top: 0;
	width: 103px;
	z-index: 33;
}

далее найти

.stikno {
	background: url("http://design.knife-for-life.ru/stikerbg5.png") no-repeat scroll center bottom transparent;
	float: right;
	height: 77px;
	margin: -15px 0 -77px;
	position: relative;
	top: 0;
	width: 103px;
	z-index: 33;
}

и заменить на

.stikno {
	background: url("http://design.knife-for-life.ru/stikerbg5.png") no-repeat scroll center bottom transparent;
	float: right;
	height: 77px;
	margin: 0 0 -77px;
	position: relative;
	top: 0;
	width: 103px;
	z-index: 33;
}

Цитата

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

Не совсем понятен ваш вопрос, вы хотите увеличить изображение сообщающее наличие товара? Если да, то для этого необходимо изменить(увеличить) изображение "stikerbg5.png" которое находиться у вас в разделе редактора тем.

3) Немного не понятен ваш вопрос, вы знаете как переместить блок, но не знаете как изменить размер блока с фильтрами? или вы хотите чтобы фильтры отображались иначе например в строку по типу? Если да, то найдите в файле стилей

.contentTbodySearchFilterBlockValues {
	padding: 1em 0 1em 1em;
}

и замените на

.contentTbodySearchFilterBlockValues {
	padding: 1em 0 1em 1em;
	display: inline-block;
	vertical-align: middle;
	margin: 0 25px;
	text-align: left;
}


#3 a_podarkov

a_podarkov

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

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

Отправлено 10 Июнь 2013 - 10:59

У меня такой вопрос:
Можно ли сортировку товаров в каталоге сделать по увеличению размера товара? Размер мы указываем в Характеристиках.

#4 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 10 Июнь 2013 - 11:23

Просмотр сообщенияa_podarkov (10 Июнь 2013 - 10:59) писал:

У меня такой вопрос:
Можно ли сортировку товаров в каталоге сделать по увеличению размера товара? Размер мы указываем в Характеристиках.

Все доступные сортировки указаны в настройках-Основные.
По характеристикам можно добавить фильтры к категориям. Товары-Каталог на редактирование-внизу фильтры

#5 a_podarkov

a_podarkov

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

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

Отправлено 10 Июнь 2013 - 12:05

подскажите, пожалуйста, в каталоге последняя 21-ая картинка не высвечивается? http://ateljepodarko...land.ru/catalog Где-то задано, похоже, количество 20 на странице каталога, но не могу найти где.

#6 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 10 Июнь 2013 - 13:39

Просмотр сообщенияa_podarkov (10 Июнь 2013 - 12:05) писал:

подскажите, пожалуйста, в каталоге последняя 21-ая картинка не высвечивается? http://ateljepodarko...land.ru/catalog Где-то задано, похоже, количество 20 на странице каталога, но не могу найти где.

Внизу Каталога есть ссылки на страницы. Нажмите на 2.http://ateljepodarko...atalog/?&page=2

#7 a_podarkov

a_podarkov

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

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

Отправлено 10 Июнь 2013 - 16:47

Просмотр сообщенияmiyako (10 Июнь 2013 - 13:39) писал:

Внизу Каталога есть ссылки на страницы. Нажмите на 2.http://ateljepodarko...atalog/?&page=2
это понятно, что есть продолжение. Я то нажму, а остальные? Не зная, сколько должно быть позиций, я  бы подумала, что если картинки последней нет, то товары закончились. Почему последняя картинка не печатается, а переносится на следующую страницу. Вот в чем вопрос.

#8 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 10 Июнь 2013 - 18:13

Просмотр сообщенияa_podarkov (10 Июнь 2013 - 16:47) писал:

это понятно, что есть продолжение. Я то нажму, а остальные? Не зная, сколько должно быть позиций, я  бы подумала, что если картинки последней нет, то товары закончились. Почему последняя картинка не печатается, а переносится на следующую страницу. Вот в чем вопрос.

в разделе настройки -> основные -> выставите Шаг для выбора пользователем лимита выдачи товаров на страницу от 1 до 100

#9 a_podarkov

a_podarkov

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

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

Отправлено 10 Июнь 2013 - 18:42

Просмотр сообщенияsupport 2.0 (10 Июнь 2013 - 18:13) писал:

в разделе настройки -> основные -> выставите Шаг для выбора пользователем лимита выдачи товаров на страницу от 1 до 100
спасибо, изменила!

#10 Serg83

Serg83

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

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

Отправлено 11 Июнь 2013 - 11:09

Просмотр сообщенияСake (08 Июнь 2013 - 00:45) писал:


Не совсем понятен ваш вопрос, вы хотите увеличить изображение сообщающее наличие товара? Если да, то для этого необходимо изменить(увеличить) изображение "stikerbg5.png" которое находиться у вас в разделе редактора тем.

за ответ про смещение "стикеров наличия" спасибо! поправил ))

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

#11 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 11 Июнь 2013 - 12:03

Просмотр сообщенияSerg83 (11 Июнь 2013 - 11:09) писал:

за ответ про смещение "стикеров наличия" спасибо! поправил ))

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

Отредактировать размеры изображений вы можете в Основных Настройках

#12 Serg83

Serg83

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

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

Отправлено 11 Июнь 2013 - 15:41

Просмотр сообщенияmiyako (11 Июнь 2013 - 12:03) писал:

Отредактировать размеры изображений вы можете в Основных Настройках

а как опустить изображения?

#13 Serg83

Serg83

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

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

Отправлено 11 Июнь 2013 - 15:53

Просмотр сообщенияСake (08 Июнь 2013 - 00:45) писал:


3) Немного не понятен ваш вопрос, вы знаете как переместить блок, но не знаете как изменить размер блока с фильтрами? или вы хотите чтобы фильтры отображались иначе например в строку по типу? Если да, то найдите в файле стилей

.contentTbodySearchFilterBlockValues {
padding: 1em 0 1em 1em;
}

и замените на

.contentTbodySearchFilterBlockValues {
padding: 1em 0 1em 1em;
display: inline-block;
vertical-align: middle;
margin: 0 25px;
text-align: left;
}

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

#14 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 11 Июнь 2013 - 16:32

Просмотр сообщенияSerg83 (11 Июнь 2013 - 15:41) писал:

а как опустить изображения?

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

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

  • ScreenShot 297.png


#15 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 11 Июнь 2013 - 16:44

Просмотр сообщенияSerg83 (11 Июнь 2013 - 15:53) писал:

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

в шаблоне HTML найдите блок
<!-- Если в тарифном плане подключен модуль фильтров по товарам -->
			  {% IF TARIFF_FEATURE_GOODS_FILTERS %}
			   
				<!-- Фильтры по товарам. Появляются только на странице категории и поиска по товарам -->
				{% IF SHOW_GOODS_FILTERS %}
				  <br /><h4 class="contentTbodyCatalogHeader noBorder">Фильтры по товарам</h4>
	   
				  <!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
				  <form action="" method="get">
					<div class="contentTbodySearchFilterBlock cornerAll">
					  <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд батареи) -->
					  {% FOR filter_attr_list %}
						<em>{filter_attr_list.NAME}</em>
						<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"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} />
						  <label for="filterAttrVal{filter_attr_list.values.ID}">{filter_attr_list.values.VALUE} ({filter_attr_list.values.NB_GOODS_FILTERED})</label><br />
						{% ENDFOR %}
						</div>
					  {% ENDFOR %}
	   
					  <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
					  {% FOR filter_prop_list %}
						<em>{filter_prop_list.NAME}</em>
						<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"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} >
						  <label for="filterPropVal{filter_prop_list.values.ID}">{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</label><br />
						{% ENDFOR %}
						</div>
					  {% ENDFOR %}
					</div>
				  </form>
				{% ENDIF %}
			  {% ENDIF %}
		  <!-- END Если в тарифном плане подключен модуль фильтров по товарам -->

уберите его и теперь зайдите в шаблон Товары
и сразу после
<h1>{CATEGORY_NAME}</h1>
вставьте блок
<!-- Если в тарифном плане подключен модуль фильтров по товарам -->
												 {% IF TARIFF_FEATURE_GOODS_FILTERS %}
										  
												 <!-- Фильтры по товарам. Появляются только на странице категории и поиска по товарам -->
												 {% IF SHOW_GOODS_FILTERS %}
																 <br /><h4 class="contentTbodyCatalogHeader noBorder">Фильтры по товарам</h4>
		  
																 <!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
																 <form action="" method="get">
																 <div class="contentTbodySearchFilterBlock cornerAll">
																				 <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд батареи) -->
																				 <table>
																 <tr> {% FOR filter_attr_list %} <td class="goodsListItem">
																				 <div>
																				 <em>{filter_attr_list.NAME}</em>
																				 <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"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} />
																								 <label for="filterAttrVal{filter_attr_list.values.ID}">{filter_attr_list.values.VALUE} ({filter_attr_list.values.NB_GOODS_FILTERED})</label><br />
																				 {% ENDFOR %}
																				 </div> </div>
																				 </td>
																 {% IFNOT filter_attr_list.values.last %}{filter_attr_list.values.index | is_divided("3","</tr><tr>","")}{% ENDIF %}
																 {% ENDFOR filter_attr_list.values %}
																 </tr>
												 </table>
						  
		  
																				 <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
																				 <table>
																 <tr> {% FOR filter_prop_list %} <td class="goodsListItem">
																				 <div>
																				 <em>{filter_prop_list.NAME}</em>
																				 <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"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %} >
																								 <label for="filterPropVal{filter_prop_list.values.ID}">{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</label><br />
																				 {% ENDFOR %}
																				 </div> </div>
																				 </td>
																 {% IFNOT filter_prop_list.values.last %}{filter_prop_list.values.index | is_divided("3","</tr><tr>","")}{% ENDIF %}
																 {% ENDFOR filter_prop_list.values %}
																 </tr>
												 </table> </div>
																 </form>
												 {% ENDIF %}
												 {% ENDIF %}
								 <!-- END Если в тарифном плане подключен модуль фильтров по товарам -->

теперь зайдите в файл main.css и найдите строчку
.contentTbodySearchFilterBlockValues			{padding:1em 0 1em 1em;}
замените ее на
.contentTbodySearchFilterBlockValues	 {padding: 1em 2px 1em 1em; text-align: left; border-right: 1px solid #f0f1f4 ;border-left: 1px solid #f0f1f4; height: 50px;}


#16 Serg83

Serg83

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

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

Отправлено 13 Июнь 2013 - 20:07

Просмотр сообщенияsupport 2.0 (11 Июнь 2013 - 16:32) писал:

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

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

#17 Serg83

Serg83

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

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

Отправлено 13 Июнь 2013 - 21:03

Просмотр сообщенияsupport 2.0 (11 Июнь 2013 - 16:44) писал:

теперь зайдите в файл main.css и найдите строчку
.contentTbodySearchFilterBlockValues		 {padding:1em 0 1em 1em;}
замените ее на
.contentTbodySearchFilterBlockValues	 {padding: 1em 2px 1em 1em; text-align: left; border-right: 1px solid #f0f1f4 ;border-left: 1px solid #f0f1f4; height: 50px;}

спасибо.
фильтры перенести получилось.

но вот последний приведенный код не совсем верный.
фильтры остались горизонтальными.
использовал этот код

.contentTbodySearchFilterBlockValues {
padding: 1em 0 1em 1em;
display: inline-block;
vertical-align: middle;
margin: 0 15px;
text-align: left;
}


а подскажите как разместить название фильтра над его значениями?
как на картинке
Снимок экрана 2013-06-13 в 21.58.11.png

#18 Serg83

Serg83

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

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

Отправлено 13 Июнь 2013 - 21:09

немного не в тему вопрос, но все же.

как сделать подобное(картинка)? то бишь ссылка под кнопкой купить на отзывы товаров с их количеством, которые находятся в низу страницы каждого товара.
Снимок экрана 2013-06-13 в 22.09.58.png

#19 Serg83

Serg83

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

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

Отправлено 13 Июнь 2013 - 21:21

и еще вопросы по "Товару"

1) блок с "купить" и "вариантами доставки" прилипает к изображению товара... как его выровнять по правому краю с небольшим отступом?
Снимок экрана 2013-06-13 в 22.15.55.png

2) блок с описанием товара "прилипает" к кромке сайта. как его немного отобдинуть, чтобы была видна граница описания товара справа?
Снимок экрана 2013-06-13 в 22.16.07.png

3) Как отодвинуть текст описания товара от границы блока описания? сейчас они вполную к друг другу
Снимок экрана 2013-06-13 в 22.16.13.png

#20 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 14 Июнь 2013 - 01:10

Просмотр сообщенияSerg83 (13 Июнь 2013 - 20:07) писал:

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

Добавьте в ваш файл стилей main.css

.goodsListItemImage {
	display: table;
	margin: 0 auto;
}
.goodsListItemImage a {
	display: table-cell;
	vertical-align: middle;
}
.goodsListItemBlock a img {
	vertical-align: middle;
}

Цитата

а подскажите как разместить название фильтра над его значениями?

Найдите в вашем коде фильтра следующий код

<em>{filter_prop_list.NAME}</em>
<div class="contentTbodySearchFilterBlockValues">

и замените его на

<div class="contentTbodySearchFilterBlockValues">
<em>{filter_prop_list.NAME}</em><br />

Цитата

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

В шаблоне "Товар" найдите

<h3>Отзывы о

и замените на

<h3 id="review">Отзывы о

и далее в необходимом месте например после кнопки в корзину - вставьте ссылку вида

<a href="#review">Перейти к отзывам ({GOODS_OPINION_RATING_CNT_ALL})</a>

Цитата

1) блок с "купить" и "вариантами доставки" прилипает к изображению товара... как его выровнять по правому краю с небольшим отступом?
2) блок с описанием товара "прилипает" к кромке сайта. как его немного отобдинуть, чтобы была видна граница описания товара справа?
3) Как отодвинуть текст описания товара от границы блока описания? сейчас они вполную к друг другу

Добавьте в ваш файл стилей main.css

.goodsDataMainOrder td, .goodsDataMainOrder {
	padding: 5px;
	text-align: right;
	margin: 5px;
}





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

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