Skip to content

Commit 24a051a

Browse files
Dmi3yyDmi3yy
authored
Merge pull request #52 from dzhuryn/master
add eFitlerDocs
2 parents 1ecb7f5 + b75e39e commit 24a051a

7 files changed

Lines changed: 361 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
.idea/
3+
.idea/vcs.xml

‎ru/03_Компоненты/eFilter/01_Сниппет_eFilter.md‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
## Параметри
2+
3+
### js
4+
Подключение js скриптов фильтра. Значения 0/1. По умолчанию 1.
5+
### css
6+
Подключение css стилей фильтра. Значения 0/1. По умолчанию 1.
7+
### sliderCssJs
8+
Подключение js скриптов и css стилей слайдер (цена). Значения 0/1. По умолчанию 1.
9+
### ajax
10+
Использовать фильтрацию без перезагрузки страницы. Значения 0/1. По умолчанию 0;
11+
### autoSubmit
12+
Автосабмит формы при изменении ее параметров
13+
14+
### filters
15+
Параметр для фильтация отбора товаров. Формат DoCLister/
16+
17+
# tv_config
18+
JSON масив из конфигурацией формы фильтрации. По умолчанию поле tovarparams ресурса текущего или его родителей.
19+
20+
21+
## Плейсхолдеры
22+
23+
### eFilter_ids
24+
список документов для вывода (подставляем в DocLister, это происходит автоматом в сниппете getFilteredItems)
25+
### eFilter_form
26+
форма вывода фильтра - вставить плейсхолдер в нужное место шаблона
27+
### eFilter_form_delete
28+
форма удаленые установленных фильтров
29+
### docid
30+
Ид Категории для получения товаров. По умолчанию id текущего документа.
31+
### cfg
32+
Название файла с конфигурацие html шаблона елементов формы фильтрации. По умолчанию default.
33+
Имя файла должно быть в формате config.название_конфигурации.php.
34+
35+
### delete_cfg
36+
Название файла с конфигурацие html шаблона елементов формы для удаление выбраних параметров фильтрации. По умолчанию default.
37+
Имя файла должно быть в формате config.delete.название_конфигурации.php
38+
39+
### remove_disabled
40+
Скрывать неактивные варианты параметров из формы. Значения 1/0. По умолчанию 0.
41+
42+
### nosort_tv_id
43+
Список тв параметров варианты которых не нужно сортировать.
44+
45+
46+
## Конфигурация шаблона формы
47+
Шаблоны хранятся в файле с расширением php в переменнын.
48+
Основние плейсхолдеры:
49+
### Для обертки формы:
50+
* [+url+] - удрес страницы
51+
* [+wrapper+] - елементы формы.
52+
Для работы ajax у формы должен быть id eFiltr
53+
54+
55+
### Для обертки параметра:
56+
* [+tv_id+] id тв параметра
57+
* [+name+] Название тв параметра
58+
* [+wrapper+] список вариантов.
59+
60+
### Для елементов формы (не диапазон или слайдер):
61+
* [+tv_id+] - id тв параметра.
62+
* [+name+] если используем checkbox, radio или dropDown List Menu вернет текстовое значение варианта параметра.
63+
* [+value+] - значение параметра
64+
* [+selected+] - если выбран вариант параметра вернет checked или selected.
65+
* [+disabled+] - если выбрать нельзя вернет disabled
66+
* [+count+] - доступное количество товаров из вариантом параметра.
67+
68+
### Для елементов формы диапазон или слайдер:
69+
* [+tv_id+] - id тв параметра.
70+
* [+name+] если используем checkbox, radio или dropDown List Menu вернет текстовое значение варианта параметра.
71+
* [+value+] - значение параметра
72+
* [+selected+] - если выбран вариант параметра вернет checked или selected.
73+
* [+disabled+] - если выбрать нельзя вернет disabled
74+
* [+count+] - доступное количество товаров из вариантом параметра.
75+
* [+minval+] - Минимальное значение выбраное пользователем
76+
* [+maxval+] - Максимальное значение выбраное пользователем
77+
* [+minvalcurr+] - Минимальное значение
78+
* [+maxvalcurr+] - Максимальное значение
79+
80+
Если нужно для определьонного тв параметра указать свой шаблон необходимо создать переменную в фомате
81+
ТипШабнона_ИмяПеременной.
82+
Пример тв параметр frameSize, обертка tplRowCheckbox_frameSize и ссылка tplOuterCheckbox_frameSize.
83+
84+
85+
86+
## Конфигурация шаблона формы сброса фильтров
87+
### tplDeleteFilterForm
88+
Обертка формы.
89+
Плейсхолдеры:
90+
* [+wrapper+]
91+
### tplSliderOwner
92+
Обертка блока для сброса вариантов фильтрации для диапазона или слайдера.
93+
Плейсхолдеры:
94+
* [+wrapper+]
95+
* [+delete_group+] - ссылка для сброса всех вариантов фильрации тв параметра
96+
* [+name+] - имя тв параметра
97+
### tplSliderInner
98+
Шаблон вывода ссылки для удаление фильтра диапазона или слайдера
99+
* [+link+] - ссылка для сброса варианта фильтрации
100+
* [+min+] - минимальное значение
101+
* [+max+] - максимальное значение
102+
103+
### plDeleteFilterOwner
104+
обертка для других блоков.
105+
Плейсхолдеры:
106+
* [+wrapper+]
107+
* [+delete_group+] - ссылка для сброса всех вариантов фильрации тв параметра
108+
* [+name+] - имя тв параметра
109+
110+
### tplDeleteFilterInner
111+
вывод ссылки для сброса варианта фильтра
112+
* [+link+] - ссылка для сброса варианта фильтрации
113+
* [+name+] - значение варианта
114+
115+
116+
Если нужно для определьонного тв параметра указать свой шаблон необходимо создать переменную в фомате
117+
ТипШабнона_ИмяПеременной.
118+
Пример тв параметр frameSize, обертка tplDeleteFilterOwner_frameSize и ссылка tplDeleteFilterInner_frameSize.
119+
120+
121+
Для работы ajax при сбросе фильтров необходимо:
122+
* Для общей обертки формы сброса задать клас .fltr_delete_wrap
123+
* Для всех ссылок сброса задать клас .fltr_delete_item_link

