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 }}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/196122.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1D和2D布朗运动matlab

布朗运动是一种随机现象&#xff0c;下面的M函数brwnm2.m给出了二维Brown运动&#xff0c;其中[t0,tf]是时间区间&#xff0c;h是采样步长&#xff0c;w(t)&#xff0c;z(t)是布朗运动。function [t,w,z]brwnm2(t0,tf,h) tt0:h:tf; xrandn(size(t))*sqrt(h); yrandn(size(t))*s…

二叉树题目:二叉树的完全性检验

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;二叉树的完全性检验 出处&#xff1a;958. 二叉树的完全性检验 难度 5 级 题目描述 要求 给定一个二叉树的根结点 root \texttt{root} root&…

C#中GDI+图形图像技术(Graphics类、Pen类、Brush类)

目录 一、创建Graphics对象 1.创建Pen对象 2.创建Brush对象 &#xff08;1&#xff09;SolidBrush类 &#xff08;2&#xff09;HatchBrush类 ​​​​​​​&#xff08;3&#xff09;LinerGradientBrush类 用户界面上的窗体和控件非常有用&#xff0c;且引人注目&#…

销售人员一定要知道的6种获取电话号码的方法

对于销售来说&#xff0c;电话销售是必须要知道的销售方法&#xff0c;也是销售生涯中的必经之路。最开始我们并不清楚这么电话是从哪里来的&#xff0c;也不清楚是通过哪些方法渠道获取。那么今天就来分享给各位销售人员获取客户电话号码的方法。 1.打印自己的名片&#xff0…

一文读懂 ChatGPT 工作原理

生成式 AI 是如何工作的 生成式 AI 是目前最热门的技术之一&#xff0c;ChatGPT 等应用的出现使人们对于如何在各种领域中应用生成式 AI 有了许多新的思考。 但这些领域的从业者并不都具备 AI 相关的知识背景。所以我们制作了这个教程&#xff0c;向无 AI 知识背景的读者介绍…

Temu数据面板:Temu商家必备的数据分析工具

在Temu这个电商平台上&#xff0c;越来越多的商家意识到数据分析的重要性。数据分析可以帮助商家更好地了解店铺的运营情况&#xff0c;从而制定更有效的运营策略&#xff0c;提高销售业绩。而在这个过程中&#xff0c;Temu数据面板成为了一个不可或缺的工具。 先给大家推荐一款…

【ElementUI】一行代码解决图片预览

【ElementUI】一行代码解决图片预览 只需要在图片标签上加入:preview-src-list 只需要在图片标签上加入:preview-src-list 完整代码如下&#xff1a; <el-table-column label"封面" align"center" prop"cover" :sort-orders"[descend…

IDEA 保存自动ESLint格式化

作为后端人员&#xff0c;偶尔修改一下前端代码&#xff0c;ESLint总提示格式不正确。有没有什么办法实现自动格式化呢&#xff1f; 安装插件Save Actions Tool 设置中搜索eslint 勾选 Run eslint --fix on save 这样以后&#xff0c;只要保存文件就会自动格式化了。 参考 …

协同过滤算法:个性化推荐的艺术与科学

目录 引言&#xff1a; 一、协同过滤算法的基本原理 二、协同过滤算法的应用领域 三、协同过滤算法的优缺点 四、协同过滤算法的未来发展方向 五、结论 引言&#xff1a; 在当今数字化时代&#xff0c;信息过载成为了一个普遍的问题。为了帮助人们更好地发现符合个性化需…

HTTP 和 HTTPS的区别

一、HTTP 1.明文传输&#xff0c;不安全 2.默认端口号&#xff1a;80 3.TCP三次握手即可 二、HTTPS 1.加密传输&#xff0c;更安全(在HTTP层与TCP层之间加上了SSL/TTL安全协议) SSL和TTL是在不同时期的两种叫法&#xff0c;含义相同。 2.默认端口号&#xff1a;443 3.TCP三…

【广州华锐互动】风电场检修VR情景模拟提供接近真实的实操体验

