本教程旨在指导 Shopify 开发者如何使用 JavaScript 修改分页 URL 的格式，将标准的 ?page=2 形式转换为更简洁的 /2 形式。我们将探讨如何利用 Liquid 模板引擎和 JavaScript 代码，动态地获取当前集合的 handle，并将其插入到分页链接中，从而实现自定义 URL 结构。
理解需求与技术栈
Shopify 默认的分页 URL 格式通常包含 ?page= 参数，例如 https://your-store.com/collections/products?page=2。为了提升用户体验和 SEO，我们可能需要将其修改为更简洁的形式，例如 https://your-store.com/collections/products/2。
实现这一目标，需要结合以下技术：
- Liquid 模板引擎: 用于访问 Shopify 集合的属性，例如集合的 URL 或 handle。
- JavaScript: 用于动态修改 HTML 中的分页链接。
- Shopify Theme 文件结构: 了解如何将 JavaScript 代码嵌入到 Liquid 模板中。
实现步骤
-
确定代码放置位置:
立即学习“Java免费学习笔记（深入）”；
最合适的做法是将 JavaScript 代码直接嵌入到集合的 Liquid 模板文件中，例如 collection.liquid 或 collection.json（如果使用 Sections）。这样可以方便地访问 Liquid 变量。
如果需要将代码放在独立的 .js 文件中，则需要确保该文件是 .js.liquid 类型，以便 Shopify 能够解析其中的 Liquid 变量。
-
获取集合 Handle:
使用 collection.handle 变量获取当前集合的 handle（slug）。Handle 是集合 URL 的一部分，例如，如果集合 URL 是 https://your-store.com/collections/new-arrivals，那么 handle 就是 new-arrivals。
-
JavaScript 代码实现:
以下代码示例展示了如何使用 JavaScript 修改分页链接：
document.addEventListener('DOMContentLoaded', function() { var paginationLinks = document.querySelectorAll('.pagination a'); // 替换为实际的分页链接选择器 var collectionHandle = '{{ collection.handle }}'; paginationLinks.forEach(function(link) { var pageUrl = link.getAttribute('href'); if (pageUrl && pageUrl.includes('?page=')) { var pageNumber = pageUrl.substring(pageUrl.lastIndexOf('=') + 1); link.setAttribute('href', '/collections/' + collectionHandle + '/' + pageNumber + '/'); } }); });代码解释:
- document.addEventListener('DOMContentLoaded', function() { ... });：确保在 DOM 加载完成后执行 JavaScript 代码。
- document.querySelectorAll('.pagination a');：选择所有分页链接。需要根据你的 Shopify 主题调整选择器。
- '{{ collection.handle }}';：使用 Liquid 变量获取当前集合的 handle。
- link.getAttribute('href');：获取分页链接的原始 URL。
- pageUrl.substring(pageUrl.lastIndexOf('=') + 1);：从 URL 中提取页码。
- link.setAttribute('href', '/collections/' + collectionHandle + '/' + pageNumber + '/');：构建新的 URL 并将其设置为链接的 href 属性。
-
将代码嵌入到 Liquid 模板:
将上述 JavaScript 代码嵌入到 collection.liquid 或 collection.json 文件中的
注意事项
- 选择器: 确保 document.querySelectorAll('.pagination a') 选择器能够正确匹配你的 Shopify 主题中的分页链接。
- Liquid 变量: 确保代码放置在能够访问 collection 对象的 Liquid 模板中。
- 测试: 在更改生效后，务必测试分页功能，确保链接正确生成，并且能够正常跳转到相应的页面。
- URL 结构: 根据实际需求调整 URL 结构。例如，你可能需要包含其他参数或路径。
- 主题更新: 在更新 Shopify 主题时，需要重新检查并更新代码，以确保其与新的主题结构兼容。
总结
通过结合 Liquid 模板引擎和 JavaScript，我们可以灵活地修改 Shopify 分页 URL 的格式，从而提升用户体验和 SEO。本教程提供了一个基本的实现方法，开发者可以根据自己的需求进行定制和扩展。记住，在进行任何代码修改之前，务必备份你的 Shopify 主题，以便在出现问题时能够轻松恢复。
