# Shopify HTML、数据属性和评论 Shopify 主题中的 HTML 结构、数据属性使用和代码注释指南。 ## 何时使用 * 分段构建 HTML 标记 * 通过属性将数据传递给JavaScript * 添加注释到 Liquid 模板 * 组织 HTML 元素 ## HTML 和数据属性 ### 自定义 HTML 标签 * 适当时使用自定义 HTML 标签 * 自定义元素与 JavaScript 自定义元素配合良好 * 改进语义结构 ### 示例 <产品卡数据产品-id =“{{产品.id}}”> ### 数据属性 * 通过`data-*`属性传递动态数据 * 通过`dataset`属性在JavaScript中访问 * 使用短横线命名属性名称 ### 数据属性命名

### 在 JavaScript 中访问数据 ProductCard 类扩展 HTMLElement { 构造函数（）{ 超级（）； this.productId = this.dataset.productId; this.variantId = this.dataset.variantId; this.productHandle = this.dataset.productHandle; } } ### 配置数据属性使用数据属性将配置从 Liquid 传递到 JavaScript： <图片库 data-autoplay =“{{section.settings.autoplay}}” data-interval =“{{section.settings.interval}}” data-transition =“{{section.settings.transition}}”> 类 ImageGallery 扩展 HTMLElement { 构造函数（）{ 超级（）； this.autoplay = this.dataset.autoplay === 'true'; this.interval = parseInt(this.dataset.interval, 10); this.transition = this.dataset.transition; } } ## 评论 ### 评论指南 * 尽量减少评论 * 仅评论非显而易见的逻辑 * 不要解释每一行 * 使用注释来解释“为什么”，而不是“什么” ### 液体评论 {%-评论-%} 使用compare_at_price 计算产品的折扣百分比。仅当折扣大于 20% 时才显示折扣徽章。 {%- 结束注释 -%} {%液体如果产品.compare_at_price > 产品.价格分配折扣 = Product.compare_at_price |减：产品.价格分配discount_percent =折扣|次数：100 | split_by: 产品.compare_at_price 如果折扣百分比 > 20 指定 show_badge = true 恩迪夫恩迪夫 %} ### 片段使用评论始终在片段中包含使用注释： {%-评论-%} 用途： {% 渲染'产品卡', 产品：产品，显示供应商：真实，显示价格：true %} {%- 结束注释 -%} ### HTML 注释谨慎使用 HTML 注释进行章节组织： {%-评论-%} 产品卡部分显示产品信息，包括图像、标题、价格和添加到购物车按钮 {%- 结束注释 -%}

### 何时发表评论 **发表评论：** * 复杂的业务逻辑 * 非显而易见的计算 * 解决方法或技巧 * 片段使用说明 * 节级文档 **不评论：** * 明显的代码（例如，`{% if Product.available %}`） * 每行代码 * 不言自明的变量名称 * 标准 Liquid 语法 ### 示例：好评论与坏评论 {%-评论-%} 好：解释为什么，而不是什么计算折扣百分比。 Shopify 不直接提供此功能，所以我们根据compare_at_price和当前价格计算它。 {%- 结束注释 -%} {%液体分配折扣 = Product.compare_at_price |减：产品.价格分配discount_percent =折扣|次数：100 | split_by: 产品.compare_at_price %} {%-评论-%} 坏：解释了什么，这是显而易见的检查产品是否可用。如果可用，显示添加到购物车按钮。 {%- 结束注释 -%} {% 如果产品可用 %} <按钮>添加到购物车 {% 结束 %} ## HTML 结构最佳实践 ### 语义 HTML 使用语义 HTML 元素： <文章类=“产品卡”>

{{ 产品.title }}

{{ 产品.title }}

主题 Shopify Html 数据评论

包含技能