SSkills123

Liquid 开发 · 整理与归档

产品对象详解

产品对象详解 产品对象是 Shopify Liquid 中最重要和最复杂的对象之一。它包含了商品的所有信息，包括基本属性、变体、图片、选项等。掌握产品对象的使用对于构建功能完整的电商主题至关重要。 产品基本属性 基础信息 价格信息

产品对象详解

产品对象是 Shopify Liquid 中最重要和最复杂的对象之一。它包含了商品的所有信息，包括基本属性、变体、图片、选项等。掌握产品对象的使用对于构建功能完整的电商主题至关重要。

产品基本属性

基础信息

<!-- 产品基本信息 -->
<div class="product-info" itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">{{ product.title }}</h1>
 
  <div class="product-meta">
    <p class="vendor">品牌: <span itemprop="brand">{{ product.vendor }}</span></p>
    <p class="product-type">分类: {{ product.type }}</p>
    <p class="sku" itemprop="sku">SKU: {{ product.selected_or_first_available_variant.sku }}</p>
  </div>
 
  <div class="product-description" itemprop="description">
    {{ product.description }}
  </div>
</div>

价格信息

<!-- 产品价格展示 -->
<div class="product-price" itemscope itemtype="http://schema.org/Offer">
  {% assign current_variant = product.selected_or_first_available_variant %}
 
  <meta itemprop="priceCurrency" content="{{ shop.currency }}">
  <meta itemprop="price" content="{{ current_variant.price | money_without_currency }}">
 
  {% if current_variant.compare_at_price > current_variant.price %}
    <span class="price-compare">
      原价: <s>{{ current_variant.compare_at_price | money }}</s>
    </span>
    <span class="price-current sale">
      现价: {{ current_variant.price | money }}
    </span>
    <span class="price-save">
      节省: {{ current_variant.compare_at_price | minus: current_variant.price | money }}
      ({{ current_variant.compare_at_price | minus: current_variant.price | times: 100 | divided_by: current_variant.compare_at_price }}% OFF)
    </span>
  {% else %}
    <span class="price-current">
      {{ current_variant.price | money }}
    </span>
  {% endif %}
 
  {% comment %} 价格范围显示 {% endcomment %}
  {% unless product.has_only_default_variant %}
    <div class="price-range">
      {% if product.price_varies %}
        <span>价格范围: {{ product.price_min | money }} - {{ product.price_max | money }}</span>
      {% endif %}
 
      {% if product.compare_at_price_varies %}
        <span>原价范围: {{ product.compare_at_price_min | money }} - {{ product.compare_at_price_max | money }}</span>
      {% endif %}
    </div>
  {% endunless %}
</div>

库存状态

<!-- 库存信息 -->
<div class="product-availability">
  {% assign current_variant = product.selected_or_first_available_variant %}
 
  {% if current_variant.available %}
    <span class="in-stock" itemprop="availability" content="http://schema.org/InStock">
      {% if current_variant.inventory_management %}
        {% if current_variant.inventory_quantity > 0 %}
          有库存 ({{ current_variant.inventory_quantity }} 件)
        {% else %}
          有库存
        {% endif %}
      {% else %}
        有库存
      {% endif %}
    </span>
  {% else %}
    <span class="out-of-stock" itemprop="availability" content="http://schema.org/OutOfStock">
      缺货
    </span>
  {% endif %}
 
  {% comment %} 低库存警告 {% endcomment %}
  {% if current_variant.inventory_quantity <= 5 and current_variant.inventory_qu...

调试和测试

产品数据调试

<!-- 产品调试信息 -->
{% if request.design_mode %}
  <div class="product-debug" style="margin-top: 2rem; padding: 1rem; background: #f5f5f5; font-family: monospace; font-size: 12px;">
    <h4>产品调试信息</h4>
 
    <div><strong>基本信息:</strong></div>
    <ul>
      <li>ID: {{ product.id }}</li>
      <li>Handle: {{ product.handle }}</li>
      <li>Title: {{ product.title }}</li>
      <li>Vendor: {{ product.vendor }}</li>
      <li>Type: {{ product.type }}</li>
      <li>Available: {{ product.available }}</li>
      <li>Created: {{ product.created_at | date: '%Y-%m-%d %H:%M' }}</li>
      <li>Updated: {{ product.updated_at | date: '%Y-%m-%d %H:%M' }}</li>
    </ul>
 
    <div><strong>价格信息:</strong></div>
    <ul>
      <li>Price: {{ product.price | money }}</li>
      <li>Compare at price: {{ product.compare_at_price | money }}</li>
      <li>Price varies: {{ product.price_varies }}</li>
      <li>Price min: {{ product.price_min | money }}</li>
      <li>Price max: {{ product.price_max | money }}</li>
    </ul>
 
    <div><strong>变体信息:</strong></div>
    <ul>
      <li>Variants count: {{ product.variants.size }}</li>
      <li>Has only default variant: {{ product.has_only_default_variant }}</li>
      <li>Options: {{ product.options | join: ', ' }}</li>
    </ul>
 
    <div><strong>媒体信息:</strong></div>
    <ul>
      <li>Images count: {{ product.images.size }}</li>
      <li>Featured image: {% if product.featured_image %}{{ product.featured_image.alt }}{% else %}None{% endif %}</li>
    </ul>
 
    <div><strong>分类信息:</strong></div>
    <ul>
      <li>Collections: {{ product.collections | map: 'title' | join: ', ' }}</li>
      <li>Tags: {{ product.tags | join: ', ' }}</li>
    </ul>
  </div>
{% endif %}

下一步学习

现在您已经掌握了产品对象的详细使用，建议继续学习：