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


Фильтры И Сортировка В Одну Линию


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

#1 velena168

velena168

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

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

Отправлено 28 Октябрь 2013 - 01:14

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

И еще очень нужно для левого каталога стили для шрифтов прописать: цвет, размер. А, то хотела ссылки некоторые выделить, а весь каталог стал зеленым. Для категорий, подкатегорий и под-подкатегорий. Спасибо.

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

  • Снимок.PNG11.PNG


#2 miyako

miyako

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

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

Отправлено 28 Октябрь 2013 - 14:16

Просмотр сообщенияvelena168 (28 Октябрь 2013 - 01:14) писал:

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

И еще очень нужно для левого каталога стили для шрифтов прописать: цвет, размер. А, то хотела ссылки некоторые выделить, а весь каталог стал зеленым. Для категорий, подкатегорий и под-подкатегорий. Спасибо.

Найдите код в style.css -
.sortPagiBar {
padding-bottom: 20px;
height: 20px;
display: inline;
}
и замените на  -
.sortPagiBar {
padding-bottom: 20px;
height: 20px;
display: inline;
float: left;
}

Далее найдите в шаблоне Товары код -
<div class="category-products">
	<!-- Если нет товаров, либо у пользователя не сработало javascript ограничение на фильтре по товарам и так получилось что их не нашлось, отобразим блок изменяющий отображение данных выдачи товаров -->
	{% IF goods_empty=0 || goods_filters_empty=0 %}
	  <!-- Верхний блок, изменяющий отображение данных выдачи товаров -->
	  <div class="content_sortPagiBar">
		<div class="sortPagiBar group">
		  <form action="" class="form-inline OrderFilterForm">
			<!-- Список фильтров, которые сейчас действуют на результаты поиска -->
			{% FOR goods_filters %}
			  <input type="hidden" name="{goods_filters.NAME}" value="{goods_filters.VALUE}" />
			{% ENDFOR %}
			
			<!-- Блок возможности изменения лимитов выдачи -- >
			{% IF goods_show_per_page %}
			  <div class="nbrItemPage pagination">
				<p>
				  <label>Показывать по:</label>
				  <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>
				</p>
			  </div>
			{% ENDIF %}
			<!-- /Блок возможности изменения лимитов выдачи -->
			<div id="productsSortForm">
			  <!-- Поле выбора сортировки -->
			  {% IF goods_show_order_fields %}
				<label class="sort_by">Сортировать по:</label>
				<select name="goods_search_field_id" onchange="this.form.submit();">
				  {% FOR goods_order_fields %}{%IFNOT goods_order_fields.ID=5%}{%IFNOT goods_order_fields.ID=6%}{%IFNOT goods_order_fields.ID=3%}{%IFNOT goods_order_fields.ID=4%}{%IFNOT goods_order_fields.ID=9%}{%IFNOT goods_order_fields.ID=10%}{%IFNOT goods_order_fields.ID=11%}{%IFNOT goods_order_fields.ID=12%}{%IFNOT goods_order_fields.ID=13%}{%IFNOT goods_order_fields.ID=14%}
<option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>{goods_order_fields.NAME}</option>
{%ENDIF%}{%ENDIF%}{%ENDIF%}{%ENDIF%}{%ENDIF%}{%ENDIF%}{%ENDIF%}{%ENDIF%}{%ENDIF%}{%ENDIF%}{% ENDFOR %}
</select>
			  {% ENDIF %}
			</div>
			   
		  </form>
		</div>
		<!-- Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
		{% IF TARIFF_FEATURE_GOODS_FILTERS && SHOW_GOODS_FILTERS %}
		  <div class="filters">
			<!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
			<form action="" method="get">
			  <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
			  {% FOR filter_attr_list %}
				<div class="filter">
				  {filter_attr_list.NAME}:<br />
				  <select onchange="$(this).attr('name', $(this).find('option:selected').attr('value') == -1 ? '' : $(this).find('option:selected').attr('rel'));this.form.submit();" name="{% FOR values %}{% IF filter_attr_list.values.CHECKED %}form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]{% ENDIF %}{% ENDFOR %}">
					<option> - все - </option>
					{% FOR values %}
					  <option value="1" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}selected="selected"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE} ({filter_attr_list.values.NB_GOODS_FILTERED})</option>
					{% ENDFOR %}
				  </select>
				</div>
			  {% ENDFOR %}
 
			  <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
			  {% FOR filter_prop_list %}
				<div class="filter">
				  {filter_prop_list.NAME}:<br />
				  <select onchange="$(this).attr('name', $(this).find('option:selected').attr('value') == -1 ? '' : $(this).find('option:selected').attr('rel'));this.form.submit();" name="{% FOR values %}{% IF filter_prop_list.values.CHECKED %}form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]{% ENDIF %}{% ENDFOR %}">
					<option> - все - </option>
					{% FOR values %}
					  <option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</option>
					{% ENDFOR %}
				  </select>
				</div>
			  {% ENDFOR %}
			  <div class="clear"></div>
			</form>
		  </div>
		{% ENDIF %}
		<!-- END Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
	  </div>
	 
	  <!-- /Верхний блок, изменяющий отображение данных выдачи товаров -->
	{% ENDIF %}
	<!-- /Если нет товаров, либо у пользователя не сработало javascript ограничение на фильтре по товарам и так получилось что их не нашлось, отобразим блок изменяющий отображение данных выдачи товаров -->
   
