Добрый день. Можете помочь с изменением фильтра товаров. Сейчас есть кнопка "Фильтр" и внизу выпадающий список характеристик товара. Как перенести сами характеристики товаров на место кнопки "Фильтр" (её полностью убрать) и сделать что-бы характеристики были не в выпадающем списке, а каждая характеристика в отдельной кнопке. Так пользователю будет удобнее. Все характеристики перед глазами и при нажатии на них происходит фильтрация товаров. Заранее большое спасибо.
1
Шаблон "профи" Изменение Фильтра Товаров
Автор ViktorG, 03 марта 2021 17:41
Сообщений в теме: 7
#1
Отправлено 03 Март 2021 - 17:41
#2
Отправлено 05 Март 2021 - 11:11
Добрый день. Помощи ждать не стоит ?
#3
Отправлено 06 Март 2021 - 02:52
Здравствуйте.
По данному вопросу вам ответили вчера в чате, не дублируйте их пожалуйста. Сейчас фильтр у вас перенесен, чтобы убрать отображение выпадающим списком зайдите в раздел Товары - Товары - найдите:
замените на:
далее зайдите в main.css - найдите:
замените на:
По данному вопросу вам ответили вчера в чате, не дублируйте их пожалуйста. Сейчас фильтр у вас перенесен, чтобы убрать отображение выпадающим списком зайдите в раздел Товары - Товары - найдите:
<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;}
#5
Отправлено 06 Март 2021 - 14:28
Кнопки сделал. Единственное подскажите пожалуйста, как сделать что-бы они отображались в линию и убрать количество после названия фильтра. Также при нажатии кнопки фильтра выдает ошибку js скрипта. хотя сами фильтры работают.
#6
Отправлено 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>
#8
Отправлено 10 Март 2021 - 16:18
разобрался сам
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных