shopify二次开发及目录详解

shopify的二次开发

公司需求要求对shopify的官网要进行二次开发，可以创建新的模块，再此我也一脸懵，点进去发现他的开发对习惯了前后端分离和模块化开发的人来说简直是折磨。整个官网的样式都在一个文件下，但是没办法需求来了还是要完成，发现对shopify二次开发的资料少的可怜。所以写下这篇文章看看能不能帮助到各位同道中人，下面先说说要知道哪些才能进行开发

开发条件

• 基本的html，css，JavaScript，Liquid模板语法。

  熟悉基本的shopify的规则shopify developers里面的shopify主题内容
• Liquid模板语法链接
• shopify developers链接

了解这些基本就可以开始开发了，下面先说说shopify的目录结构

目录结构

Layout    -------------------------------------------  布局模板
Templates   ------------------------------------------ 可用的模板文件
Sections    ------------------------------------------ 组成主题的一个个可复用的模块（开发主要的需要了解的内容）
Snippets   ------------------------------------------- 代码片段
Assets   --------------------------------------------- 静态资源文件夹（放入第三方库，图片等等）
Config   --------------------------------------------- 配置主题文件
Locales   -------------------------------------------- 用于为主题提供翻译的内容

下面详谈下各个目录的作用，以及里面的注意事项

Layout

包含主题布局模板，默认情况下是 theme.liquid

内容对象
content_for_header，content_for_index，content_for_layout

• content_for_header对象 这个对象必须放在Layout/theme.liquid模板的 内，它将Shopify所需的所有脚本动态加载到文档头中。这些脚本包括Shopify分析，Google Analytics（分析）以及Shopify应用所需的脚本
• { { content_for_layout }} 这个对象必须放在Layout/theme.liquid模板的 内。它动态加载由其他模板（例如index.liquid或）生成的内容product.liquid
• content_for_index对象 这个对象此对象必须包含在中templates/index.liquid中。它包含的是在主页上呈现的动态内容部分

Templates

可用的模板文件

Shopify主题由控制在线商店不同页面的外观的模板文件组成。所有模板文件均以Liquid编码。
这个文件没什么好讲的,给大家附上个链接。可以详细了解

Templates详解

Sections

组成主题的一个个可复用的模块。

主题有一个名为Sections的目录。部分是Liquid模板，与其他模板一样，它们可以访问相同的全局对象，标签和过滤器。在节外创建的变量在节内不可用。同样，在部分中创建的变量在部分外部不可用。如果部分包含代码段，则该代码段可以访问该部分中的变量。
这些部分支持三个新的Liquid标签。这些新标签在部分之外不可用：

• {% schema %}
• {% javascript %}
• {% stylesheet %}

schema
schema不输出其内容，schema也不执行标签内的Liquid代码。
每个部分可以有一个schema标记，schema标记必须包含有效的JSON。schema标记可以放在节文件中的任何位置，但不能嵌套在另一个Liquid标记内。

您可以在部分的schema标签中定义以下属性:

name--------展示的名字
class--------添加额外的 class 在 section 的 div 上
settings--------settins 的 id 在这个 section 里是唯一的，可以在这个 section 里通过 {
    { section.settings.[id] }} 拿到对应的 settings。全局 settings 对象可以在 sections 拿到。不过不可以在外面拿 sections 的内部的 section.settings。
blocks
tag-----------可以指定该部分的包装器的HTML标签
blocks--------可以在其架构中定义块。块是可以在一个节中添加，删除和重新排序的设置和内容的容器。块必须具有name和type。块type可以是主题开发人员设置的任何值。块settings的格式与相同settings_schema.json。
limit----------默认情况下，运营人员可以多次将同一块添加到部分中。如果需要，您可以为一个块设置一个限制，以便只能将其加起来达到一定次数：
max_blocks-------默认状态下后台运营人员可以添加到节中的块数没有限制，但是您可以在节模式中指定最大块数：
presets----------section 的默认配置。与 settings_data.json 的配置没有关系。
default---------静态包含在主题模板中的节,可以在架构中定义其默认配置：没有 name 或者 category。

