如何用Shopify Liquid获取URL参数？落地页自动加购问题排查

Shopify的Liquid是服务端渲染语言，你可以直接通过request.params对象来获取URL中的查询参数，举几个实用场景：

• 如果你的URL是shopifystorename.com/collection?sort=price-asc，要获取sort参数的值，直接写：{{ request.params.sort }}，输出结果就是price-asc
• 若参数可能不存在，还可以给个默认值兜底：{{ request.params.size | default: 'medium' }}，当URL里没有size参数时，就会输出medium
• 调试时想查看所有参数，直接输出{{ request.params }}就能看到所有参数的键值对

首先得给你说清楚为什么你原来的方法行不通：Liquid是在服务端运行的，页面发送到浏览器之前就已经把所有Liquid代码解析成HTML了，而你的JS是在浏览器加载页面之后才运行，修改的只是客户端的DOM内容。这就导致你用{% capture my_variable %}捕获的内容从一开始就是<span id="handle">test</span>，JS改的只是浏览器里的显示内容，Liquid根本看不到更新后的值，自然没法用它去匹配商品handle。

下面给你两种靠谱的解决方案，按需选择：

方案一：用Liquid直接提取Handle（推荐，更高效） #

你的URL格式是shopifystorename.com/some-product-handle，路径的最后一段就是商品handle，Liquid可以直接从请求路径里提取，全程在服务端完成，避免客户端和服务端的渲染顺序冲突：

{% assign path_parts = request.path | split: '/' %}
{% assign product_handle = path_parts | last %}
{% assign target_product = all_products[product_handle] %}

{% if target_product %}
  <!-- 自动加购逻辑：页面加载后调用Shopify购物车API -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 调用加购接口，用Liquid拿到的第一个变体ID（如果需要指定变体可以调整）
      fetch('/cart/add.js', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        },
        body: JSON.stringify({
          id: {{ target_product.variants.first.id }},
          quantity: 1
        })
      })
      .then(res => res.json())
      .then(data => {
        // 加购成功后可以跳转到购物车页，或者提示用户
        window.location.href = '/cart';
      })
      .catch(err => console.error('加购失败:', err));
    });
  </script>
{% else %}
  <p>抱歉，未找到对应的商品</p>
{% endif %}

这个方法的好处是，Liquid提前拿到了商品的变体ID，JS直接用这个ID调用加购接口，不需要额外请求商品数据，速度更快。

方案二：纯客户端JS实现（适合特殊场景） #

如果因为某些原因必须用JS提取handle，那可以直接在客户端请求商品数据，再调用加购接口，完全绕开Liquid传递值的问题：

document.addEventListener('DOMContentLoaded', function() {
  // 从URL提取最后一段作为handle
  const url = window.location.href;
  const lastSlash = url.lastIndexOf('/');
  const productHandle = url.slice(lastSlash + 1);

  // 先请求商品的JSON数据，拿到变体ID
  fetch(`/products/${productHandle}.js`)
  .then(res => res.json())
  .then(product => {
    const firstVariantId = product.variants[0].id;
    // 调用加购接口
    return fetch('/cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({
        id: firstVariantId,
        quantity: 1
      })
    });
  })
  .then(res => res.json())
  .then(data => {
    window.location.href = '/cart'; // 跳转到购物车
  })
  .catch(err => console.error('操作出错:', err));
});

补充：如果只是想自动跳转到商品详情页 #

要是你的需求不是加购，而是直接跳转到对应商品的详情页，那更简单，用Liquid做服务端跳转或者客户端JS跳转都可以：

{% assign path_parts = request.path | split: '/' %}
{% assign product_handle = path_parts | last %}
{% assign target_product = all_products[product_handle] %}

{% if target_product %}
  <!-- 客户端JS跳转，不会有Liquid redirect的位置限制 -->
  <script>window.location.href = '/products/{{ product_handle }}';</script>
  <!-- 或者用Liquid的redirect，但必须放在页面最顶部，不能有任何HTML输出之前 -->
  {% comment %} {% redirect to: '/products/' | append: product_handle %} {% endcomment %}
{% else %}
  <p>未找到对应商品</p>
{% endif %}

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