Shopify Liquid语言基础知识-1

基础

标签(tag)

{{ code }} ：仅仅输出数据，用于逻辑较少的liquid代码。

{% code %} ：可以用于任何情况，用于其他作用：

• 在liquid对象和数组中循环。
• 创建新的命名变量。
• 包括“snippets”和链接“sections”。
• for循环。
• if/else语句（条件句）

示例：

{% for product in collection.products %} 
	{{ product.title }} 
{% endfor %}

上面的循环将循环遍历集合中的产品，并运行代码块中的任何内容。在上面的示例中，它将输出产品的标题。

{%- code -%} ：与{% code %}类似，但是防止标签在输出文档中生成空白。

对象与属性(objects and attributes)

对象包含用于在页面上显示动态内容的属性。对象还可以包含其他对象。

对象在liquid中可迭代，类似数组。有时可以在没有属性的情况下调用对象并接收单个值。

liquid中充满了对象。

过滤器(filters)

过滤器用于调整字符串、数字、变量和对象的输出。

在其他编程语言中，这些作用通过方法实现。但是liquid中无法创建自己的方法和作用。

过滤器总是以 | 开头，可以像这样串在一起：

{{ product.title | upcase | remove: "AWESOME"  }}

对于上述代码，如果是product.title之前是“Awesome Shoes”，输出的是“SHOES”。

liquid中的一切都可以用标签、对象和过滤器来概括。

liquid对象

如果我们认为Liquid是访问和显示存储数据的方式，那么对象就是我们在Shopify主题中访问数据的方式。

下面是2个官方文档没有的概念，用于加强理解：

概念1：对象“样式”

在其他编程语言中，对象看起来像这样

person = { first_name: "Chris", last_name: "Dodd", age: 27 }

但在liquid中，对象可以返回单个值、一组值或一组键/值对。这就是为什么我把这个对象分成不同的样式。

类似数组的对象

这些“对象”被称为Liquid中的对象，但它们的操作更像数组。

• 有些可以迭代，有些不能。
• 有些可以通过句柄访问它们的“项”，但只有当这样的句柄存在时（类似于PHP中关联数组的工作方式）。

但是，作为一个整体，这些对象包含其他对象的集合（数组）。

比如：

• Pages
• Blogs
• Articles
• Images

请注意，这些都是复数名称，表明这些对象包含一组值。

单个值的对象

这些对象只有一个值，通过调用对象本身输出。

比如：

• Canonical_url
• Current_page
• Handle

传统样式的对象

传统样式对象是包含属性的对象，而属性又包含可以是任何类型的数据类型（如字符串、数组和其他对象）的值。类似Javascript）中的对象。

比如：

• Product
• Customer
• Page
• Collection
• Article

下面是一个包含了所有样式的例子：

{% for product in collection.products %} 
	{{ product.handle }} 
{% endfor %}

上面代码段里，collection是传统样式的对象，products是类似数组的对象，handle是单一值对象。

概念2：对象嵌套和范围

虽然官方文件对liquid中的大多数对象进行了详细说明，但它往往无法告诉我们这些对象在哪里，它不会告诉你在你的主题中你在哪里可以访问它，或者你会发现它嵌套在哪些对象之下。

有些对象可以从主题中的任何地方访问，但大多数都是特定于某些模板的，这就是为什么我决定在Liquid中浏览每个对象，并自己找出答案。

对象引用

让我们浏览一下Shopify文档中列出的所有对象，并进一步了解它们，按范围、嵌套和样式对它们进行分类。

注：我不会讨论所有的单独属性（因为Shopify在这方面已经做得很好了）

全局对象(Global Objects)

在主题中的任何位置都可以使用以下对象。

all_products

全局、类似数组、不可迭代

all_products是一个不可迭代的类似数组的对象。它用于从主题内的任何地方访问任何产品。

虽然all_products对象包含一个对象集合（类似数组），但实际上不能在它们之间循环（无法迭代）。相反，可以使用要访问的特定产品的handles从 all_products访问特定产品。

例如：

{{ all_products['wayfarer-shades'].title }}

上面的代码是输出所有句柄是wayfarer-shades的产品的标题。

【

对象的句柄(Object handles)

handles用于访问liquid对象的属性。Shopify中的大多数对象（products, collections, blogs, articles, menus）都有handles。例如，标题为“About Us”的页面可以通过其句柄about-us在Liquid中访问。