需要注意的是presets属性和default属性我们再单独讲讲

presets属性:section 的默认配置。与 settings_data.json 的配置没有关系。

• 如果一个section有多个presets，每一个preset会变成一个单独的备选section提供商家进行添加。（需要将 content_for_index 包含在 index.liquid 中）。有 presets 的 sections 不能直接在 theme 的 templates 中引入。presets 必须有一个 name 和 category。在 theme editor 中，section 通过 category 进行组合。看一下列子

{% schema %} 
    { 
        "presets": [ 
            { 
               " category": "Custom Content", 
                "name": "Text", 
                "settings": { "heading": "Hello World" }, 
                "blocks": [ 
                        { 
                            "type": "text", 
                            "settings": { "content": "Once upon a time..." } 
                            } 
                        ]
                    } 
            ] 
    } 
{% endschema %}

default属性:静态包含在主题模板中的节,可以在架构中定义其默认配置：没有 name 或者 category。

{% schema %} 
    { 
        "default": [ 
            { 
                "settings": { "heading": "Hello World" }, 
                "blocks": [ 
                        { 
                            "type": "text", 
                            "settings": { "content": "Once upon a time..." } 
                            } 
                        ]
                    } 
            ] 
    } 
{% endschema %}

全局对象：可以从主题中的任何文件使用和访问以下对象，并将它们定义为全局对象或全局变量。

{% for product in collections.frontpage.products %} 
    {
    { product.title }} 
{% endfor %}
如collections就是全局对象，任何地方都能访问的，这个也是shopify内置的全局对象,上面有官方的所有全局对象的链接。

locales

语言环境(这个东西说实话博主在本次开发中并没有用到,不过还是附上官方的说明吧)

各节可以使用locales目录中定义的全局翻译。将translate和localize段内过滤器工作，就像他们在其他模板做。
各节还可以在其架构中定义自己的翻译。您只需要将此部分用于要在多个主题或商店上重复使用或安装的部分即可。

{% schema %} 
    { 
        "locales": { 
            "en": { 
                "title": "Welcome" 
                }, 
            "fr": { 
                "title": "Bienvenue" 
            } 
        } 
    } 
{% endschema %}

• 翻译将在语言编辑器的“部分”选项卡中。
• 当您在语言编辑器中更新翻译时，您的翻译将保存到适用的语言环境文件，并且架构保持不变。节模式中的转换充当默认值。
• 在部分中，translateandlocalize过滤器将尝试在当前部分的上下文中，然后在该部分的模式中，然后在全局上下文中查找翻译。
  例如，{ { 'title' | t }}insidesections/header.liquid将sections.header.title在语言环境文件中查找，然后title在该部分的架构中，然后title在语言环境文件中查找。

snippets

片段

• 使用 include 将 snippet 加载到主题中。
• include 的 snippets 与父级元素共享变量

assets

静态资源文件

如果是要二次开发的可以在这文件下引入第三方的库和组件，图片等。（如jq，swiper等到）如果只是shopify的管理人员对某些样式不满意不需要新增其他的模块或者改动不大的只需要对样式修改的小伙伴要挺好了

修改简单的样式

• Assets中的theme.scss文件就是整个官方的样式文件直接在这个文件上修改就行了。（这个真的要吐槽了，所有的页面样式都放在一个文件下是真的恶心。）
• theme.scss因为用的是scss语法，是嵌套的，一定要找到相对应的类目或者id进行修改。或者找到对应的标签给他加个类名，覆盖他的样式也可以的

Config

主题配置文件

settings_data.json------------和sction中的schema一样

settings_schema-----------列出主题的所有设置。id 是唯一的。创建选项给用户去选择。使用在样式里面，通过全局的 settings 可以拿到对应的值

settings_data官方详解