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


Шаблон "профи" Изменение Фильтра Товаров


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

#1 ViktorG

ViktorG

    Новичок

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

Отправлено 03 Март 2021 - 17:41

Добрый день. Можете помочь с изменением фильтра товаров.  Сейчас есть кнопка "Фильтр" и внизу выпадающий список характеристик товара. Как перенести сами характеристики товаров на место кнопки "Фильтр" (её полностью убрать) и сделать что-бы характеристики были не в выпадающем списке, а каждая характеристика в отдельной кнопке. Так пользователю будет удобнее. Все характеристики перед глазами и при нажатии на них  происходит фильтрация товаров. Заранее большое спасибо.

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

  • Снимок.jpg


#2 ViktorG

ViktorG

    Новичок

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

Отправлено 05 Март 2021 - 11:11

Добрый день. Помощи ждать не стоит ?

#3 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 06 Март 2021 - 02:52

Здравствуйте.

По данному вопросу вам ответили вчера в чате, не дублируйте их пожалуйста. Сейчас фильтр у вас перенесен, чтобы убрать отображение выпадающим списком зайдите в раздел Товары - Товары - найдите:
 <form action="" method="get" class="form__filters">
<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
{% FOR filter_attr_list %}
<div class="filter__item {% FOR values %}{% IF filter_attr_list.values.CHECKED %}checked {% ENDIF %}{% ENDFOR %}">
<div class="filter__name"><span>{filter_attr_list.NAME}</span></div>
<div class="selectBox">
<select class="select" name="{% FOR values %}{% IF filter_attr_list.values.CHECKED %}form[filter][attr][{filter_attr_list.ID}][{filter_attr_list.values.ID}]{% ENDIF %}{% ENDFOR %}">
{% 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}</option>
{% ENDFOR %}
</select>
</div>
</div>
{% ENDFOR %}
<!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
{% FOR filter_prop_list %}
<div class="filter__item {% FOR values %}{% IF filter_prop_list.values.CHECKED %}checked {% ENDIF %}{% ENDFOR %}">
<div class="filter__name"><span>{filter_prop_list.NAME}</span></div>
<div class="selectBox">
<select class="select" name="{% FOR values %}{% IF filter_prop_list.values.CHECKED %}form[filter][prop][{filter_prop_list.ID}][{filter_prop_list.values.ID}]{% ENDIF %}{% ENDFOR %}">
{% 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}</option>
{% ENDFOR %}
</select>
</div>
</div>
{% ENDFOR %}
<div class="filter__list filters__buttons">
<a href="{PAGE_CANONICAL}" class="goodsFilterClear button button3 small" title="Очистить фильры"><span>Очистить фильры</span></a>
</div>
</form>


замените на:
 <form action="" method="get" class="form__filters">
<!-- Фильтры по характеристикам товаров (Например: Производитель, разрешение экрана, заряд аккомулятора) -->
{% FOR filter_attr_list %}
<div class="filter__item {% FOR values %}{% IF filter_attr_list.values.CHECKED %}checked {% ENDIF %}{% ENDFOR %}">
<div class="filter__name"><span>{filter_attr_list.NAME}</span></div>
<div class="selectBox">
											 <ul>
											 {% FOR values %}
												 <li>
													 <input onchange="this.form.submit();" 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} <span class="red">({filter_attr_list.values.NB_GOODS_FILTERED})</span></label>
												 </li>
											 {% ENDFOR %}
											 </ul>

</div>
</div>
{% ENDFOR %}
<!-- Фильтры по свойствам товарных модификаций (Например: Цвет, размер, модификация) -->
{% FOR filter_prop_list %}
<div class="filter__item {% FOR values %}{% IF filter_prop_list.values.CHECKED %}checked {% ENDIF %}{% ENDFOR %}">
<div class="filter__name"><span>{filter_prop_list.NAME}</span></div>
<div class="selectBox">
											 <ul>
											 {% FOR values %}
												 <li>
													 <input onchange="this.form.submit();" type="checkbox" name="form[filter][attr][{filter_prop_list.ID}][{filter_prop_list.values.ID}]" value="1" id="filterAttrVal{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="filterAttrVal{filter_prop_list.values.ID}">{filter_prop_list.values.VALUE} <span class="red">({filter_prop_list.values.NB_GOODS_FILTERED})</span></label>
												 </li>
											 {% ENDFOR %}
											 </ul>

</div>
</div>
{% ENDFOR %}
<div class="filter__list filters__buttons">
<a href="{PAGE_CANONICAL}" class="goodsFilterClear button button3 small" title="Очистить фильры"><span>Очистить фильры</span></a>
</div>
</form>

