Hướng dẫn thêm tính năng cuộn vô hạn cho cửa hàng Shopify

Nếu cửa hàng của bạn có nhiều sản phẩm trong một bộ sưu tập trên cửa hàng Shopify của bạn, thay vì khiến khách hàng phải truy cập nhiều trang sản phẩm để xem thì bạn có thể thêm tính năng cuộn vô hạn (infinite scroll) vào các trang bộ sưu tập Shopify của mình để khách hàng có thể tiếp tục tải thêm sản phảm mà không cần chuyển trang.

Tính năng cuộn vô hạn giúp thu hút sự chú ý của khách hàng. Nó cải thiện trải nghiệm người dùng và giúp duyệt các trang dễ dàng hơn. Thao tác cuộn dễ dàng hơn đối với người dùng so với việc nhấp chuột (rồi cuộn lại) vì yêu cầu ít thao tác hơn. Cuộn vô hạn cho phép người dùng tìm thấy nội dung mà họ có thể không thấy. Khách truy cập của bạn càng thấy nhiều sản phẩm thì càng có nhiều cơ hội mua hàng của bạn.

Trên Shopify App Store có nhiều ứng dụng giúp bạn thiết lập tính năng này cho cửa hàng của mình. Nhưng nếu bạn có kỹ năng lập trình, bạn có thể tự mình thiệt lập tính năng này này theo cách thủ công. Hãy tham khảo các bước dưới đây:

• Trong trang quản trị viên Shopify của bạn, bạn mở Online Store > Theme.
• Tìm đến chủ đề bạn muốn chỉnh sửa, sau đó nhấp vào Action > Edit code.
• Trong phần Layout, nhấp vào theme.liquid để mở tập tin này trong trình chỉnh sửa mã trực tuyến.
• Tìm đến thẻ </head> và dán đoạn mã dưới đây vào ngay phía trên nó.
  
  {% if template contains 'collection' %}{{ 'https://cdn.shopify.com/s/files/1/0382/4185/files/ajaxinate.js?937' | script_tag }}{% endif %}

  1	{% if template contains 'collection' %}{{ 'https://cdn.shopify.com/s/files/1/0382/4185/files/ajaxinate.js?937' | script_tag }}{% endif %}

• Bạn bấm nút Save.
• Tiếp đó bạn hãy mở template của trang collection và tìm đến vòng lặp {% for product in collection.products %} và thêm 1 thẻ DIV bao và thêm nhiều thẻ DIV ngay bên dưới thẻ đó. Ví dụ:
  
  <div id="MangBinhDinh-Loop" > {% for product in collection.products %} {% include 'product-grid-item' %} {% endfor %} </div> <div id="MangBinhDinh-Pagination"> {% if paginate.next %} <a href="{{ paginate.next.url }}">Loading More</a> {% endif %} </div>

  1 2 3 4 5 6 7 8 9 10

  <div id="MangBinhDinh-Loop" >       {% for product in collection.products %}         {% include 'product-grid-item' %}       {% endfor %} </div> <div id="MangBinhDinh-Pagination">     {% if paginate.next %}     <a href="{{ paginate.next.url }}">Loading More</a>     {% endif %}   </div>

• Thêm tiếp đoạn mã javascript vào cuối tập tin đó
  
  <script> document.addEventListener("DOMContentLoaded", function() { var endlessScroll = new Ajaxinate({ container: '#MangBinhDinh-Loop', pagination: '#MangBinhDinh-Pagination' }); }); </script>

  1 2 3 4 5 6 7 8

  <script>   document.addEventListener("DOMContentLoaded", function() {     var endlessScroll = new Ajaxinate({       container: '#MangBinhDinh-Loop',       pagination: '#MangBinhDinh-Pagination'     });   }); </script>

• Click Save và bạn đã hoàn thành.

Chúc các bạn thành công.