从零开始开发Shopify主题：（4）调用自定义配置- Starterknow

在上一篇文章中，我们知道了如何使用配置文件自定义主题，以允许商店所有者自己更改Shopify主题。如上所述，这些设置会在用户单击管理面板的在线商店>主题部分中的自定义主题按钮时显示，并在主题开发文件的config / settings_schema.json文件中定义。

在这篇文章中，我们将了解如何访问这些设置并在开发主题时调用它们。

调用配置

要调用模板中的配置信息，需要使用 liquid 语言。可以使用{%%}逻辑标签和{{}}显示标签。在这两种标签里，都可以使用settins.id，其中id就是配置中定义的属性。比如配置文件里是这样写的：

[ { "name" : "颜色", "settings" : [ { "type": "color", "id": "color_background", "label": "背景颜色", "default": "#e5e5e5", "info" : "这个将调整背景颜色" }, { "type": "color", "id": "color_body_text", "label": "内容文字颜色", "default": "#2980b9", "info" : "这个将调整内容文字颜色" } ] } ]

你可以这样调用背景颜色：

{{ settings.color_background }}

常规配置类型

常规配置类型包括：text, textarea, image, radio, select, checkbox。每种类型都允许用户选择来修改模板。这些配置用一组liquid标签来调用。{{}}将会把信息显示在页面上。

{{ settings.your_id }}

{%%}可以把配置信息用于逻辑处理上。

 {% if settings.product_order == true %} <p>可以下单!</p> {% else %} <p>不能下单 :(</p> {% endif %}

特殊设置类型

特殊设置类型包括：color, font, collection, product, blog, page, link_list, snippet。要调用他们，比常规配置稍微复杂一些。

color和font和上面的调用方式相同，如果你在页面上直接调用，那么它将在页面上显示16进制，然而对于我们来说并没有什么卵用，我们需要在样式表中调用这个才有意义，比如将我们的sass文件保存成application.scss.liquid，就可以使用liquid语法来调用它。

body{ background-color: #{'{{ settings.color_background }}'} }

注意：这里用#{''}包裹。

同样，字体也可以用这种方式调用：

body { font-family: #{'{{ settings.header_font }}'}; }

Collections

collections的调用方式会更复杂一些，首先要注意的是，当你将设置的类型为Collections是，选择面板中将显示用户的collections下拉列表，其中包括已经在商店中定义的所有Collections。这意味着必须至少已经定义了2个集合。其次，需要知道shopify都有哪些特殊配置的标签，这里有个表 http://cheat.markdunkley.com/，可以方便查看。

比如，我们在这里找到了collection.liquid部分，上面有用什么标签全局访问。

collections['the-handle'].variable

这里，the-handle是集合的名称，或者说是集合的slug。在settings_schema.json配置文件中，id的名称将定于这个属性。比如：

 [ { "name": "Collection", "settings" : [ { "type": "collection", "id": "feature_collection", "label": "Feature collection" } ] } ]

那么就这样调用：

{{ collections[settings.feature_collection] }}

但是，上面的代码只会显示为CollectionDrop。为了获得有意义的东西，需要选择集合的属性（可在http://cheat.markdunkley.com/上获得），例如标题或产品。

{{ collections[settings.feature_collection].title }}

您可能还想访问该集合中每个产品的信息。这可以通过引用集合上的products属性然后循环遍历这些来轻松实现。

{% for product in collections[settings.feature_collection].products %} <p>{{ product.title }} | {{ product.price }}</p> {% endfor %}

通过liquid循环语句，可以把集合中的每个产品遍历出来，并显示产品的标题和价格。

Products

产品和集合的使用方式类似，查一下表，看看如何调用这个products。

all_products['the-handle'].variable

注意这里是all_products，而不是products。所以，这样调用产品的标题和价格：

{{ all_products[settings.feature_product].title }} | {{ all_products[settings.feature_product].price }}

如果要调用产品的头图，这样来。

<img src="{{ all_products[settings.feature_product].featured_image | img_url: 'small' }}" alt="{{ all_products[settings.feature_product].title }}">

这样，我们就知道如何调用shopify中配置信息了，更多特殊标签使用，可以参考上面那个表。

原文链接：https://blog.csdn.net/8665048/article/details/96278356?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167193311916800192284214%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=167193311916800192284214&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-13-96278356-null-null.blog_rank_default&utm_term=Shopify

你可能感兴趣

从零开始开发Shopify主题：（4）调用自定义配置

调用配置

常规配置类型

特殊设置类型

Collections

Products

优化shopify:不使用app的情况下在Shopify添加公告栏(带计算包邮门槛)

从零开始开发Shopify主题：（3）自定义配置文件

shopify电商判断用户来自哪个国家判断ip地址

shopify二次开发及目录详解

shopify 属性添加图片及样式

判断浏览器信息，及当前浏览网页使用的设备

订单30分钟未支付，则自动取消，该怎么实现？

Shopify免费产品评价应用 Product Review安装和设置教程

Bing UET Tag 全局+赋值代码安装步骤（Shopify建站）

优化Shopify移动手机端界面优化美化（添加快捷导航栏/快捷菜单)详解使用教程

联系我们

从零开始开发Shopify主题：（4）调用自定义配置

调用配置

常规配置类型

特殊设置类型

Collections

Products

相关文章：

相关推荐

请登录

联系我们