далее зайдите в main.css - найдите:
/** Фильтры **/
#filters {position: relative;}
#filters.opened {display: block;background: #FFFFFF;overflow-x: auto;}
#filters .block__title {margin-bottom: 0;}
.form__filters {display: flex;align-items: flex-end;flex-wrap: wrap;}
.form__filters {display: flex;align-items: flex-end;flex-wrap: wrap;}
.filter__item label {
display: inline-block;
}
.filter__item input {
display: none;
}
.filter__item input:checked + label {
background: #eecaa2;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, .2);
}
.filter__item label {
display: inline-block;
padding: 8px 10px;
border: 1px solid #BBBBBB;
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
cursor: pointer;
margin: 10px 2px 0;
}
.filter__name {display: block;margin-bottom: 0.25rem;}
.filters-price {width: 100%;padding: 0 1rem 1rem 1rem;}
.filters__buttons {margin: 0.5rem 1rem;}
.filters__buttons .button {line-height: 50px;}
.filters__icon {margin-left: 2rem;height: 50px;padding: 0 2.5rem 0 1rem;background-color: #FFFFFF;border: 1px solid #dddddd;border-radius: 5px;font-size: 1rem;font-weight: 500;cursor: pointer;position: relative;display: flex;align-items: center;}
.filters__icon:after {content: '\e912';font-family: 'icomoon';position: absolute;right: 1rem;line-height: 1;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;pointer-events: none;box-sizing: border-box;}
.filters__icon:hover:after {color: #5ab030;}
.filters__icon.hasFilters {border-color: #5ab030;}
.filters__icon.hasFilters:after {color: #5ab030;}


замените на:
/** Фильтры **/
#filters {position: relative;}
#filters.opened {display: block;background: #FFFFFF;overflow-x: auto;}
#filters .block__title {margin-bottom: 0;}
.form__filters {display: flex;align-items: flex-end;flex-wrap: wrap;}
.form__filters {display: flex;align-items: flex-end;flex-wrap: wrap;}
.filter__item label {
display: inline-block;
}
.filter__item .selectBox {

}
.filter__item .selectBox:after {display: none;}
.filter__item .selectBox ul {list-style: none;padding: 0;}
.filter__item input {
width: 20px;height: 20px;
padding: 0;
display: inline-block;
vertical-align: middle;
}
.filter__item input:checked + label {
background: #eecaa2;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, .2);
}
.filter__item label {
display: inline-block;
padding: 8px 10px;
cursor: pointer;
margin: 10px 2px 0;
}
.filter__name {display: block;margin-bottom: 0.25rem;}
.filters-price {width: 100%;padding: 0 1rem 1rem 1rem;}
.filters__buttons {margin: 0.5rem 1rem;}
.filters__buttons .button {line-height: 50px;}
.filters__icon {margin-left: 2rem;height: 50px;padding: 0 2.5rem 0 1rem;background-color: #FFFFFF;border: 1px solid #dddddd;border-radius: 5px;font-size: 1rem;font-weight: 500;cursor: pointer;position: relative;display: flex;align-items: center;}
.filters__icon:after {content: '\e912';font-family: 'icomoon';position: absolute;right: 1rem;line-height: 1;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;pointer-events: none;box-sizing: border-box;}
.filters__icon:hover:after {color: #5ab030;}
.filters__icon.hasFilters {border-color: #5ab030;}
.filters__icon.hasFilters:after {color: #5ab030;}

Screenshot(5).png

#4 ViktorG

ViktorG

    Новичок

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

Отправлено 06 Март 2021 - 11:27

Добрый день. Спасибо большое. Подскажите пожалуйста, можно сделать что-бы Характеристики отображались в линию и выглядели как кнопки, как на скриншоте. Заранее спасибо.

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

  • Снимок.jpg


#5 ViktorG

ViktorG

    Новичок

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

Отправлено 06 Март 2021 - 14:28

Кнопки сделал. Единственное подскажите пожалуйста, как сделать что-бы они отображались в линию и убрать количество после названия фильтра. Также при нажатии кнопки фильтра выдает ошибку js скрипта. хотя сами фильтры работают.

#6 stasia

stasia

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

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

Отправлено 07 Март 2021 - 09:55

Просмотр сообщенияViktorG (06 Март 2021 - 14:28) писал:

Кнопки сделал. Единственное подскажите пожалуйста, как сделать что-бы они отображались в линию и убрать количество после названия фильтра. Также при нажатии кнопки фильтра выдает ошибку js скрипта. хотя сами фильтры работают.

Здравствуйте. Зайдите в Редактор шаблонов --- main.css и найдите данный код:
.filter__item .selectBox ul {list-style: none;padding: 0;}

И замените его на:
.filter__item .selectBox ul {display: flex;list-style: none;padding: 0;}


В Редакторе шаблонов---Товары, найдите код:
																						 <ul>
																						 {% FOR values %}
																								 <li>
																										 <input onchange="this.form.submit();" 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} <span class="red">({filter_attr_list.values.NB_GOODS_FILTERED})</span></label>
																								 </li>
																						 {% ENDFOR %}
																						 </ul>

Измените его на:
																						<ul>
																						 {% FOR values %}
																								 <li>
																										 <input onchange="this.form.submit();" 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} </label>
																								 </li>
																						 {% ENDFOR %}
																						 </ul>


#7 ViktorG

ViktorG

    Новичок

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

Отправлено 09 Март 2021 - 17:19

Спасибо за быстрый ответ. Всё сделал. Но при нажатии на фильтр выдаёт ошибку JS и сам фильтр не работает (

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

  • Снимок.jpg


#8 ViktorG

ViktorG

    Новичок

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

Отправлено 10 Март 2021 - 16:18

разобрался сам




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

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