<div class="product-grid">
  <div class="product">
    <img src="./images/01.jpg" alt="Product 1">
    <h2>Product 1</h2>
    <p class="price">$19.99</p>
    <button class="add-to-cart">Add to Cart</button>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    
    const addToCartButtons = document.querySelectorAll('.add-to-cart');

    addToCartButtons.forEach(function (button) {
      button.addEventListener('click', function () {
      
        const productContainer = this.closest('.product');
        
        const productImage = productContainer.querySelector('img');
        
        /* Implement FlyTo */
        flyTo(productImage, document.querySelector('.cart-dropdown'));
      });
    });
  });
</script>

<script src="js/fly-to.min.js"></script>