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


Кнопка фильтровать в каталоге товаров шаблона "Осень"

фильтр каталог товаров кнопка js css адаптивный дизайн

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

#1 Koderhan

Koderhan

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

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

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

На платформе StoreLand реализована такая функция как фильтры по товарам в категории. Фильтры могут быть по модификациям товара или по характеристикам товара, по умолчанию фильтры на сайте обычно не выводятся. Вывод фильтров можно добавить в настройках категории.
ScreenShot 872.png ScreenShot 873.png
И вот как это выглядит на витрине магазина.
ScreenShot 874.png
В шаблоне "Осень" при выборе определенного фильтра товара сразу идет запрос на список товаров которые соответствуют этому фильтру. На мобильных устройствах с медленным интернетом частые загрузки страницы могут утомлять покупателя.
Тут можно реализовать специальную кнопку для фильтров. Чтобы покупатель сначала выбрал нужные ему параметры а затем только, нажав на кнопку отправлял запрос на сервер.
Придется не много изменить коды файла "Товары" в разделе Сайт -> Редактор шаблонов.
ScreenShot 875.png
Код:
<!-- Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
	 {% 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 Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
Заменить:
<!-- Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
	 {% IF TARIFF_FEATURE_GOODS_FILTERS && SHOW_GOODS_FILTERS %}
		 <div class="filters">
		 <!-- Форма поиска отправляет всегда на ту же страницу, на которой находится пользователь -->
		 <form action="" method="get" id="filterFormId">
			 <!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
			 {% 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'));" 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'));" 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="filter-but filter">
				 <input type="submit" onClick="$('#filterFormId').submit();" title="Фильтровать товары в категории {CATEGORY_NAME}" class="exclusive" value="Фильтровать" />
			 </div>
			 <div class="clear"></div>
		 </form>
		 </div>
	 {% ENDIF %}
	 <!-- END Если в тарифном плане подключен модуль фильтров по товарам, и они есть для указанного списка товаров -->
ScreenShot 876.png
И добавить не большие стили в конец файла style.css.
Код:
.filter-but input {
	max-width: 115px;
	margin-top: 18px;
}
И вот что получилось после добавления кнопки "Фильтровать":
ScreenShot 877.png

#2 Джейн

Джейн

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

  • Пользователи
  • PipPipPipPip
  • 293 сообщений
  • ГородСамара

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

Извиняюсь за дублирование вопроса. Наверное он здесь будет более уместен. ДА и в разделе "другие вопросы " мой вопрос не заметили.

"Есть ли возможность отрегулировать фильтр выдачи так:

У одного товара 3 размера (модификации)

S - 1 шт
М -1 шт
L - 0 шт.

Хотелось бы чтоб в фильтре при выборке S и М - товар показывался, а в L - не показывался, т. к размера в наличии сейчас нет.

В данный момент высвечиваются все 3 размера, вне зависимости от наличия. Очень нужно, а то ищешь размер S, фильтр показывает , что он есть, а на самом деле он закончился.

Редактируемый магазин http://korset-optom.storeland.ru "

#3 Сake

Сake

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

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

Отправлено 09 Ноябрь 2013 - 05:24

К сожалению, на данный момент реализовать подобное не получиться.





Темы с аналогичным тегами фильтр, каталог товаров, кнопка, js, css, адаптивный дизайн

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

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