‎ru/03_Компоненты/eFilter/02_Сниппет_eFilterResult.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
## eFilterResult
2+
Снипеет является оберткой Doclister. Если нет выбраных тв параметров ведет себя как обычный doclister
3+
и получает товары в режыме idType = parents, если форма фильтрации не пустая то в режыме documents получая плейсхолдер
4+
из списокм ids от eFilter
5+
6+
## Параметры
7+
### lang
8+
Язык необходимо для склонения. по умолчанию ru.
9+
10+
### pid
11+
аналог parents
12+
13+
Для работы ajax необходима следующая структура обертки
14+
````
15+
<div id="eFiltr_results_wrapper">
16+
<div class="eFiltr_loader"></div>
17+
<div id="eFiltr_results">[+dl.wrap+][+pages+]</div>
18+
</div>
19+
````
20+
21+
Если для eFilter задан параметр ajax = 1 то стандартная пагинация переопределяеться
22+
TplNextP ``<a data-prefix="" data-page="[+num+]">&gt;</a>``
23+
TplPrevP ``<a data-prefix="" data-page="[+num+]">&lt;</a>``
24+
TplPage ``<a data-prefix="" data-page="[+num+]" class="page">[+num+]</a>``
25+
26+
Можна задать свои шаблоны главное вместо href использовать data-page="[+num+]"
27+
и если задан параметр id для eFilterResult в data-prefix необходимо записать id + '_'
28+
29+
Обертка пагинации должна иметь клас .pagination
30+
31+
### Склонение слова Товар к количеству
32+
[+параметр_id.pluarl+] Склонение слова Товар к количеству
33+
Для переопределения склоняемого слова необходимо прописать параметры.
34+
phrase1 Товар
35+
phrase2 Товара
36+
phrase3 Товаров
37+
38+
39+
### Подгрузка товаров через ajax
40+
Пример html шаблона для блока показать ищо
41+
```
42+
[!if? &is=`[+параметр_id.isstop+]:!=:1` &then=`
43+
<div class="amount eFilter_more_wrap">
44+
<a data-page="[+параметр_id.pages_next+]" data-prefix="[+параметр_id.isstop+]_" class="eFilter_more">Показать ещё </a>
45+
</div>
46+
`]]
47+
```
48+
eFilter_more_wrap Клас для обертки
49+
eFilter_more Клас для ссылки
50+
Если id для eFilter не задан data-prefix пустой
51+
При использование Показать еще в блоке из класом eFiltr_results должны быть только товары
52+
53+
### Количество товаров и склонение
54+
Для замены количество товаров на странице и склоняемого слова товар нужно задать класы
55+
56+
filter_display количество товаров
57+
filter_plural склоняемое слово
58+
```[+параметр_id.pages_next+]``` номер следующей страницы
59+

