Динамический select box для категорий и субкатегорий

Sergey

Отправлено: 01 Апрель 2009 02:42 P.M.

[ Игнорировать ]

Студент

Всего сообщений: 99

Зарегистрирован 2008-02-06

Необходимо сделать в некоторых разделах сайта фильтрацию по субкатегории через select box.

Субкатегорий очень много (более тысячи), да и еще бывает что повтояются названия. В связи с этим нужно сделать динамический select box из 2-х селектов. В первом указывается категория, а во втором уже можно выбрать субкатегорию.

Сайт автомобильной тематики, и фильтрация нужна по марке\модели автомобиля. Соответсвенно категоря - это марка авто, а субкатегория - это его модель.

Пример можно посмотреть на любом автомобильном портале. Ну например здесь: http://carsguru.ru Там вверху есть “Поиск в объявлениях” , указывая марку автомобиля, автоматически в соседнем селекте подгружаются серии данной марки.

Вот нужно сделать аналогичный функционал в ЕЕ с категориями и субкатегориями.

Думаю что данный функционал можно сделать с помощью Jquery. Немного погуглил, и нашел плагин для Jquery: http://www.rvdevsign.net/sources/javascript/jselect/jselect.html

Там внизу есть пример Auto-populating Select element. То-есть реализовано именно то что нужно, возможность выбрать субкатегорию в зависимости от выбранной категории.

Только вот сам конечно я не прикручу это к категориям\субкатегориям ЕЕ, поскольку в этой области не обладаю нужными знаниями.

Кто может помочь реализовать данный функционал?

П.С.

Субкатегории на сайте вывожу запросом:

{exp:query sql="SELECT cat_id as child_category_id, cat_url_title as child_category_url_title, cat_name AS child_category_name FROM exp_categories WHERE parent_id = '{category_id}'"}
<a href="/category/{child_category_url_title}/">{child_category_name}</a>
{/exp:query} 

Профиль

Станислав

Отправлено: 01 Апрель 2009 02:52 P.M.

[ Игнорировать ] [ # 1 ]

Администратор

Всего сообщений: 1423

Зарегистрирован 2007-12-27

Возможно вам в “платные решения”

Подпись

ExpressionEngine - SEO-ориентированный движок

Профиль

Calm

Отправлено: 01 Апрель 2009 03:37 P.M.

[ Игнорировать ] [ # 2 ]

Администратор

Всего сообщений: 1354

Зарегистрирован 2008-01-02

ну вот как-то так:

<script type="text/javascript" src="jquery.jselect.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
            $('#category_select').jselect({
                replaceAll: false,
                onChange: function(value, text){ autopopulate(value); }
            });
            // Function call to populate a Select box.
            function autopopulate(option){
                $('#subcategory_select').jselect({
                    loadUrl: "auto-populate/"  + parseInt(option),
                    loadDataType: "json"
                });
            }
});
</script> 

<p>
                                <label for="category_select">Category</label>
                                <select name="category_select" id="category_select"><option value="0">Please select a category</option><option value="1">Category One (2)</option><option value="2">Category Two (4)</option><option value="3">Category Three (1)</option></select>
                            </p>
                            <p>
                                <label for="subcategory_select">Sub-category</label>

                                <select name="subcategory_select" id="subcategory_select">
                                    <option value="0">Please first select a category</option>
                                </select>
                            </p> 

+ понадобится шаблон auto-populate

{ "select" : [
{exp:query sql="SELECT cat_id as child_category_id, cat_url_title as child_category_url_title, cat_name AS child_category_name FROM exp_categories WHERE parent_id = '{segment_2}'" backspace="2"}
{ "oValue": "{count}", "oText": "{child_category_name}" },
{if no_results}
{ "oValue": "0", "oText": "Please first select a category" }
{/if}
{/exp:query}
]} 

p.s. предупреждаю сразу - я не тестировал, просто набросал. По логике должно работать, если нет - FireBug и вперед...

Подпись

booooring…

Профиль

Sergey

Отправлено: 01 Апрель 2009 03:45 P.M.

