# Shopify JavaScript 标准用于 Shopify 主题开发的 JavaScript 文件结构、自定义元素和编码标准。 ## 何时使用 * 为 Shopify 主题部分编写 JavaScript * 创建交互组件 * 设置 JavaScript 文件结构 * 使用自定义 HTML 元素 ## 文件结构 ### 单独的 JavaScript 文件 * JavaScript 必须位于 `assets/` 目录中的 **单独文件** 中 * 使用 `asset_url` 过滤器将其包含在部分中 ### 在节中包含 JavaScript **始终使用`defer`** 确保脚本在 HTML 解析后加载。 ### 文件命名将 JavaScript 文件名与节名匹配：部分/ └── 产品快速查看.液体资产/ └── 产品-quick-view.js ## JavaScript 规则 ### 变量声明 * 仅使用 `const` 和 `let` * **永远不要使用`var`** * 避免全球范围的污染 ### 示例 // 好 const ProductId = document.querySelector('[data-product-id]').dataset.productId; 让 isOpen = false; // 不好 var 产品 ID = ...; // 永远不要使用 var 窗口.myVariable = ...; // 避免全球污染 ### 范围管理保持变量的使用范围： // 好 - 作用域在函数内函数 initProductCard() { const 卡 = document.querySelector('.product-card'); const Button = card.querySelector('.product-card__button'); // ... } // 不好 - 全局变量 const 卡 = document.querySelector('.product-card'); // 全局范围 ## 自定义元素 ### 使用自定义 HTML 元素使用**自定义 HTML 元素**来封装 JavaScript 逻辑并创建可重用的组件。 ### 自定义元素结构 ProductQuickView 类扩展 HTMLElement { 构造函数（）{ 超级（）； this.init(); } 初始化（）{ this.button = this.querySelector('[data-trigger]'); this.modal = this.querySelector('[data-modal]'); this.closeButton = this.querySelector('[数据关闭]'); this.button?.addEventListener('click', () => this.open()); this.closeButton?.addEventListener('click', () => this.close()); } 打开（）{ this.modal?.classList.add('is-open'); } 关闭（）{ this.modal?.classList.remove('is-open'); } } customElements.define('产品快速视图', ProductQuickView); ### 在 Liquid 中使用自定义元素 ### 自定义元素的好处 * 封装——逻辑是自包含的 * 可重用性 - 在主题中的任何地方使用 * 生命周期挂钩 - `connectedCallback`、`disconnectedCallback` * 数据属性 - 通过 `data-*` 属性传递数据 ### 生命周期挂钩类 MyComponent 扩展 HTMLElement { 连接回调() { // 添加到 DOM 的元素 this.init(); } 断开连接回调() { // 从 DOM 中移除的元素 this.cleanup(); } 初始化（）{ // 设置逻辑 } 清理（）{ // 清理逻辑（移除事件监听器等） } } ## 数据属性 ### 将数据传递给 JavaScript * 适当时使用自定义 HTML 标签 * 通过`data-*`属性传递动态数据 * 通过“dataset”属性访问数据 ### 示例 <产品卡 data-product-id="{{ 产品.id }}" data-product-handle="{{ 产品.handle }}" data-variant-id="{{product.selected_or_first_available_variant.id }}"> ProductCard 类扩展 HTMLElement { 构造函数（）{ 超级（）； this.productId = this.dataset.productId; this.productHandle = this.dataset.productHandle; this.variantId = this.dataset.variantId; } } ## 观察员 ### 仅在明确请求时才使用观察者 **仅当用户明确请求**时才使用观察者（IntersectionObserver、MutationObserver 等）。 ### IntersectionObserver 示例 // 仅在明确需要时使用 LazyImage 类扩展 HTMLElement { 构造函数（）{ 超级（）； this.observer = new IntersectionObserver((entries) => { 条目.forEach（条目=> { if (entry.isIntersecting) { this.loadImage(); this.observer.unobserve(this); } }); }); } 连接回调() { this.observer.observe(this); } 加载图像（）{ const img = this.querySelector('img'); img.src = img.dataset.src; } } ## 最佳实践 ### 事件处理类 ProductForm 扩展 HTMLElement { 构造函数（）{ 超级（）； this.form = this.querySelector('form'); this.form?.addEventListener('提交', this.handleSubmit.bind(this)); } 处理提交（事件）{ event.preventDefault(); // 处理表单提交 } 断开连接回调() { // 清理事件监听器 this.form?.removeEventListener('提交', this.handleSubmit); } } ### 错误处理 ProductCard 类扩展 HTMLElement { 初始化（）{ 尝试{ const 按钮 = this.querySelector('[数据添加到购物车]'); 如果（！按钮）{ console.warn('未找到添加到购物车按钮'); 返回; } button.addEventListener('点击', this.handleAddToCart.bind(this)); } 捕获（错误）{ console.error('初始化产品卡时出错：', error); } } } ## Shopify 主题文档参考这些官方 Shopify 资源： * [Shopify 主题 JavaScript]() * [Web 组件]() * [自定义元素]() * [数据属性]() ## 完整示例 ### 节文件 {{ '产品卡.css' |资产网址 |样式表标签}} <产品卡 data-product-id="{{ 产品.id }}" data-product-handle="{{ 产品.handle }}">

### JavaScript 文件 ProductCard 类扩展 HTMLElement { 构造函数（）{ 超级（）； this.productId = this.dataset.productId; this.init(); } 初始化（）{ const 按钮 = this.querySelector('[数据添加到购物车]'); .addEventListener('click', () => this.addToCart()); } 异步 addToCart() { 尝试{ const 响应 = 等待 fetch('/cart/add.js', { 方法：'POST'， headers: { 'Content-Type': 'application/json' }, 正文：JSON.stringify({ id: this.productId, 数量：1 }) }); // 处理响应 } 捕获（错误）{ console.error('添加到购物车时出错：', error); } } } customElements.define('产品卡', ProductCard); ## 说明 1. **单独的 JS 文件** \- `assets/` 目录中每个部分一个文件 2. **包含脚本时使用`defer`** 3. **使用 `const` 和 `let`** \- 切勿使用 `var` 4. **使用自定义元素**封装逻辑 5. **通过`data-*`属性传递数据** 6. **避免全球范围的污染** 7. **仅在明确要求时才使用观察者** 8. **清理`disconnectedCallback`中的事件监听器**

{{ 产品.标题 }}

主题 Shopify Javascript 标准

包含技能