<!-- the content of the About Us page -->
{{ pages.about-us.content }}

默认情况下，句柄是对象的标题的小写，任何空格和特殊字符都由连字符（-）替换。

标题为“Shirt”的产品会自动获得句柄shirt。如果已经有带有句柄shirt的产品，句柄将自动增加。所有在第一个之后创建的“Shirt”产品都将获得像shirt-1、shirt-2等句柄。

句柄是怎样创建的？

标题中的空白被句柄中的连字符替换。

如果标题包含多个连续空格或特殊字符，则它们将被一个连字符替换。空格和特殊字符从控制柄的开始和结束处修剪。例如：70% cocoa sweet & salty bites!!!  的句柄是：70-cocoa-sweet-salty-bites 。

句柄还决定对象的URL。例如，如果一个页面的句柄是about-us，则这个页面的url是http://yourshop.myshopify.com/pages/about-us  。商店设计通常依赖于页面、产品和菜单的静态句柄。为了保留设计元素并避免断开链接，如果修改对象的标题，Shopify不会自动更新句柄。

例如，如果将页面标题从About Us改成了About Shopify，句柄将仍然是about-us 。

通过更改URL和句柄框的值，可以手动更改对象的句柄。

访问句柄属性

在许多情况下，你可能知道一个对象的句柄，要访问这个对象的属性时，可以通过将对象的名称复数化来访问其属性，然后使用方括号（[]）或点（.）符号。

{{ pages.about-us.title }}
{{ pages["about-us"].title }}

输出：

About Us
About Us

还可以使用此符号传入主题编辑器对象。对于主题设计师来说，这很方便，他们想让主题的用户能够选择在主题中显示哪些内容。

{% for product in collections[settings.home_featured_collection].products %}
    {{ product.title }}
{% endfor %}

输出：

Awesome Shoes
Cool Shirt
Wicked Socks

】

pages

全局、类似数组、不可迭代

可以通过页面句柄从主题中的任何位置访问特定页面。

顺便说一句，您可以使用方括号语法（如上）或点语法（如下）通过其句柄访问资源（例如页面、产品或图像）

<h1>{{ pages.about.title }}</h1>

blogs

全局、类似数组、不可迭代

可以通过句柄访问博客：

<h1>{{ blogs.myblog.title }}</h1>

上面的代码将输出带有句柄“myblog”的博客标题。

articles 

 全局、类似数组、不可迭代

可以用句柄访问。

images

全局、类似数组、不可迭代

可以通过其文件名访问商店中的任何图像（类似于使用其句柄访问其他资源的方式）。

collections

全局、类似数组、可迭代

与前面提到的所有全局对象不同，除了使用collections对象通过其句柄访问特定集合外，还可以循环访问商店中所有可用的集合。

{% for collection in collections %} 
	{{ collection.title }} 
{% endfor %}

上面的代码将循环遍历商店中的所有集合，并输出每个集合的标题。

linklists & links

全局、类似数组、可迭代

Linklists代表在在线商店admin的“导航”部分设置的菜单结构。

你可能想知道为什么Shopify不只是把这个对象称为“menu”，而是把它称为“linklist”，这有助于你更开放地思考这些类似数组的对象。

也许在将来，您可能希望显示一个链接列表，这些链接不一定是“菜单”，而linklist对象也允许您这样做。

就像collection对象一样，可以在linklists上循环，或者通过其句柄访问特定的linklist。一旦进入一个linklist，你就可以通过它的links属性访问它的链接，这将给你一个可循环的列表。

然而，linklists和links的棘手之处在于，单个link也可以附加一个links对象，这就是如何访问该link中的sub-links（注意：这在Shopify中仅限于三层）。

对于这些嵌套的子链接，一个常见的约定是将第二层链接标记为“childlinks”，将第三层链接标记为“grandchildlinks”，以便于理解。

{% for linklist in linklists %} 
	<div> 
    	<h2>{{ linklist.title }}<h2> 
        <ul> 
        	{% for link in linklist.links %} 
            	<li> 
                	<a href="{{ link.url }}">{{ link.title }}</a> 
                	<ul> 
                    	{% for childlink in link.links %} 
                        	<li>
                            	<a href="{{ childlink.url }}">{{ childlink.title }}</a> 
                                <ul> 
                                    {% for grandchildlink in childlink.links %} 
                                        <li>
                                        	<a href="{{ grandchildlink.url }}">{{ grandchildlink.title }}</a>
                                        </li> 
                                    {% endfor %} 
                                </ul>
                            </li> 
                        {% endfor %} 
                    </ul>
                </li> 
             {% endfor %} 
         </ul>
    </div> 
{% endfor %}

