修改 Shopify 分页 URL 的 JavaScript 教程

本教程旨在指导 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 模板中。

实现步骤

1. 确定代码放置位置:

   最合适的做法是将 JavaScript 代码直接嵌入到集合的 Liquid 模板文件中，例如 collection.liquid 或 collection.json（如果使用 Sections）。这样可以方便地访问 Liquid 变量。

   如果需要将代码放在独立的 .js 文件中，则需要确保该文件是 .js.liquid 类型，以便 Shopify 能够解析其中的 Liquid 变量。

2. 获取集合 Handle:

   使用 collection.handle 变量获取当前集合的 handle（slug）。Handle 是集合 URL 的一部分，例如，如果集合 URL 是 https://your-store.com/collections/new-arrivals，那么 handle 就是 new-arrivals。

3. 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 属性。

4. 将代码嵌入到 Liquid 模板:

   将上述 JavaScript 代码嵌入到 collection.liquid 或 collection.json 文件中的 <script> 标签内。确保代码放置在合适的位置，以便能够访问 collection 对象。</script>

   <script>
       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 + '/');
               }
           });
       });
   </script>

注意事项

• 选择器: 确保 document.querySelectorAll('.pagination a') 选择器能够正确匹配你的 Shopify 主题中的分页链接。
• Liquid 变量: 确保代码放置在能够访问 collection 对象的 Liquid 模板中。
• 测试: 在更改生效后，务必测试分页功能，确保链接正确生成，并且能够正常跳转到相应的页面。
• URL 结构: 根据实际需求调整 URL 结构。例如，你可能需要包含其他参数或路径。
• 主题更新: 在更新 Shopify 主题时，需要重新检查并更新代码，以确保其与新的主题结构兼容。

总结

通过结合 Liquid 模板引擎和 JavaScript，我们可以灵活地修改 Shopify 分页 URL 的格式，从而提升用户体验和 SEO。本教程提供了一个基本的实现方法，开发者可以根据自己的需求进行定制和扩展。记住，在进行任何代码修改之前，务必备份你的 Shopify 主题，以便在出现问题时能够轻松恢复。

Java免费学习笔记：立即学习
解锁 Java 大师之旅：从入门到精通的终极指南