Shopify二次开发之三:liquid语法学习(访问Objects和Schema数据模型)

本文主要是介绍Shopify二次开发之三:liquid语法学习(访问Objects和Schema数据模型),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

Objects (对象)

全局对象

all_products:商店中所有的商品

articles: 商店中的所有文章

collections:商店中所有的集合

模板对象

在product.json(配置的section中) 访问product对象

在collection.json中可访问collection对象

在article.json中可访问article对象

schema

基本input settings : text、textarea、range、radui、select等等

特定input settings 

settings_schema.json(config文件夹)


在前面几章讲到shopify的项目结构,也讲到了如何像其他编程语言一样声明变量、条件判断、循环、使用filters等等,唯独没有讲到如何在模板中渲染数据,本次配合前几章还有官方文档讲解如何在模板中访问数据。

官方文档:Liquid objects

Objects (对象)

在shopify中有能全局访问的对象和能在页面中访问的对象以及在section schema配置的特定模型对象settings_schema.json中配置的模型对象

全局对象

有如上Global表示该对象能全局访问,例如

all_products:商店中所有的商品
{{ all_products['black-leather-bag'].title }}

可以通过句柄去访问指定的product

articles: 商店中的所有文章
{{ articles['testing/my-first-blog'].title }}

可以通过句柄去访问指定的article

collections:商店中所有的集合

可直接循环遍历

{% for collection in collections %}{{- collection.title | link_to: collection.url }}
{% endfor %}

也可通过句柄去访问指定collection

{% for product in collections['spring'].products %}{{- product.title | link_to: product.url }}
{% endfor %}

模板对象

shopify有指定的页面模板,比如集合列表模板(Collections List)、商品集合模板(Collections)、文章模板(Blog posts)、商品模板(Products)等等

在product.json(配置的section中) 访问product对象
{% form 'product', product %}<select name="id">{% for variant in product.variants %}<option value="{{ variant.id }}">{{ variant.title }}</option>{% endfor %}</select><button type="submit">Add to cart</button>
{% endform %}
在collection.json中可访问collection对象
<h1>{{ collection.title }}
</h1>
在article.json中可访问article对象
<h1>{{ article.title }}</h1>

另外在page.json访问page对象、在search.json中访问search对象等等

schema

以下是schema配置和input settings的官方文档

Section schema

Input settings

在section中配置schema的settings中的模型值有两种类型,一种是基本input settings,还有特定input settings

基本input settings : text、textarea、range、radui、select等等
    {"type": "checkbox","id": "checkbox","label": "sel","default": true},{"type": "radio","id": "radio","label": "Radio","options": [{"value": "left","label": "Left"},{"value": "centered","label": "Centered"}],"default": "left"},{"type": "range","id": "font_size","min": 12,"max": 24,"step": 1,"unit": "px","label": "Font size","default": 16}

在模板中访问之前, 需要了解一下页面组成, 页面由特定xxx-group和template模板组成,每一个template模板都由section组成,每一个section也可以有若干block。

section对象有配置的settings,有blocks,还有唯一id等

通过section.settings.[id]去访问配置的模型值

{% assign radio = section.settings.radio %}
{% assign font_size = section.settings.font_size %}
<div>radio value: {{ radio  }}</div>
<div>font_size value: {{ font_size }}</div>
特定input settings 

包括blog、article、collection、collection_list、product、image_picker等等

基本的input settings渲染的值是基本数据,特定input settings如果是一个对象,则需要查阅文档去查阅相关对象。

比如article:

    {"type": "header","content": "type article"},{"type": "article","id": "article","label": "Article"}

shopify商城后台customize


article对象

访问article

{% assign article = section.settings.article %}
<div>{{ article.title }}</div>
<div>{{ article.content }}</div>

比如block:

block里的settings和schema设置的settings是完全一样的

  "blocks": [{"name": "Slide","type": "slide","settings": [{"type": "image_picker","id": "image","label": "Image"}]}],

block对象

访问block

  <div class="slide">{% for block in section.blocks %}{% case block.type %}{% when 'slide' %}{% assign image_url = block.settings.image | image_url %}<div class="img"><img width="100%" height="100%" src="{{ image_url }}/"></div>{% endcase %}{% endfor %}</div>

settings_schema.json(config文件夹)

在模板中访问

{{ settings.color_page_bg }}

这篇关于Shopify二次开发之三:liquid语法学习(访问Objects和Schema数据模型)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/449103

相关文章

Python正则表达式语法及re模块中的常用函数详解

《Python正则表达式语法及re模块中的常用函数详解》这篇文章主要给大家介绍了关于Python正则表达式语法及re模块中常用函数的相关资料,正则表达式是一种强大的字符串处理工具,可以用于匹配、切分、... 目录概念、作用和步骤语法re模块中的常用函数总结 概念、作用和步骤概念: 本身也是一个字符串,其中

Mysql用户授权(GRANT)语法及示例解读

《Mysql用户授权(GRANT)语法及示例解读》:本文主要介绍Mysql用户授权(GRANT)语法及示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql用户授权(GRANT)语法授予用户权限语法GRANT语句中的<权限类型>的使用WITH GRANT

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Java使用ANTLR4对Lua脚本语法校验详解

《Java使用ANTLR4对Lua脚本语法校验详解》ANTLR是一个强大的解析器生成器,用于读取、处理、执行或翻译结构化文本或二进制文件,下面就跟随小编一起看看Java如何使用ANTLR4对Lua脚本... 目录什么是ANTLR?第一个例子ANTLR4 的工作流程Lua脚本语法校验准备一个Lua Gramm

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

Python基础语法中defaultdict的使用小结

《Python基础语法中defaultdict的使用小结》Python的defaultdict是collections模块中提供的一种特殊的字典类型,它与普通的字典(dict)有着相似的功能,本文主要... 目录示例1示例2python的defaultdict是collections模块中提供的一种特殊的字

java之Objects.nonNull用法代码解读

《java之Objects.nonNull用法代码解读》:本文主要介绍java之Objects.nonNull用法代码,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录Java之Objects.nonwww.chinasem.cnNull用法代码Objects.nonN

C++ 中的 if-constexpr语法和作用

《C++中的if-constexpr语法和作用》if-constexpr语法是C++17引入的新语法特性,也被称为常量if表达式或静态if(staticif),:本文主要介绍C++中的if-c... 目录1 if-constexpr 语法1.1 基本语法1.2 扩展说明1.2.1 条件表达式1.2.2 fa

使用Dify访问mysql数据库详细代码示例

《使用Dify访问mysql数据库详细代码示例》:本文主要介绍使用Dify访问mysql数据库的相关资料,并详细讲解了如何在本地搭建数据库访问服务,使用ngrok暴露到公网,并创建知识库、数据库访... 1、在本地搭建数据库访问的服务,并使用ngrok暴露到公网。#sql_tools.pyfrom

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx