[javascript] Isotope을 사용하여 웹 페이지에서 상품 카테고리를 필터링하는 방법은 무엇인가요?

01 Dec 2023

javascript

Isotope은 매우 유용한 라이브러리로, 웹 페이지에서 아이템을 그리드나 레이아웃으로 표시하면서 필터링 기능을 추가할 수 있습니다. 아래는 웹 페이지에서 Isotope을 사용하여 상품 카테고리를 필터링하는 방법을 보여줍니다.

먼저, isotope.pkgd.min.js 파일을 다운로드하여 웹 페이지에 추가하고, 필요한 스타일 시트도 포함해야 합니다.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="isotope.css">
</head>
<body>
    <div class="filter-buttons">
        <button data-filter="*">전체</button>
        <button data-filter=".category1">카테고리 1</button>
        <button data-filter=".category2">카테고리 2</button>
        <button data-filter=".category3">카테고리 3</button>
    </div>
    <div class="grid">
        <div class="item category1">상품 1</div>
        <div class="item category2">상품 2</div>
        <div class="item category3">상품 3</div>
        <!-- 추가 상품 아이템들 -->
    </div>

    <script src="isotope.pkgd.min.js"></script>
    <script>
        var grid = document.querySelector('.grid');
        var buttons = document.querySelectorAll('.filter-buttons button');

        // Isotope 인스턴스 생성
        var iso = new Isotope(grid, {
            itemSelector: '.item',
            layoutMode: 'fitRows'
        });

        // 필터링 버튼 클릭 시 이벤트 처리
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].addEventListener('click', function (e) {
                var filterValue = this.getAttribute('data-filter');
                iso.arrange({ filter: filterValue });
            });
        }
    </script>
</body>
</html>

위의 예제 코드에서는 필터링할 카테고리를 나타내는 버튼들을 생성하고, 필터링할 아이템은 category1, category2, category3과 같은 클래스로 구분합니다. data-filter 속성을 사용하여 각 버튼과 해당 카테고리를 연결합니다.

스크립트 부분에서는 Isotope 인스턴스를 생성하고, 필터링 버튼 클릭 시 해당 카테고리를 가져와서 iso.arrange() 메소드를 사용하여 필터링된 결과를 업데이트합니다.

이제 웹 페이지를 열고 필터링 버튼을 클릭하여 상품 카테고리를 필터링할 수 있습니다.