shopify的前端开发教程_shopify前台

基础（你要熟悉css，js，html）

开发前得会基础的js，css，html。
shopify官方文档：https://shopify.dev/docs

文件结构

assets：img、js、scss 样式 存放的地方即主题使用的所有资源，包括图像、样式表和javascript文件
config：一个settings_schema.json文件和一个settings_data.json文件。
layout：主题布局模板，默认情况下是theme.liquid。
locales：主题的翻译locale文件，为主题提供相关语言的内容。
sections：组成主题的一个个可复用的模块。
snippets：Liquid代码片段文件，这些代码片段可以在主题的其他模板中引用。
templates：包含所有其他的Liquid模板，包括用户账号相关的模板。
若你使用的是theme kit则还有一个文件config.yml

liquid

中文版文档 官方文档
Liquid 是一门开源的模板语言，由 Shopify 创造并用 Ruby 实现。它是 Shopify 主题的骨骼，并且被用于加载店铺系统的动态内容。
主要可以分成Basics,Objects,Tags,和filters。详细的建议去看文档，中文文档并不详细，缺少很多内容，可以先用中文文档入门再阅读官方文档。

settings_schema.json

settings_schema.json是主题的配置文件，他控制着主题中的可编辑内容，也存放着主题的一些信息，例如作者，版本等但主要是控制主题的可配置信息。(settings_data.json存放的是当前主题保存的值，不建议手动更改)

[
  {
   //主题信息
    "name": "theme_info",
    "theme_name": "Debut",
    "theme_author": "Shopify",
    "theme_version": "11.0.1",//版本
    "theme_documentation_url": "https:\/\/help.shopify.com\/manual\/using-themes\/themes-by-shopify\/debut",
    "theme_support_url": "https:\/\/support.shopify.com\/"
  },
  {
   //主题配置信息
    "name": "Colors",
    "settings": [
      {
   
        "type": "color",
        "id": "color_borders",
        "label": "Border colors",
        "default": "#e5e5e5"
      },
      {
   
        "type": "color",
        "id": "color_body_text",
        "label": "Body text",
        "default": "#333333"
      }
    ]
  }
]

配置的属性都有五个type、id、label、default、info

type的常规输入属性如下

type的特殊输入属性如下

信息设置
Shopify还允许将创建主题的作者信息放入侧边栏中，它们只有3个属性：type, content, info

调用

{
   {
    settings.对应属性的id }}
例如：{
   {
    settings.color_borders }}

section

theme有一个名为sections的新目录。sections可访问与其他模板相同的全局对象、标记和过滤器的liquid模板。
在sections外部创建的变量在sections内部不可用。同样，在sections中创建的变量在sections外不可用。如果某个sections包含一个代码片段，则该代码片段可以访问该sections中的变量。
sections支持三个新的liquid标签。这些新的标签在sections外是不可用的。

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

当Shopify渲染section时，它将每个section包装在一个具有唯一id属性的;

<div id="shopify-section-[id]" class="shopify-section">
  [output of the section template]
</div>

如果在各自的{% schema %}标记中定义了presets，则可以将 Sections动态添加到主题的主页。带有presets的Sections将在主题编辑器中自动访问。在主题编辑器中，商家可以配置相同类型的多个Sections，并在主页上重新排列它们的外观。最多可以向主页添加25个动态Sections。与静态Sections不同，您不需要使用{% section %}标记在template文件中引入Sections。Shopify将所有预置的sections配置一起呈现在content_for_index的主题编辑器中。

使用section schema tags

sections {% schema %} 标记和{%comment%}注释标记一样 不输出其内容，且内部代码不执行。每个section 可以有一个 {% schema %}，{% schema %}必须包含有效的JSON，{% schema %}可以放在section内任何位置，但是不能嵌套在另一个tags中。
你可以在{% schema %}中定义以下属性：

class

{
   % schema %} { "name": "Slideshow", "class": "slideshow" }
{
   % endschema %}
************************
<div id="shopify-section-[id]" class="shopify-section slideshow">
  [output of the section template]
</div>

tag

{
   % schema %} { "name": "Slideshow", "tag": "section" }
{
   % endschema %}
************************
<section id="shopify-section-[id]" class="shopify-section">
  [output of the section template]
</section>

settings

{
   % schema %} { "name": "Slideshow", "settings": [ { "id": "header", "type": "text", "label": "Header", "default": "Hello world" }
    ]
  }
{
   % endschema %} /*******使用********/ {
   { section.settings.header }}

bolcks

blocks必须有name和type属性，type可以是主题开发人员设置的任何值。blocks的settings的使用与settings_schema.json相同，同时limit属性可以限制blocks的数量。

{
   % schema %} { "blocks": [ { "type": "payment_icons", "name": "Payment Icons", "limit": 2, "settings": [ { "id": "content", "type": "text", "label": "Quote" }
        ]
      }
    ]
  }
{
   % endschema %}

max_blocks

{
   % schema %} { "name": "Slideshow", "max_blocks": 2 }
{
   % endschema %}

presets

如果在各自的{% schema %}标记中定义了presets，则可以将 Sections动态添加到主题的主页。带有presets的Sections将在主题编辑器中自动访问。在主题编辑器中，商家可以配置相同类型的多个Sections，并在主页上重新排列它们的外观。最多可以向主页添加25个动态Sections。与静态Sections不同，您不需要使用{% section %}标记在template文件中引入Sections。Shopify将所有预置的sections配置一起呈现在content_for_index的主题编辑器中。
presets必须有两个属性name和category；
presets的settings包含添加到主页时的默认值，根据sections的schema settings ,presets 的值必须有效。

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

default

定义默认配置，格式与presets相同只是没有name和catogory。

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

locales

翻译模板

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

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdkf/2986.html