Shopify主题应用扩展入门教程

Shopify主题应用扩展入门教程

theme-extension-getting-startedA theme app extension boilerplate that highlights the basic structure and features that are available to developers who want to integrate their apps with Shopify Online Stores.项目地址:https://gitcode.com/gh_mirrors/th/theme-extension-getting-started

1. 项目的目录结构及介绍

当您创建一个主题应用扩展时，Shopify会在您的应用中添加以下theme-app-extension目录和子目录：

theme-app-extension/
├── assets/
├── blocks/
└── snippets/

目录描述

• assets: 包含CSS、JavaScript和其他静态应用内容，这些内容会被注入到主题中。应用可以通过JavaScript和stylesheet schema属性或从asset_url和asset_img_url Liquid URL过滤器加载资产。
• blocks: 包含用于主题的应用块和应用嵌入块的Liquid文件。
• snippets: 包含可以被主题调用的Liquid代码片段。

2. 项目的启动文件介绍

在生成的扩展目录中，您会找到一个工作示例，该示例显示产品评级。主要的启动文件包括：

• main.js: 这是主要的JavaScript文件，负责初始化和加载扩展的功能。
• styles.css: 这是主要的样式文件，定义了扩展的外观和风格。

3. 项目的配置文件介绍

在扩展的根目录中，您需要配置一个元字段定义，该定义具有以下属性：

• Area: Products
• Namespace: demo
• Key: avg_rating
• Type: Integer

在创建元字段定义后，您需要在至少一个产品上设置该元字段的值。

配置文件示例

{
  "metafields": [
    {
      "namespace": "demo",
      "key": "avg_rating",
      "type": "integer",
      "value": 4
    }
  ]
}

通过以上配置，您可以开始预览和测试您的主题应用扩展。

theme-extension-getting-startedA theme app extension boilerplate that highlights the basic structure and features that are available to developers who want to integrate their apps with Shopify Online Stores.项目地址:https://gitcode.com/gh_mirrors/th/theme-extension-getting-started