Filter by Tag

<h2>Filter by Tag</h2>
<div id="filter-buttons" style="margin-bottom: 20px;">
  <button class="filter-btn" data-keyword="fly god">Fly God</button>
  <button class="filter-btn" data-keyword="dj nanlib">DJ Nanlib</button>
  <button class="filter-btn" data-keyword="cartoon rap shirt">Cartoon Rap</button>
  <button class="filter-btn" data-keyword="hip-hop art">Hip-Hop Art</button>
  <button class="filter-btn" data-keyword="streetwear">Streetwear</button>
</div>

<ul id="product-list">
  <li class="product-item" data-tags="fly god,dj nanlib,hip-hop art,streetwear,cartoon rap shirt">
    <a href="/product/croc-scorpion-limited-edition">Croc Scorpion Limited Edition</a>
  </li>
  <!-- Add more items here using the same format -->
</ul>

<style>
  .filter-btn {
    background: black;
    color: white;
    border: none;
    padding: 10px;
    margin: 5px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
  }

  .filter-btn:hover {
    background: gold;
    color: black;
  }

  .product-item {
    margin: 10px 0;
  }

  .hidden {
    display: none;
  }
</style>

<script>
  const buttons = document.querySelectorAll('.filter-btn');
  const products = document.querySelectorAll('.product-item');

  buttons.forEach(button => {
    button.addEventListener('click', () => {
      const keyword = button.getAttribute('data-keyword').toLowerCase();
      products.forEach(product => {
        const tags = product.getAttribute('data-tags').toLowerCase();
        if (tags.includes(keyword)) {
          product.classList.remove('hidden');
        } else {
          product.classList.add('hidden');
        }
      });
    });
  });
</script>