[ Игнорировать ] [ # 3 ]

Студент

Всего сообщений: 99

Зарегистрирован 2008-02-06

Calm - 01 Апрель 2009 03:37 P.M.

p.s. предупреждаю сразу - я не тестировал, просто набросал. По логике должно работать, если нет - FireBug и вперед...

Спасибо, буду пробовать. Позже отпишусь.

Профиль

Calm

Отправлено: 01 Апрель 2009 03:51 P.M.

[ Игнорировать ] [ # 4 ]

Администратор

Всего сообщений: 1354

Зарегистрирован 2008-01-02

немного подправил autopopulate - т.к. в шаблонах просто так не подтянешь значения GET или POST, приходится через сегменты

Подпись

booooring…

Профиль

Sergey

Отправлено: 01 Апрель 2009 04:37 P.M.

[ Игнорировать ] [ # 5 ]

Студент

Всего сообщений: 99

Зарегистрирован 2008-02-06

Calm - 01 Апрель 2009 03:51 P.M.
немного подправил autopopulate - т.к. в шаблонах просто так не подтянешь значения GET или POST, приходится через сегменты

И так не тянет значения. Выводит список всех категорий.

Если вместо {segment_2} указать ID категории, тогда выводит список ее субкатегорий. Через {segment_2} не хочет тянуть значения. Может еще какие-то идеи будут по этому поводу?

Профиль

Calm

Отправлено: 01 Апрель 2009 04:45 P.M.

[ Игнорировать ] [ # 6 ]

Администратор

Всего сообщений: 1354

Зарегистрирован 2008-01-02

ну так {segment_2} вам нужно подменить на тот сегмент в котором реально содержится ID категории. Я же не знаю какая у вас структура URL получается.
вставьте в auto-populate строчку типа

1={segment_1}<br/>
2={segment_2}<br/>
3={segment_3}<br/>
4={segment_4}<br/>
5={segment_5}<br/> 

И вычислите segment

Подпись

booooring…

Профиль

Sergey

Отправлено: 01 Апрель 2009 05:05 P.M.

[ Игнорировать ] [ # 7 ]

Студент

Всего сообщений: 99

Зарегистрирован 2008-02-06

Calm - 01 Апрель 2009 04:45 P.M.
ну так {segment_2} вам нужно подменить на тот сегмент в котором реально содержится ID категории. Я же не знаю какая у вас структура URL получается.
вставьте в auto-populate строчку типа
1={segment_1} 2={segment_2} 3={segment_3} 4={segment_4} 5={segment_5} 
И вычислите segment

Блин, это я тупанул, нужно было {segment_3} подставить... Спасибище огромное!!! Главную трудность в реализации данного функционала преодолел. Осталось на основе этого сделать фильтрацию...

Calm, не знаю что бы без тебя делали. Уже в который раз выручаешь.

Профиль

Calm

Отправлено: 01 Апрель 2009 05:16 P.M.

[ Игнорировать ] [ # 8 ]

Администратор

Всего сообщений: 1354

Зарегистрирован 2008-01-02

Welcome!
А насчет остальной фильтрации - да по аналогии можно: на основе второго select’a ($(’#subcategory_select’).jselect ...) делаем запрос(если запрос не требует обновления select’a, то простым ajax запросом) к другому шаблону (или можно к тому же, сместив ID категории на 4 место, а в 3 сегменте написать тип запроса), и уже там составлять JSON массив с необходимыми данными, и на странице уже разбираем на блоки и подставляем В общем - изучайте jQuery

Подпись

booooring…

Профиль

Sergey

Отправлено: 01 Апрель 2009 05:54 P.M.

[ Игнорировать ] [ # 9 ]

Студент

Всего сообщений: 99

Зарегистрирован 2008-02-06

Вот в этом готовом решении заметил только один баг, не работает {if no_results} - Если нет результатов, то выводит список всех категорий. Подскажи как можно поправить?

Профиль

Calm

Отправлено: 01 Апрель 2009 06:08 P.M.

[ Игнорировать ] [ # 10 ]

Администратор

Всего сообщений: 1354

Зарегистрирован 2008-01-02

а в каких случаях это посходит? когда {segment_3} пустой? Ставьте проверку на это.

Подпись

booooring…

Профиль

Sergey

Отправлено: 01 Апрель 2009 06:10 P.M.

[ Игнорировать ] [ # 11 ]

Студент

Всего сообщений: 99

Зарегистрирован 2008-02-06

Calm - 01 Апрель 2009 06:08 P.M.
а в каких случаях это посходит? когда {segment_3} пустой? Ставьте проверку на это.

Нет, ошибся. Это только если <option value=“0”> - тогда список всех категорий выводит. А так все норм.

Профиль

‹‹ Оформление вывода фотографий Облако категорий ››