从上面可以看到，当你有三层菜单时，嵌套会变得非常繁忙。

request

全局、传统样式

请求对象是一个简单的帮助对象，可以让你访问客户访问的域、用户的shop_locale（即语言）以及当前页面的路径。

【来自官方文档：

request对象返回有关用于访问商店的URL和正在访问的页面的信息。

request.design_mode

是否从主题编辑器发出request。

可以使用request.design_mode以禁用主题编辑器中不希望出现的行为。

例如：

{% if request.design_mode %}
  <!-- This will only render in the theme editor -->
{% endif %}

警告：您不应该使用这些方法来更改主题编辑器中显示的店面预览。在大多数情况下，商家在主题编辑器中看到的预览应该与其客户在live store上看到的内容相匹配。
此变量的一个用例是防止主题编辑器会话数据包含在任何页面跟踪脚本中。另一个用例是使用第三方API，该API会将任何错误返回并输出到主题编辑器，但不会输出到live store。

request.host

可以使用request.host检查客户从哪个域访问。

{{ request.host }}

输出：
your-store.myshopify.com

例如，如果你有多个域，则可以根据请求显示不同的问候语：

{% if request.host == 'myshop.com' %}
  Welcome USA!
{% elsif request.host == 'myshop.ca' %}
 Welcome Canada!
{% else %}
  Welcome!
{% endif %}

request.locale

返回网站的locale。

{{ request.locale.name }}

输出：
English

request.origin

返回当前请求的方案和主机。

{{ request.origin }}

输出：
https://your-store.myshopify.com

request.path

返回当前页面的路径。

request.path仅返回现有页面的URL。如果URL不存在，则必须使用JavaScript检索完整的URL。

{{ request.path }}

输出：
/collections/classics/products/chambray-shirt

request.page_type

返回当前页面的类型。以下是不同的页面类型：

• 404
• article
• blog
• cart
• collection
• list-collections
• customers/account
• customers/activate_account
• customers/addresses
• customers/login
• customers/order
• customers/register
• customers/reset_password
• gift_card
• index
• page
• password
• product
• search

】

scripts

全局、传统样式

如果你的商店位于Shopify的“Shopify Plus”层，你可以访问所谓的“脚本”。

脚本用于创建应用于购物车的折扣和/或自定义客户可用的装运和付款选项。

难点，之后再学习。

settings

全局、传统样式

全局settings对象允许你访问商店已发布主题的设置。

设置是通过主题中的settings_schema.json文件定义的。存储的值在settings_data.json文件里。

这与附加到特定部分的settings对象不同。

cart

全局、传统样式

cart对象在Shopify主题中的任何位置都可以使用，顾名思义，它包含你可能需要访问的有关购物车的所有信息（例如所有购物车项目和总价）。

【官方文档：

cart对象有以下属性：

cart.attributes

cart.attributes允许在购物车页面上捕获更多信息。这是通过使用以下语法为input提供name属性来实现的：

attributes[attribute-name]

可以向属性名称添加双下划线（_ _）前缀，使其成为私有属性。私有属性的行为与其他购物车属性类似，只是它们不能从Liquid或Ajax API中读取。可以将它们用于不影响页面呈现的数据，从而实现更有效的页面缓存。

下面是一个基本示例，说明如何使用“text”类型的HTML input来捕获购物车页面上的信息。还可以使用Shopify UI elements generator创建cart.attributes input。

<label>What is your Pet's name?</label>
<input type="text" name="attributes[your-pet-name]" value="{{ cart.attributes.your-pet-name }}" />

cart.attributes可以在订单电子邮件模板、结帐的订单状态页面以及订单打印机等应用程序中访问属性。

{{ attributes.your-pet-name }}

输出：
Haku

cart.cart_level_discount_applications

返回购物车的任何购物车特定discount applications的数组。

{% for discount_application in cart.cart_level_discount_applications %}
  Discount name: {{ discount_application.title }}
  Savings: -{{ discount_application.total_allocated_amount | money }}
{% endfor %}

输出：
Discount name: SUMMER16
Savings: -$20.00

】

未完待续。。