‎ru/03_Компоненты/eFilter/03_js_api.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
## calback
2+
3+
### afterFilterSend(msg)
4+
5+
### afterFilterComplete(_form)
6+
7+
beforeFilterSend(_form)
8+
9+
10+
## Внимание
11+
Для работы ajax форма и блок товаров не должны быть в самом корне документа тоесть body.

‎ru/03_Компоненты/eFilter/04_Сниппет_evoSortBlock.md‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
Сниппет для вывода блока с настройков сортировки и выбора количества товаров на странице.
2+
3+
## evoSortBlock
4+
Сниппет для формирования блока сортировки. Из приятных вещей.
5+
6+
7+
8+
## Параметры
9+
1. displayConfig настройка селекта или ссылок для указания количества товаров на странице.
10+
Пример: 20||30||40||все==all.
11+
2. sortConfig настройка ссылок для указания поля по которому товары сортируються.
12+
Пример: По название==pagetitle||По индексу==menuindex||Цена от маленькой==price:asc||Цена от большой==price:desc
13+
3. ajax - использовать ли ajax по умолчанию ноль.
14+
4. changeSortByClickField - изменять направление сортировки при повторном клике по параметру сортировки. 1/0. По умолчанию 0.
15+
Параметр необходим если у нас нет блока для выбора направление, а надо изменять направление при клике второй раз по параметру поля.
16+
17+
### Шаблоны
18+
#### Обертка
19+
1. ownerTpl - Основная обертка блока.
20+
Плейсхолдеры ```[+class+] [+display.block+] [+sort.block+] [+sort.direction+]```.
21+
Пример: ```<div class="[+class+]">[+display.block+][+sort.block+]</div>```
22+
23+
* class Плейсхолдер из класами для обертки которые необходимы для работы js, а именно sort-wrap и ajax
24+
* display.block блок выбора количества товаров
25+
* sort.block Блок выбора поля для сортировки
26+
* sort.direction Блок выбора направления сортировки
27+
#### Выбор количества товаров
28+
1. displayOwnerTpl - обертка блока для выбора количества елементов на странице.
29+
Плейсхолдеры: ```[+class+]">[+wrapper+]```
30+
Пример: ```<select class="[+class+]">[+wrapper+]</select>```
31+
Пример: ```<div class="[+class+]">[+wrapper+]</div>```
32+
33+
2. displayRowTpl - Шаблон вывода строки. ( option для селекта или тег a для блока).
34+
Плейсхолдеры: ```[+value+],[+selected+],[+data+],[+class+],[+caption+] ```
35+
Пример: ``` <option value="[+value+]" [+selected+] >[+caption+]</option>```
36+
Пример: ``` <a [+data+] class="[+class+]">[+caption+]</a> ```
37+
#### Выбор поля для сортировки
38+
1. sortOwnerTpl - обертка блока для выбора поля по которому елементы сортируються на странице.
39+
Плейсхолдеры: ```[+wrapper+]```
40+
Пример: ```<ul>[+wrapper+]</ul>```
41+
42+
2. sortRowTpl - Шаблон вывода ссылки для выбора поля.
43+
Плейсхолдеры: ```[+class+],[+data+] [+caption+]```
44+
Пример: ```<a class="[+class+]" [+data+]>[+caption+]</a>```
45+
46+
#### Выбор направления сортировки
47+
1. sortDirectionTpl - обертка блока выбора направления.
48+
Плейсхолдеры: ```[+up+][+down+]```
49+
up - сортировка asc
50+
down - сортировка desc
51+
2. sortDirectionUpTpl - шаблон ссылки для выбора направления сортировки asc
52+
Плейсхолдеры: ```[+class+][+data+]```
53+
class - css клас
54+
data - Дата атрибут data-value в котором хранится текущее поле а направление сортировки asc. Пример price:asc
55+
3. sortDirectionDescTpl - шаблон ссылки для выбора направления сортировки desc
56+
Плейсхолдеры: ```[+class+][+data+]```
57+
class - css клас
58+
data - Дата атрибут data-value в котором хранится текущее поле а направление сортировки asc. Пример price:desc
59+
60+
61+
##### Классы
62+
1. displayActiveClass - Клас для активного пунка в выборе количеста елементов на странице. По умолчанию active.
63+
2. sortActiveClass - Клас для активного пунка в выборе поля для сортировки елементов на странице.
64+
3. sortUpClass - Класс для ссылки выбора поля когда сортировка от маленького к большому. По умолчанию up
65+
4. sortDownClass - Класс для ссылки выбора поля когда сортировка от большого к маленькому. По умолчанию down
66+
5. sortFieldClass - Класс для ссылок выбора поля и направления сортировки. По умолчанию set-sort-field.
67+
6. sortDirectionActiveClass - Клас для активной ссылки выбраного направления сортировки. По умолчанию active.
68+
69+
70+
##### Значения по умолчаеию
71+
1. displayDefault - количество елементов на странице по умолчанию
72+
2. sortFieldDefault - поле сортировки по умолчанию
73+
3. sortOrderDefault - направление сортировки по умолчанию
74+
75+
76+
## Устанавливаемые плейсхолдеры для работы без eFilterResult
77+
* sort_display - количество товаров
78+
* sort_field - поле для сортировки
79+
* sort_order - направление сортировки
80+
Также если использовать снипет без eFilter необходимо подключить js файл eFilter.js вручную.
81+
А товары обернуть в обертку eFilterResult
82+
```
83+
<div id="eFiltr_results_wrapper">
84+
<div class="eFiltr_loader"></div>
85+
<div id="eFiltr_results">
86+
</div>
87+
</div>
88+
```
89+
90+
91+
## Логика работы js.
92+
### Для выбора количества товаров.
93+
Обрабатывается клик по елементу из класом set-display-field.
94+
Если это тег a ( ссылка ) и событие click то информация про количество берется из дата атрибута.
95+
Если это событие change информация берется из атрибута value елмента option.
96+
Дале ajax запрос из параметром sortDisplay и значением.
97+
Если ajax отклчен то обновление страницы.
98+
99+
### Для выбора поля и направления сортировки.
100+
Обрабатывается клик по елементу из класом set-sort-field.
101+
Если это тег a ( ссылка ) и событие click то информация про поле и направление берется из дата атрибута.
102+
Если это событие change информация берется из атрибута value елмента option.
103+
Дале ajax запрос из параметром sortBy и значением.
104+
Если ajax отклчен то обновление страницы.
105+
106+
107+
108+
109+
##### Пример
110+
[!evoSortBlock?
111+
&ownerTpl=`<div class="sorting-block__filters [+class+]"><form action="#">[+display.block+][+sort.block+]</form></div>`
112+
&displayOwnerTpl=`<div class="sorting-block__filters-amount"><span class="sorting-block__filters-label">Показывать:</span><div class="sorting-block__select"><div class="inline-select"><select class="decor-select js-select[+class+]">[+wrapper+]</select></div></div></div>`
113+
&sortOwnerTpl=`<div class="sorting-block__filters-type"><span class="sorting-block__filters-label sorting-block__filters-label--type">Сортировать:</span><div class="sorting-block__filters-block"><span class="sorting-block__filters-mobile-active"><span class="sorting-block__filters-mobile-active-inner">По популярности</span></span><ul class="sorting-block__filters-list">[+wrapper+]</ul></div></div>`
114+
&sortRowTpl=`<li class="sorting-block__filters-item"><a href="#" [+data+] [+selected+] class="sorting-block__filters-link [+class+]">[+caption+]</a></li>`
115+
&sortActiveClass=`is-active`
116+
&sortConfig=`Название==pagetitle||Дата поступления==menuindex||Цена==price`
117+
&ajax=`1`
118+
!]
119+
120+

0 commit comments

Comments
 (0)