Shopify Hydrogen 1.0 内容集成开发指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00057/article/details/148552824

Shopify Hydrogen 1.0 内容集成开发指南

hydrogen-v1 React-based framework for building dynamic, Shopify-powered custom storefronts. 项目地址: https://gitcode.com/gh_mirrors/hy/hydrogen-v1

前言

本文档将详细介绍如何在 Shopify Hydrogen 1.0 项目中集成内容管理系统。虽然 Hydrogen 2.0 已经发布，但本文档仍可作为升级过程中的参考指南。

内容平台概述

Shopify 内容平台目前处于测试阶段，仅适用于 Shopify Plus 和 Advanced 计划用户。该平台允许商家在 Hydrogen 构建的店铺前端集成各种内容，如产品特性、规格说明、尺码表等。

内容模型构建

什么是内容模型

内容模型是自定义的对象模式，可以与 Shopify 资源（如产品、集合、订单等）关联。通过内容模型，开发者可以在 Hydrogen 店铺前端创建和存储结构化内容。

创建内容模型步骤

在 Shopify 后台的"内容"部分创建内容模型
定义模型字段结构（如产品特性模型可包含标题、标语、描述、特色图片等）
将模型与特定资源关联

示例模型结构

一个典型的产品特性内容模型可能包含以下字段：

标题 (heading)
标语 (tagline)
详细描述 (description)
特色图片 (featured_image)

内容布局设计

在 Hydrogen 项目中，我们可以通过 React 组件来设计内容展示布局。以下是一个典型的产品详情页内容布局示例：

<section>
  {features.map(
    ({id, heading, tagline, description, featured_image}, i) => (
      <div key={id} className={`flex flex-col ${isOdd(i) ? 'md:flex-row' : 'md:flex-row-reverse'} md:justify-center gap-4 p-6 md:gap-8 md:p-12`}>
        <Image
          className="object-cover w-full md:w-1/2 aspect-[4/3]"
          width={featured_image.width}
          height={featured_image.height}
          src={featured_image.url}
        />
        <div className="flex flex-col items-start justify-center w-full gap-4 md:w-1/2">
          <h4 className="text-base font-bold uppercase">{heading}</h4>
          <h3 className="text-3xl font-bold">{title(tagline)}</h3>
          <p className="text-base">{description}</p>
        </div>
      </div>
    ),
  )}
</section>

这个布局实现了：

响应式设计（移动端和桌面端不同排列方式）
图片与文字内容的交替排列
美观的间距和排版

内容数据获取

基础查询示例

通过 Storefront API 可以查询内容数据。所有关联的元字段都有一个与 type 字段匹配的 namespace。

query {
  content(type: "lookbook", first: 10) {
    edges {
      node {
        handle
      }
    }
  }
}

高级查询示例

对于产品相关内容，可以查询 references 数组获取详细内容数据：

query product($handle: String!) {
  product: product(handle: $handle) {
    product_features: metafield(
      namespace: "custom"
      key: "product_feature"
    ) {
      references(first: 5) {
        edges {
          node {
            ... on ContentEntry {
              heading: field(key: "heading") {
                value
              }
              tagline: field(key: "tagline") {
                value
              }
              description: field(key: "description") {
                value
              }
              featured_image: field(key: "featured_image") {
                value
              }
            }
          }
        }
      }
    }
  }
}

这个查询实现了：