Динамический select между дочерней и родительской категорией в Textpattern

Динамический select между дочерней и родительской категорией в Textpattern

В статье рассказывается как легко и быстро сделать динамический select между дочерней и родительской категории. Все действия производятся с CMS Textpattern, но основная идея реализации будет работать и в другой CMS, правда SQL-выборку придется делать средствами своей CMS.

Работает это так: в TXP есть возможность использования вложенности категорий. При этом вложенная категория будет дочерней, а та, в которую вложили, будет родительской.

Зачем мне это надо?

Я уже давно собрался сделать сайт по продаже автомобилей для города Омска. Надоело делать сайты на непонятные темы: урология, одежда, утюги и т.д. На сегодняшний день есть всего 2 сайта по продаже машин, которые полезны как для продавцов, так и для покупателей. Именно такая несправедливость и толкнула меня на эту грандиозную затею. Работа идет медленно, так как одновременно с созданием сайта происходит изучение PHP и Javacript. Движок для сайта будет Teхtpattern.

В Textpattern 2 категории: Category1 и Category2. В MySQL таблице они именно так и называются, только с маленькой буквы.

Благодаря плагину smd_query в Textpattern`не это реализовывается очень просто. Этот плагин нужен только для выборки категорий из таблицы базы данных. Если Вы хотите сделать что-то подобное в другой CMS, то Вам нужно сделать это чем-то другим.

Сама реализаций динамического select

Для того, чтоб обновление второго select`а происходило без перезагрузки всей страницы, необходимо использовать JS. Сам скрипт я позаимствовал на одном из сайтов, и поэтому привожу его в неизменном виде. Вот он этот скрипт – script.js Его просто подключаем к странице, где будет динамический select.

Подключается вот этим кодом:

<script type="text/javascript" src="/textpattern/script.js"></script>
<script type="text/javascript"><!--
window.onload = function() {
dynamicSelect("Category1", "Category2");
}
//--></script>

В том месте, где хотите вывести сами селекты, нужно разместить этот код:

<form action="#" method="post">

Марка машины: <select name="Category1" id="Category1">
<option class="select" value="select">Выберите марку…</option>

<txp:smd_query query='SELECT name FROM txp_category WHERE parent = "root"'>
<option value="{name}">{name}</option>
</txp:smd_query>

</select>

Модель машины: <select name="Category2" id="Category2">
<option class="select" value="select">Выберите модель…</option>

<txp:smd_query query='SELECT parent, name FROM txp_category WHERE (parent <> "root" AND parent <> "")'>
<option class="{parent}" value="{name}">{name}</option>
</txp:smd_query>

</select>

</form>

Перед этим конечно же необходимо установить и активировать плагин smd_query.

Как это выглядит в боевом режиме

Все что я тут понаписал, можно посмотреть как это выглядит на реальном примере. А выглядит это как-то так:

Марка машины: Модель машины:

Комментарии:

Имя
e-mail
Сайт
Текст комментария: