먼저, Isotope 라이브러리를 웹 페이지에 추가해야합니다. <script> 태그를 사용하여 Isotope 라이브러리를 가져오세요. 아래는 CDN을 통해 가져오는 예시입니다.

<script src="https://cdn.jsdelivr.net/npm/isotope-layout@3.0.6/dist/isotope.pkgd.min.js"></script>

그리고 HTML 요소들의 컨테이너를 만들어야합니다. 컨테이너는 필터링 기능을 적용할 대상입니다. 예를 들어, 상품을 보여줄 <div> 요소를 가지는 컨테이너를 만들어보겠습니다.

<div id="product-container">
  <div class="product">Product 1</div>
  <div class="product">Product 2</div>
  <div class="product">Product 3</div>
  <!-- 추가적인 상품 요소들 -->
</div>

이제 JavaScript 코드를 사용하여 Isotope을 초기화하고 필터링 기능을 구현할 수 있습니다. 아래는 간단한 예시입니다.

// Isotope 초기화
var $container = $('#product-container').isotope({
  itemSelector: '.product'
});

// 필터링 이벤트 핸들러 등록
$('#filter-buttons').on('click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $container.isotope({ filter: filterValue });
});

위의 예시에서는 필터링을 위한 버튼이 있는 <div> 요소와 data-filter 속성을 사용하여 필터링 값을 지정합니다. 필터링 버튼을 클릭하면 해당 필터링 값을 사용하여 Isotope을 업데이트하게 됩니다.

<div id="filter-buttons">
  <button data-filter="*">All</button>
  <button data-filter=".category1">Category 1</button>
  <button data-filter=".category2">Category 2</button>
  <!-- 추가적인 필터링 버튼들 -->
</div>

이제 상품 목록을 필터링하기 위해 필터링 버튼을 클릭하면, 해당 카테고리에 속하는 상품들만 표시될 것입니다.

다양한 Isotope의 옵션과 메서드를 사용하여 필터링 기능을 더욱 개선할 수 있습니다. 자세한 내용은 Isotope 공식 문서를 참조하시기 바랍니다.

• Isotope 공식 문서

위의 예시 코드는 Isotope을 기반으로 간단한 상품 필터링을 구현하는 방법을 보여줍니다. 실제 상황에 맞게 적절히 수정하여 사용하시면 됩니다.