Ajax를 활용한 다이나믹 드롭박스
By |2020-09-24T17:09:16+09:00September 24th, 2020|PHP, 개발노트, 워드프레스|0 Comments

두 개의 드롭박스를 연결시켜 작동하는 다이나믹 드롭박스를 워드프레스에서 구현하는 방법입니다.


다이나믹 드롭박스의 정의

두 개의 드롭박스는 select 문으로 작성되어 있고 첫번째 드롭박스에서 선택된 option 에 따라 두 번째 드롭박스에 보여지는 option 들이 불러와져서 생성된다.
대분류가 PC일 경우 중분류는 PC 카테고리에 속한 서브 카테고리들로 목록이 생성된다.

대분류가 게임엔터테인먼트일 때는 그에 해당하는 카테고리들로 목록이 생성

첫번째(부모 카테고리) 드롭박스 생성

먼저 첫번째 드롭박스를 php 로 부모 카테고리만 불러와서 드롭박스를 생성한다.

<label>대분류</label>
<select id="category-1st" name="deal_category">
    <?php
    $category_args = array(
        'taxonomy'   => 'hotdeal-category',
        'orderby'       => 'name',
        'order'         => 'ASC',
        'hide_empty'    => '0',             //for trouble shooting
        'exclude'       => '1'              ///post 카테고리의 경우  uncategorized 카테고리 제외 ,해당 ID 값은 1
    );
    $categories = get_categories($category_args);
    foreach ($categories as $category) {
        if( !$category->parent) {
            echo '<option value="'. $category->term_id .'">' . $category->name .'</option>';
        }
    }
    ?>
</select>

두번째(서브 카테고리) 드롭박스 생성 함수

드롭박스를 출력하는 함수를 functions.php 에 다음과 같이 추가한다.

/**
* 카테고리에 따라 서브 카테고리 생성
*
*/
function load_category() {
    $sub_term_id = $_POST['term'];          //POST 방식으로 페이지에서 term 값을 받아서 저장
    echo '<!--' . $sub_term_id . '-->';     //받아온 term 값을 주석으로 출력하여 확인
    $category_args = array(
        'taxonomy'   => 'hotdeal-category',
        'parent'        => $sub_term_id,    //부모 카테고리가 term 값인 카테고리들을 불러오기 위한 배열 값
        'orderby'       => 'name',
        'order'         => 'ASC',
        'hide_empty'    => '0',             //for trouble shooting
        'exclude'       => '1'              //post 카테고리의 경우  uncategorized 카테고리 제외 ,해당 ID 값은 1
    );
    $categories = get_categories($category_args);
    foreach ($categories as $category) {
            echo '<option value="' . $category->term_id . '">' . $category->name . '</option>';
    }
}

뒤에 페이지에 추가할 js 코드에서 전달되어 지는 data 를 토대로 두번째 드랍박스를 생성해주는 함수입니다.

다이나믹 드롭박스를 작동시키는 스크립트

페이지에서 첫번째 드랍박스의 선택된 값을 가져와 위의 load_category() 함수에 저장하고 그 결과를 id=category-2nd 태그에 출력하는 js 코드입니다.

<script>
    jQuery('#category-1st').on('change', function() {
        var parent_cat = jQuery('#category-1st').val();
        console.log('다이나믹 드롭박스 대분류가 ' + parent_cat + ' 로 변경됨.');
        jQuery.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {'action': 'load_category', 'term': parent_cat},
            success: function(response) {
                jQuery('#category-2nd').html(response);
                return false;
            }
        });
    });
</script>

첫번째 드롭박스인 category-1st 의 값이 변경되면 함수가 작동합니다.category-1st 의 드랍박스에 선택되어진 값을 parent_cat 에 저장합니다.ajax를 사용해서 값을 functions.php 에 있는 load_category() 에 전달하고 결과값을category-2nd 태그에 출력합니다.
ajaxurl 은 admin-ajax.php 의 주소값입니다.(워드프레스 2.8 이후에는 admin 헤더에 ajaxurl 이 정의되어 있습니다.)
data 의 내용은 ajax 를 사용하여 함수를 호출하고 term 값을 전달합니다.
호출에 성공한 경우 #category-2nd 에 html 값을 출력합니다.

ajax 사용을 위한 정의(필수)

functions.php 에 load_category() 추가할 때 반드시 아래 코드를 앞에 정의해주어야 합니다.

add_action( 'wp_ajax_nopriv_load_category', 'load_category' );
add_action( 'wp_ajax_load_category', 'load_category');

워드프레스에서 ajax로 함수를 호출할 때는 반드시 필요한 부분입니다.

(참고 ajax 구현 워드프레스 CODEX )

댓글 남기기