Big Cartel Luna主题：/products页改显示分类及页面判断方案

嘿，我明白你想把/products页从全商品列表改成分类列表，同时要区分当前是分类页还是这个主商品页对吧？你之前用page.url == '/products'判断无效，是因为Big Cartel的模板变量里，page.url的取值可能和你预期的不一样（比如可能带隐形参数，或者主题路径处理有差异），不过咱们有更可靠的判断方式！

正确的判断方法 #

Big Cartel提供了专门的模板变量来识别页面类型，或者通过对象是否存在来判断：

方法1：用page.type判断

page.type会返回当前页面的类型标识：

• 当访问/products时，page.type的值是products
• 当访问分类页（比如/category/tees）时，page.type的值是category

方法2：检查category对象是否存在

在分类页中，category变量会自动被赋值（包含当前分类的所有信息）；而在/products页中，这个变量是不存在的，所以可以用{% if category %}来判断是否处于分类页。

代码示例 #

把你原来的代码替换成下面的任意一种写法就行：

写法1（用page.type）

{% if page.type == 'products' %}
  <!-- 显示分类列表 -->
  <div class="categories-grid">
    {% for category in categories %}
      <a href="/category/{{ category.handle }}" class="category-item">
        <h3>{{ category.name }}</h3>
        {% if category.image %}
          <img src="{{ category.image | product_image_url: 'medium' }}" alt="{{ category.name }}">
        {% endif %}
        <p>{{ category.products_count }} 件商品</p>
      </a>
    {% endfor %}
  </div>
{% else %}
  <!-- 显示分类下的商品列表 -->
  <div class="products-grid">
    {% for product in products %}
      <a href="{{ product.url }}" class="product-item">
        <img src="{{ product.image | product_image_url: 'medium' }}" alt="{{ product.name }}">
        <h4>{{ product.name }}</h4>
        <p>{{ product.price | money }}</p>
      </a>
    {% endfor %}
  </div>
{% endif %}

写法2（用category对象判断）

{% if category %}
  <!-- 分类页：展示当前分类的商品 -->
  <div class="products-grid">
    {% for product in products %}
      <a href="{{ product.url }}" class="product-item">
        <img src="{{ product.image | product_image_url: 'medium' }}" alt="{{ product.name }}">
        <h4>{{ product.name }}</h4>
        <p>{{ product.price | money }}</p>
      </a>
    {% endfor %}
  </div>
{% else %}
  <!-- /products页：展示全部分类 -->
  <div class="categories-grid">
    {% for category in categories %}
      <a href="/category/{{ category.handle }}" class="category-item">
        <h3>{{ category.name }}</h3>
        {% if category.image %}
          <img src="{{ category.image | product_image_url: 'medium' }}" alt="{{ category.name }}">
        {% endif %}
        <p>{{ category.products_count }} 件商品</p>
      </a>
    {% endfor %}
  </div>
{% endif %}

小提示 #

你需要在Luna主题的模板文件中修改，通常对应的是products.liquid或者index.liquid（取决于主题的结构），找到原来渲染商品列表的代码块，替换成上面的逻辑即可。还可以根据自己的需求调整分类/商品卡片的HTML结构和样式，适配你的主题设计。

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