技术问询：如何从产品列表将商品价格传递至价格提醒弹窗？

我来帮你搞定这个价格提醒弹窗的功能！结合你给出的Twig模板代码，我把完整的实现方案整理如下：

1. 补全Twig模板代码（产品列表表格） #

先把你没写完的循环部分补全，关键是给每个「Create Price Alert」按钮加上数据属性来存储当前产品的价格（和产品名称，弹窗里显示更友好）：

<link href="{{ asset('../web/main.css') }}" rel="stylesheet">
<h1>Products</h1>
<table border="1">
  <tr>
    <td>Name</td>
    <td>Image</td>
    <td>Brand</td>
    <td>Category</td>
    <td>URL</td>
    <td>Shop</td>
    <td>Action</td> <!-- 新增操作列放置按钮 -->
  </tr>
  {% for product in products %} {# 假设你的产品集合变量名为products #}
  <tr>
    <td>{{ product.name }}</td>
    <td><img src="{{ product.image_url }}" alt="{{ product.name }}" style="width: 80px;"></td>
    <td>{{ product.brand }}</td>
    <td>{{ product.category }}</td>
    <td><a href="{{ product.url }}" target="_blank">View Product</a></td>
    <td>{{ product.shop }}</td>
    <td>
      <!-- 按钮通过data属性存储产品名称和价格 -->
      <button class="price-alert-btn" 
              data-product-name="{{ product.name }}" 
              data-product-price="{{ product.price }}">
        Create Price Alert
      </button>
    </td>
  </tr>
  {% endfor %}
</table>

<!-- 可选：自定义模态框（替代原生alert，更美观） -->
<div id="priceAlertModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h3>Price Alert Created</h3>
    <p>Product: <span id="modalProductName"></span></p>
    <p>Current Price: <span id="modalProductPrice"></span></p>
  </div>
</div>

2. JavaScript 弹窗逻辑 #

这里提供两种方案，你可以根据需求选择：

方案一：原生Alert弹窗（快速简单） #

用事件委托监听按钮点击，读取data属性里的信息直接弹出：

// 页面加载完成后初始化事件监听
document.addEventListener('DOMContentLoaded', function() {
  // 事件委托：监听表格的点击事件，兼容动态生成的按钮
  document.querySelector('table').addEventListener('click', function(e) {
    if (e.target.classList.contains('price-alert-btn')) {
      const productName = e.target.dataset.productName;
      const productPrice = e.target.dataset.productPrice;
      alert(`Price Alert for ${productName}\nCurrent Price: ${productPrice}`);
      
      // 这里可以添加后端请求逻辑，比如提交价格提醒到服务器：
      // fetch('/api/create-price-alert', {
      //   method: 'POST',
      //   body: JSON.stringify({ productId: product.id, targetPrice: productPrice }),
      //   headers: { 'Content-Type': 'application/json' }
      // });
    }
  });
});

方案二：自定义模态框（更优雅美观） #

如果想要更贴合网站风格的弹窗，用自定义模态框配合CSS：

document.addEventListener('DOMContentLoaded', function() {
  const modal = document.getElementById('priceAlertModal');
  const closeBtn = document.querySelector('.close');
  const modalProductName = document.getElementById('modalProductName');
  const modalProductPrice = document.getElementById('modalProductPrice');

  // 点击按钮打开模态框
  document.querySelector('table').addEventListener('click', function(e) {
    if (e.target.classList.contains('price-alert-btn')) {
      modalProductName.textContent = e.target.dataset.productName;
      modalProductPrice.textContent = e.target.dataset.productPrice;
      modal.style.display = 'block';
      // 可选：添加后端创建提醒的请求逻辑
    }
  });

  // 点击关闭按钮关闭模态框
  closeBtn.addEventListener('click', function() {
    modal.style.display = 'none';
  });

  // 点击模态框外部区域关闭
  window.addEventListener('click', function(e) {
    if (e.target === modal) {
      modal.style.display = 'none';
    }
  });
});

3. 自定义模态框的CSS（添加到main.css） #

如果使用方案二，需要给模态框添加样式：

/* 模态框背景遮罩 */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

/* 模态框内容容器 */
.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 24px;
  border-radius: 8px;
  width: 80%;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 关闭按钮样式 */
.close {
  color: #888;
  float: right;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover {
  color: #333;
}

关键细节说明 #

• 数据属性（data-*）：用来安全存储产品的价格和名称，避免把业务数据硬编码到JS逻辑里，更符合语义化规范。
• 事件委托：因为按钮是通过Twig循环动态生成的，直接给每个按钮绑定事件可能失效，监听父元素（table）的点击事件能确保所有动态生成的按钮都能触发逻辑。
• 后端扩展：弹窗显示价格后，你可以在点击事件里添加AJAX请求，把产品ID、目标价格等信息发送到后端，完成价格提醒的持久化创建。

内容的提问来源于stack exchange，提问作者user9517769