и замените на -
<div class="category-products">
	<!-- Если нет товаров, либо у пользователя не сработало javascript ограничение на фильтре по товарам и так получилось что их не нашлось, отобразим блок изменяющий отображение данных выдачи товаров -->
	{% IF goods_empty=0 || goods_filters_empty=0 %}
	  <!-- Верхний блок, изменяющий отображение данных выдачи товаров -->
	  <div class="content_sortPagiBar">
	   
		<!-- Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
		{% IF TARIFF_FEATURE_GOODS_FILTERS && SHOW_GOODS_FILTERS %}
		  <div class="filters">
			<!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
			<form action="" method="get">
			  <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
			  {% FOR filter_attr_list %}
				<div class="filter">
				  {filter_attr_list.NAME}:<br />
				  <select onchange="$(this).attr('name', $(this).find('option:selected').attr('value') == -1 ? '' : $(this).find('option:selected').attr('rel'));this.form.submit();" name="{% FOR values %}{% IF filter_attr_list.values.CHECKED %}form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]{% ENDIF %}{% ENDFOR %}">
					<option> - все - </option>
					{% FOR values %}
					  <option value="1" rel="form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]" {% IF filter_attr_list.values.CHECKED %}selected="selected"{% ELSEIF filter_attr_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_attr_list.values.VALUE} ({filter_attr_list.values.NB_GOODS_FILTERED})</option>
					{% ENDFOR %}
				  </select>
				</div>
			  {% ENDFOR %}
 
			  <!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
			  {% FOR filter_prop_list %}
				<div class="filter">
				  {filter_prop_list.NAME}:<br />
				  <select onchange="$(this).attr('name', $(this).find('option:selected').attr('value') == -1 ? '' : $(this).find('option:selected').attr('rel'));this.form.submit();" name="{% FOR values %}{% IF filter_prop_list.values.CHECKED %}form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]{% ENDIF %}{% ENDFOR %}">
					<option> - все - </option>
					{% FOR values %}
					  <option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</option>
					{% ENDFOR %}
				  </select>
				</div>
			  {% ENDFOR %}
			  <div class="clear"></div>
			</form>
		  </div>
		{% ENDIF %}
		<!-- END Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
 
  <div class="sortPagiBar group">
		  <form action="" class="form-inline OrderFilterForm">
			<!-- Список фильтров, которые сейчас действуют на результаты поиска -->
			{% FOR goods_filters %}
			  <input type="hidden" name="{goods_filters.NAME}" value="{goods_filters.VALUE}" />
			{% ENDFOR %}
			
			<!-- Блок возможности изменения лимитов выдачи -- >
			{% IF goods_show_per_page %}
			  <div class="nbrItemPage pagination">
				<p>
				  <label>Показывать по:</label>
				  <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>
				</p>
			  </div>
			{% ENDIF %}
			<!-- /Блок возможности изменения лимитов выдачи -->
			<div id="productsSortForm">
			  <!-- Поле выбора сортировки -->
			  {% IF goods_show_order_fields %}
				<label class="sort_by">Сортировать по:</label> </br>
				<select name="goods_search_field_id" onchange="this.form.submit();">
				  {% FOR goods_order_fields %}{%IFNOT goods_order_fields.ID=5%}{%IFNOT goods_order_fields.ID=6%}{%IFNOT goods_order_fields.ID=3%}{%IFNOT goods_order_fields.ID=4%}{%IFNOT goods_order_fields.ID=9%}{%IFNOT goods_order_fields.ID=10%}{%IFNOT goods_order_fields.ID=11%}{%IFNOT goods_order_fields.ID=12%}{%IFNOT goods_order_fields.ID=13%}{%IFNOT goods_order_fields.ID=14%}
