Приклади

ListChild: Приклади

Приклади сніпетa для формування динамічного списку дочірніх документів.

Динамічний список дочірніх документів

Приклад використання в backend (адміністративної панелі)

сніпет сформує список у вигляді: параметр1==значення1||параметр2==значення2

Створіть TV-параметр з типом введення DropDown List Menu.

В можливих значеннях вкажіть:

@EVAL return $modx->runSnippet('ListChild', array('docid' => 10, 'where' => 'isfolder = 1 and hidemenu = 0'));

Відобразить всі опубліковані і невидалені дочірні контейнери папки 10, які відзначені для показу в меню.

Або так:

@EVAL return $modx->runSnippet('ListChild', array('docid' => '10,11,12', 'depth' => 2));

Відобразити всі опубліковані і невидалені дочірні документи, в тому числі і контейнери, папок 10, 11 і 12 до другого рівня вкладеності.

Випадаючий список (frontend)

Пример использования во frontend (частини користувача)

сніпет сформує список у вигляді: <option value="значення">параметр</option>

Додайте в шаблоні наступний код:

<form action="04_extras/listchild/03_primery1.html">
    <select class="form-control">
        
    </select>
</form>

Відобразить у вигляді списку всі опубліковані і невидалені дочірні документи папки 4, до другого рівня вкладеності, які не є контейнерами.

Зверніть увагу, що в даному прикладі після вибору зі списку будь-якого пункту, форма перевантажується і вибране значення скидається.

Приклад використання у frontend із запам'ятовуванням обраних значень

Тегу select додайте атрибут name. Значення атрибута вкажіть у відповідному параметрі сніпета.

Важливо! Не використовуйте для різних списків однакові значення атрибута name.

<form action="04_extras/listchild/03_primery1.html">
    <select onchange="this.form.submit();" name="dropdown"  class="form-control">
        
    </select>
</form>

Тепер після вибору зі списку будь-якого пункту, форма перевантажується але вибране значення зберігається.

Подія onchange="this.form.submit();" автоматично відправляє дані форми після кожної зміни елемента форми.

Перемикачі radio (frontend)

Приклад c використанням шаблону у frontend

1. Завдання - вивести у вигляді перемикачів.

Шаблон tplRadio:

<div class="col-lg-3 col-sm-4 col-xs-6">
    <div class="radio">
        <label>
            <input type="radio" name="radio" class="colored-blue" value="" onchange="this.form.submit();">
            <span class="text"> </span>
        </label>
    </div>
</div>

Відобразить у вигляді перемикачів всі опубліковані і невидалені дочірні документи папки 4, без порожнього поля на початку списку. Запам'ятає вибране значення.

Праворці checkbox (frontend)

Приклад c використанням шаблону у frontend

Завдання - вивести у вигляді перемикачів.

Шаблон tplCheckbox:

<div class="col-lg-2 col-sm-4 col-xs-6">
    <label class="csscheckbox csscheckbox-primary">
        <input type="checkbox" name="checkbox" class="colored-blue" value="" onchange="this.form.submit();">
        <span></span> 
    </label>
</div>

Відобразить у вигляді перемикачів всі опубліковані і невидалені дочірні документи папки 4, без порожнього поля на початку списку.

Кількість знайдених документів

Висновок кількості знайдених документів

Відобразить кількість опублікованих і невидалених дочірніх документів папки 4.

Висновок id знайдених документів

Висновок ідентифікаторів знайдених документів

Чанк idTpl:

Відобразить список id всіх опублікованих і невидалених дочірніх документів папки 4, розділених комою.

Висновок заголовків знайдених документів

За аналогією з id документа, можна вивести будь-яку змінну шаблону (крім TV-параметрів). Наприклад, якщо потрібно вивести заголовки:

Відобразить заголовки всіх опублікованих і невидалених дочірніх документів папки 4, розділених комою з пропуском.

Використання параметра where

ППри використанні параметра whereнеобхідно замінювати все = на @eq = на @eq. Наприклад, для того, щоб вивести ідентифікатори всіх документів з шаблоном 5 і menuindex рівним 0, розміщуємо такий виклик:

Чанк tplId:

Анонс статей або підміню

Виводимо анонс статей

<ul></ul>

Чанк tplNews:

<li><a href="[~~]"></a><p></p></li>

Відобразить анонси трьох статей з коротким описом.

Выводим подменю

<ul></ul>

Чанк tplSubmenu:

<li><a href="[~~]"></a></li>