Shopify 如何通过 Liquid 实现多样化的产品展示？

最近公司负责的一个shopify二次开发的项目，客户提出了希望我们基于Liquid实现多样化的产品展示的需求，经过开发部门的集体讨论与学习，总结出了本文的内容分享给大家。另外，如果想要了解更多shopify二次开发的系统学习，这里也一并分享给大家，聪明的你一定知道怎么去学习了吧，下面的图片作为展示，测试一下你的智商，如果能找到我们的秘密基地，那么你的智商一定在180以上哦~

---

Shopify中利用Liquid模板语言打造多样化产品展示

一、理解Liquid基础与核心概念

在Shopify中，Liquid是核心的模板语言，它允许开发者通过标签（Tags）、对象（Objects）、过滤器（Filters）和变量（Variables）来访问和操作商店的数据。这些数据涵盖了产品、客户、订单等信息，为实现动态页面内容提供了强大支持。

在使用Liquid时，理解以下几个核心概念尤为重要：

• Tags：控制逻辑的语法，比如循环（for）、条件判断（if）等。
• Objects：存储数据的变量，比如product、collection等。
• Filters：用于对输出内容进行格式化和处理，比如价格转换、图片尺寸调整等。
• Variables：保存和引用数据的命名，比如product.title表示产品的标题。

以下代码展示了如何在页面中输出产品标题、价格和图片：

<h1>{{ product.title }}</h1>
<p>{{ product.price | money }}</p>
<img src="{{ product.featured_image.src | img_url: '500x500' }}" alt="{{ product.title }}">

二、构建灵活的产品列表页面

1. 使用for循环展示产品集合

for循环是Liquid中展示产品列表的主要工具，通过它可以遍历产品集合（如collections.all.products），并在页面上按顺序显示。例如，要在首页展示所有产品，可以用以下代码：

{% for product in collections.all.products %}
  <div class="product-item">
    <img src="{{ product.featured_image.src | img_url: 'medium' }}" alt="{{ product.title }}">
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
    <a href="{{ product.url }}" class="btn">查看详情</a>
  </div>
{% endfor %}

2. 实现定制化排序与筛选

为了更好地服务用户，可以对产品进行排序和筛选，比如按价格、销量或新品来排序。我们可以在后台将产品分配到不同的集合，或使用产品标签来实现复杂筛选。以下是一个按价格筛选的示例：

{% assign sorted_products = collections.all.products | sort: 'price' %}
{% for product in sorted_products %}
  <div class="product-item">
    <img src="{{ product.featured_image.src | img_url: 'medium' }}" alt="{{ product.title }}">
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
  </div>
{% endfor %}

可以使用条件判断来实现产品标签筛选，比如展示“新到”的产品：

{% for product in collections.all.products %}
  {% if product.tags contains 'New Arrival' %}
    <div class="product-item">
      <img src="{{ product.featured_image.src | img_url: 'medium' }}" alt="{{ product.title }}">
      <h3>{{ product.title }}</h3>
      <p>{{ product.price | money }}</p>
    </div>
  {% endif %}
{% endfor %}

三、创新产品详情页设计

1. 丰富的产品图片与视频展示

在产品详情页，我们可以通过product.images对象来展示多张产品图片。为进一步提升体验，可以将图片展示为轮播形式，还可以嵌入产品视频：

<div class="product-gallery">
  {% for image in product.images %}
    <img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}">
  {% endfor %}
</div>

<video controls>
  <source src="{{ product.media | where: 'type', 'video' | first.video_url }}" type="video/mp4">
  您的浏览器不支持视频播放。
</video>

2. 展示详细规格和多种选项

对于有多种规格的产品，可以通过product.options对象来显示规格，并列出所有可选项。这样顾客在选择时可以看到每个选项对应的价格变化：

{% for option in product.options %}
  <h4>{{ option.name }}</h4>
  <ul>
    {% for value in option.values %}
      <li>{{ value }}</li>
    {% endfor %}
  </ul>
{% endfor %}

{% for variant in product.variants %}
  <p>{{ variant.title }} - {{ variant.price | money }}</p>
{% endfor %}

四、结合Ajax与Liquid实现动态加载

为了提升用户体验，可以通过Ajax技术在页面局部更新产品信息，而无需重新加载整个页面。这种技术在多层次的筛选或分类切换中非常有用。例如，当用户选择不同类别时，可以通过Ajax请求更新页面中的产品列表。

实现步骤：

1. 设置HTML与事件监听：
   为筛选按钮添加事件监听，当用户点击按钮时触发Ajax请求。

   <button class="filter-btn" data-category="shoes">Shoes</button>
   <button class="filter-btn" data-category="hats">Hats</button>
   <div id="product-list"></div>
   

   document.querySelectorAll('.filter-btn').forEach(button => {
     button.addEventListener('click', function() {
       const category = this.getAttribute('data-category');
       fetchProducts(category);
     });
   });
   

2. 发送Ajax请求：
   使用JavaScript发送Ajax请求，向Liquid模板请求指定类别的产品数据。

   function fetchProducts(category) {
     fetch(`/collections/${category}/products`)
       .then(response => response.text())
       .then(data => {
         document.getElementById('product-list').innerHTML = data;
       });
   }
   

3. 在Liquid模板中输出筛选后的产品：
   创建一个新的Liquid模板，用于返回特定类别的产品数据。

   {% for product in collections[category].products %}
     <div class="product-item">
       <img src="{{ product.featured_image.src | img_url: 'medium' }}" alt="{{ product.title }}">
       <h3>{{ product.title }}</h3>
       <p>{{ product.price | money }}</p>
       <a href="{{ product.url }}" class="btn">查看详情</a>
     </div>
   {% endfor %}
   

五、利用Liquid进行多语言支持

如果你的Shopify商店面向不同国家的顾客，可以在Liquid中加入多语言支持，让用户能够按需切换语言。例如，可以在主题设置中定义多种语言的文本内容，然后在页面中引用这些内容。

{% assign current_language = shop.locale %}
{% if current_language == 'en' %}
  <p>Price: {{ product.price | money }}</p>
{% elsif current_language == 'fr' %}
  <p>Prix: {{ product.price | money }}</p>
{% endif %}

结语

在Shopify中使用Liquid模板语言进行产品展示和自定义页面设计，能够极大地增强用户体验。通过灵活运用Liquid的标签和过滤器，结合Ajax进行页面的局部刷新更新，可以实现更高效的动态化展示效果。掌握这些技巧后，您将能够根据需求为顾客提供更加个性化的购物体验，有效提升店铺的竞争力和用户留存率。