风电场检修VR情景模拟系统由广州华锐互动开发&#xff0c;这是一种新兴的培训方式&#xff0c;它通过虚拟现实技术将风力发电场全范围进行1:1仿真建模还原&#xff0c;模拟监视风力发电场各种运行工况下的运行参数和指标&#xff0c;同时可进行升压站系统的巡视&#xff0c;倒闸…

Windows系列:Zabbix agent一键部署-windows版本(windows 安装zabbix客户端安装、bat文件修改文件内容)

Zabbix agent一键部署-windows版本&#xff08;windows 安装zabbix客户端安装、bat文件修改文件内容&#xff09; 一. Zabbix agent一键部署-windows版本二. windows 安装zabbix客户端安装1.下载安装zabbix agent2.配置zabbix agent2.1 修改配置文件2.2 将zabbix agent安装为wi…

同旺科技 USB TO SPI / I2C --- 调试W5500_TCP Client接收数据

所需设备&#xff1a; 内附链接 1、USB转SPI_I2C适配器(专业版); 首先&#xff0c;连接W5500模块与同旺科技USB TO SPI / I2C适配器&#xff0c;如下图&#xff1a; 发送数据6个字节的数据&#xff1a;0x11,0x22,0x33,0x44,0x55,0x66 在专业版调试软件中编辑指令&#xff0c…

【PyTorch】多层感知机

文章目录 1. 模型和代码实现1.1. 模型1.1.1. 背景1.1.2. 多层感知机1.1.3. 激活函数 1.2. 代码实现1.2.1. 完整代码1.2.2. 输出结果 2. Q&A 1. 模型和代码实现 1.1. 模型 1.1.1. 背景 许多问题要使用线性模型&#xff0c;但无法简单地通过预处理来实现。此时我们可以通过…

智能联动第三方告警中心,完美实现故障响应全闭环

前言 我们曾讨论完善的告警策略是整个数据监控系统的重要组成部分&#xff08;参见《机智的告警策略&#xff0c;完善监控系统的重要一环》&#xff09;&#xff0c;介绍了如何配置告警通知以及场景示例&#xff0c;帮助用户及时更多潜在的故障和问题&#xff0c;有效地保障系…

Redis 之 ZSET 实战应用场景,持续更新!

前言 大白话介绍 Redis 五大基本数据类型之一的 ZSET 开发中常见的应用场景 ZSET 介绍 ZSET 与 SET 相同点&#xff1a;都是是 String类型元素的集合&#xff0c;且不允许重复的成员ZSET 与 SET 不同点&#xff1a;ZSET 每个元素都会关联一个 Double 类型的分数&#xff0c;Re…

Latex去掉参考文献后面的参考文献所在页(去掉参考文献的反向超链接)

如下&#xff1a; 在使用latex插入参考文献的时候&#xff0c;最后面总是会出现这种代号。这是表明的是这条参考文献所在的页码&#xff0c;并且点击之后可以跳转到该页。正式来讲&#xff0c;这个叫超链接的BACKREF。若要去掉&#xff0c;只需要在引用hyperref的时候去掉page…

技术or管理?浅谈软件测试人员的未来职业发展,值得借鉴

我们在工作了一段时间之后&#xff0c;势必会感觉到自己已经积累了一些工作经验了&#xff0c;会开始考虑下一阶段的职业生涯会如何发展。测试人员在职业生涯中的不确定因素还是不少的&#xff0c;由于其入门门槛不高&#xff0c;不用学习太多技术性知识即可入行&#xff0c;所…

Net8 EFCore Mysql 连接

一、安装插件 Pomelo.EntityFrameworkCore.MySq (这里要选8.0.0以上版本低版本不支持.net8) 二、配置数据库连接串 appsettings.json 中配置数据库连接串 "ConnectionStrings": {"Connection": "server172.18.2.183;port3306;databasestudents;uid…

使用opencv将8位图像raw数据转成bmp文件的方法

作者&#xff1a;朱金灿 来源&#xff1a;clever101的专栏 为什么大多数人学不会人工智能编程&#xff1f;>>> 这里说的图像raw数据是只包含图像数据的缓存。主要使用了cv::imencode接口将 cv::Mat转化为图像缓存。 #include <opencv2/opencv.hpp>/* 生成一幅…