<option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>{goods_order_fields.NAME}</option>
{%ENDIF%}{%ENDIF%}{%ENDIF%}{%ENDIF%}{%ENDIF%}{%ENDIF%}{%ENDIF%}{%ENDIF%}{%ENDIF%}{%ENDIF%}{% ENDFOR %}
</select>
			  {% ENDIF %}
			</div>
			   
		  </form>
		</div>
 
 
	  </div>
	 
	  <!-- /Верхний блок, изменяющий отображение данных выдачи товаров -->
	{% ENDIF %}
	<!-- /Если нет товаров, либо у пользователя не сработало javascript ограничение на фильтре по товарам и так получилось что их не нашлось, отобразим блок изменяющий отображение данных выдачи товаров -->
   


#3 velena168

velena168

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

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

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

Просмотр сообщенияmiyako (28 Октябрь 2013 - 14:16) писал:

Что-то, все разъехалось. Вернула назад.

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

  • Снимок.PNG12.PNG


#4 Koderhan

Koderhan

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

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

Отправлено 28 Октябрь 2013 - 18:10

Просмотр сообщенияvelena168 (28 Октябрь 2013 - 14:50) писал:

Что-то, все разъехалось. Вернула назад.
Для изменения расположения блока с сортировкой.

Панель администратора, "Сайт"->"Редактор тем".
В файле "style.css".
Добавить в конец файла код:
.sortPagiBar.group {
width: auto;
display: block;
padding-bottom: 0;
height: auto;
max-width: 258px;
float: right;
}

.filters {
display: inline-table;
float: none;
}
И если хотите выделить активную категорию каталога:
Добавить в конец файла код:
.accordion li ul li.active {
background: #D2FDD2;
}


#5 velena168

velena168

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

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

Отправлено 28 Октябрь 2013 - 18:46

Просмотр сообщенияKoderhan (28 Октябрь 2013 - 18:10) писал:

Для изменения расположения блока с сортировкой.

Панель администратора, "Сайт"->"Редактор тем".
В файле "style.css".
Добавить в конец файла код:
.sortPagiBar.group {
width: auto;
display: block;
padding-bottom: 0;
height: auto;
max-width: 258px;
float: right;
}

.filters {
display: inline-table;
float: none;
}
И если хотите выделить активную категорию каталога:
Добавить в конец файла код:
.accordion li ul li.active {
background: #D2FDD2;
}
Получилось замечательно, НО только где есть фильтры, а где их нет не очень, криво и неактивна кнопка сортировки. Ну, в крайнем случае, добавлю везде фильтры.
Спасибо.

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

  • Снимок.PNG14.PNG
  • Снимок.PNG15.PNG


#6 Koderhan

Koderhan

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

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

Отправлено 29 Октябрь 2013 - 12:22

Просмотр сообщенияvelena168 (28 Октябрь 2013 - 18:46) писал:

Получилось замечательно, НО только где есть фильтры, а где их нет не очень, криво и неактивна кнопка сортировки. Ну, в крайнем случае, добавлю везде фильтры.
Спасибо.
Кнопку вы можете добавить воспользовавшись этой инструкцией http://forum.storela...ров-шаблона-34/

#7 velena168

velena168

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

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

Отправлено 20 Ноябрь 2013 - 22:28

Просмотр сообщенияvelena168 (28 Октябрь 2013 - 18:46) писал:

Получилось замечательно, НО только где есть фильтры, а где их нет не очень, криво и неактивна кнопка сортировки. Ну, в крайнем случае, добавлю везде фильтры.
Спасибо.
Оказалось, в Новинках, Хитах (там, естественно, нет фильтров), товары отображаются не так как нужно и кнопка сортировки не активна.
Подскажите, пожалуйста, как исправить?

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

  • Снимок.PNG


#8 Сake

Сake

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

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

Отправлено 21 Ноябрь 2013 - 00:20

Найдите в шаблоне "Товары" код

