如何将产品ID从JavaScript动态传递到Liquid模板

首先明确核心逻辑：Liquid是服务器端模板语言，页面加载时就已执行完毕并生成静态HTML；而JavaScript是客户端脚本，在页面加载完成后才运行。因此无法直接把客户端的bundleProductId变量传递给已经执行过的Liquid代码，需通过以下两种思路实现需求：

方案一：直接用JavaScript动态渲染组合装内容 #

既然已经在JS中拿到了目标组合装的ID和标题，直接用JS生成所需的产品信息、选量按钮及加购按钮，无需再依赖Liquid循环。

修改后的JS代码 #

function showOrderDetails() {
  if (singleProduct1 && singleProduct2) {
    let products = {{ collections['Bundles'].products | json }};
    let orderContainer = document.getElementById('order-details');
    let actionsContainer = orderContainer.querySelector('.quantity-cart__actions');
    
    // 清空容器原有内容
    actionsContainer.innerHTML = '';

    for (var i = 0; i < products.length; i++) {
      let title = products[i].title;
      let id = products[i].id;
      let productsInBundle = title.split(" & ");
      let cleanedProductsTitle = productsInBundle.map(product => {
        return product.split("--")[0].replace("Bundle", "").trim();
      });

       if (
        cleanedProductsTitle.includes(singleProduct1.trim()) &&
        cleanedProductsTitle.includes(singleProduct2.trim())
      ) {
        bundleProductId = id;
        
        // 动态生成产品信息及操作按钮
        let productHtml = `
          <p>Product Name: ${title}</p>
          <div class="quantity-selector">
            <button class="quantity-btn" onclick="adjustQuantity(-1)">-</button>
            <input type="number" value="1" min="1" class="quantity-input">
            <button class="quantity-btn" onclick="adjustQuantity(1)">+</button>
          </div>
          <button class="add-to-cart-btn" onclick="addToCart(${id})">加入购物车</button>
        `;
        
        actionsContainer.innerHTML = productHtml;
        // 显示弹窗
        orderContainer.classList.remove('hidden');
        break;
      }
    }
  }
}

// 选量调整逻辑
function adjustQuantity(delta) {
  let input = document.querySelector('.quantity-input');
  let currentVal = parseInt(input.value);
  input.value = Math.max(1, currentVal + delta);
}

// 加入购物车逻辑（调用Shopify AJAX接口）
function addToCart(productId) {
  let quantity = parseInt(document.querySelector('.quantity-input').value);
  fetch('/cart/add.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify({
      id: productId,
      quantity: quantity
    })
  })
  .then(response => response.json())
  .then(data => {
    alert('已加入购物车');
  })
  .catch(error => {
    console.error('加购失败:', error);
  });
}

修改后的Liquid代码（仅保留容器） #

<div id="order-details" class="popup-content__order-details hidden">
  <div class="quantity-cart__actions">
    <!-- JS将动态插入内容 -->
  </div>
</div>

方案二：预渲染所有组合装的隐藏模板 #

若希望保留Liquid生成的HTML结构，可提前用Liquid渲染所有组合装的模板并隐藏，再通过JS根据bundleProductId显示对应模板。

修改后的Liquid代码 #

<div id="order-details" class="popup-content__order-details hidden">
  <div class="quantity-cart__actions">
    <!-- 预渲染所有组合装模板，默认隐藏 -->
    {% for product in collections.bundles.products %}
      <div class="bundle-template hidden" data-product-id="{{ product.id }}">
        <p>Product Name: {{ product.title }}</p>
        <div class="quantity-selector">
          <button class="quantity-btn" onclick="adjustQuantity(-1, {{ product.id }})">-</button>
          <input type="number" value="1" min="1" class="quantity-input" data-product-id="{{ product.id }}">
          <button class="quantity-btn" onclick="adjustQuantity(1, {{ product.id }})">+</button>
        </div>
        <button class="add-to-cart-btn" onclick="addToCart({{ product.id }})">加入购物车</button>
      </div>
    {% endfor %}
  </div>
</div>

对应的JS代码 #

function showOrderDetails() {
  if (singleProduct1 && singleProduct2) {
    let products = {{ collections['Bundles'].products | json }};
    let orderContainer = document.getElementById('order-details');
    
    // 先隐藏所有模板
    document.querySelectorAll('.bundle-template').forEach(tpl => {
      tpl.classList.add('hidden');
    });

    for (var i = 0; i < products.length; i++) {
      let title = products[i].title;
      let id = products[i].id;
      let productsInBundle = title.split(" & ");
      let cleanedProductsTitle = productsInBundle.map(product => {
        return product.split("--")[0].replace("Bundle", "").trim();
      });

       if (
        cleanedProductsTitle.includes(singleProduct1.trim()) &&
        cleanedProductsTitle.includes(singleProduct2.trim())
      ) {
        bundleProductId = id;
        
        // 显示对应ID的模板
        let targetTemplate = document.querySelector(`.bundle-template[data-product-id="${bundleProductId}"]`);
        if (targetTemplate) {
          targetTemplate.classList.remove('hidden');
          orderContainer.classList.remove('hidden');
        }
        break;
      }
    }
  }
}

// 适配多产品的选量逻辑
function adjustQuantity(delta, productId) {
  let input = document.querySelector(`.quantity-input[data-product-id="${productId}"]`);
  let currentVal = parseInt(input.value);
  input.value = Math.max(1, currentVal + delta);
}

// 加购逻辑同方案一
function addToCart(productId) {
  let quantity = parseInt(document.querySelector(`.quantity-input[data-product-id="${productId}"]`).value);
  fetch('/cart/add.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    body: JSON.stringify({
      id: productId,
      quantity: quantity
    })
  })
  .then(response => response.json())
  .then(data => {
    alert('已加入购物车');
  })
  .catch(error => {
    console.error('加购失败:', error);
  });
}

核心逻辑总结 #

Liquid与JavaScript的执行时机完全分离，不存在“客户端变量反向传给服务器端Liquid”的直接途径。通过前端动态生成内容或预渲染隐藏模板再切换显示，即可实现组合装产品的展示与加购功能。

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