<!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
			  {% FOR filter_prop_list %}
				<div class="filter">
				  {filter_prop_list.NAME}:<br />
				  <select onchange="$(this).attr('name', $(this).find('option:selected').attr('value') == -1 ? '' : $(this).find('option:selected').attr('rel'));this.form.submit();" name="{% FOR values %}{% IF filter_prop_list.values.CHECKED %}form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]{% ENDIF %}{% ENDFOR %}">
					<option> - все - </option>
					{% FOR values %}
					  <option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</option>
					{% ENDFOR %}
				  </select>
				</div>
			  {% ENDFOR %}
			  <div class="clear"></div>
			</form>
		  </div>
		{% ENDIF %}
		<!-- END Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
	  </div>
	 
	  <!-- /Верхний блок, изменяющий отображение данных выдачи товаров -->
	{% ENDIF %}
	<!-- /Если нет товаров, либо у пользователя не сработало javascript ограничение на фильтре по товарам и так получилось что их не нашлось, отобразим блок изменяющий отображение данных выдачи товаров -->

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

<!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
			  {% FOR filter_prop_list %}
				<div class="filter">
				  {filter_prop_list.NAME}:<br />
				  <select onchange="$(this).attr('name', $(this).find('option:selected').attr('value') == -1 ? '' : $(this).find('option:selected').attr('rel'));this.form.submit();" name="{% FOR values %}{% IF filter_prop_list.values.CHECKED %}form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]{% ENDIF %}{% ENDFOR %}">
					<option> - все - </option>
					{% FOR values %}
					  <option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</option>
					{% ENDFOR %}
				  </select>
				</div>
			  {% ENDFOR %}
			  <div class="clear"></div>
			</form>
		  </div>
		{% ENDIF %}
		<!-- END Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
  <div class="clear"></div>
	  </div>
	 
	  <!-- /Верхний блок, изменяющий отображение данных выдачи товаров -->
	{% ENDIF %}
	<!-- /Если нет товаров, либо у пользователя не сработало javascript ограничение на фильтре по товарам и так получилось что их не нашлось, отобразим блок изменяющий отображение данных выдачи товаров -->


#9 velena168

velena168

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

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

Отправлено 21 Ноябрь 2013 - 00:26

Просмотр сообщенияСake (21 Ноябрь 2013 - 00:20) писал:

Найдите в шаблоне "Товары" код

<!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
			 {% FOR filter_prop_list %}
			 <div class="filter">
				 {filter_prop_list.NAME}:<br />
				 <select onchange="$(this).attr('name', $(this).find('option:selected').attr('value') == -1 ? '' : $(this).find('option:selected').attr('rel'));this.form.submit();" name="{% FOR values %}{% IF filter_prop_list.values.CHECKED %}form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]{% ENDIF %}{% ENDFOR %}">
				 <option> - все - </option>
				 {% FOR values %}
					 <option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</option>
				 {% ENDFOR %}
				 </select>
			 </div>
			 {% ENDFOR %}
			 <div class="clear"></div>
		 </form>
		 </div>
	 {% ENDIF %}
	 <!-- END Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
	 </div>
	
	 <!-- /Верхний блок, изменяющий отображение данных выдачи товаров -->
{% ENDIF %}
<!-- /Если нет товаров, либо у пользователя не сработало javascript ограничение на фильтре по товарам и так получилось что их не нашлось, отобразим блок изменяющий отображение данных выдачи товаров -->

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

<!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
			 {% FOR filter_prop_list %}
			 <div class="filter">
				 {filter_prop_list.NAME}:<br />
				 <select onchange="$(this).attr('name', $(this).find('option:selected').attr('value') == -1 ? '' : $(this).find('option:selected').attr('rel'));this.form.submit();" name="{% FOR values %}{% IF filter_prop_list.values.CHECKED %}form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]{% ENDIF %}{% ENDFOR %}">
				 <option> - все - </option>
				 {% FOR values %}
					 <option value="1" rel="form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" {% IF filter_prop_list.values.CHECKED %}selected="selected"{% ELSEIF filter_prop_list.values.NB_GOODS_FILTERED=0 %}disabled="disabled"{% ENDIF %}>{filter_prop_list.values.VALUE} ({filter_prop_list.values.NB_GOODS_FILTERED})</option>
				 {% ENDFOR %}
				 </select>
			 </div>
			 {% ENDFOR %}
			 <div class="clear"></div>
		 </form>
		 </div>
	 {% ENDIF %}
	 <!-- END Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
<div class="clear"></div>
	 </div>
	
	 <!-- /Верхний блок, изменяющий отображение данных выдачи товаров -->
{% ENDIF %}
<!-- /Если нет товаров, либо у пользователя не сработало javascript ограничение на фильтре по товарам и так получилось что их не нашлось, отобразим блок изменяющий отображение данных выдачи товаров -->
Спасибо!!! Все теперь отлично!




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

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