Mẹo Shopify: Sử dụng tags để lọc bài viết hay hiển thị nhiều thông tin hơn

Điểm bài viết
[Tổng cộng: 0 Trung bình: 0]

Share vì hữu ích

Mặc dù là một nền tảng thương mại điện tử khá được ưa chuộng, việc sử dụng nhiều lớp lọc dữ liệu của Shopify đôi khi vẫn cần sự trợ giúp từ việc tận dụng các tính năng hiện có như Tags. Code Tốt xin hướng dẫn một mẹo giúp bạn tạo bộ lọc dữ liệu dễ dàng và hiệu quả.

Filter String

Tính năng filter string của Shopify hoạt động thực sự tốt và ta có thể tận dụng để làm hiển thị các mục phụ như Category trong Article hay Product Attributes.

Hãy cùng bắt tay vào một ví dụ. Giả sử ta có ba kiểu article là Press, Recipes. Trong kiểu article Recipes, ta cần hiển thị category (ví dụ: Dinner, Breakfast,…) và các tag về kiểu loại thức ăn như (Chocolate, Sweet, …)

Giờ ta sẽ dùng cách thức filter như sau:

Bước 1: Trong backend, khi bạn thêm 1 article mới, ở mục Tags, bạn sẽ liệt kê các định dạng như sau:

category-xx
filter-xxx

Chẳng hạn, với category, ta có các tag  category-dinner, category-breakfast

Và đối với filter ta tạm có các tag sau đây: filter-sweet (ngọt), filter-sour (chua), filter-spice.

Bước 2: Trong markup file liquid ta sẽ lần lượt thực hiện các bước sau:

  1. Chạy vòng lặp for đối với article.tags
  2. Nếu bạn cần hiển thị category, hãy filter ra các tag chứa prefix category-
  3. Nếu bạn cần hiển thị các tag filter, hãy filter ra các tag chứa prefix filter-

Nghe đơn giản phải không, hãy cùng xem code nhé:

Vòng lặp ban đầu (theme Timber)

{% if article.tags.size > 0 %}
  <ul>
   {% for tag in article.tags %}
     <li><a href="{{ blog.url }}/tagged/{{ tag | handle }}">{{ tag }}</a>{% unless forloop.last %}, {% endunless %}</li>
   {% endfor %}
  </ul>
{% endif %}

Các phương thức lọc dữ liệu trong Shopify

Ta lần lượt tìm hiểu các phương thức lọc dữ liệu sau của Shopify:

split: tách string ra bằng cách xác định kí tự nào sẽ là kí tự ngăn cách, kết quả trả về là một tập hợp mảng array

last: trong tập hợp mảng array, ta chỉ lấy item cuối cùng

contains: điều kiện kiểm tra xem trong string có chứa một keyword nào đó không

remove_first: trong đoạn string, gỡ bỏ đoạn kí tự đầu tiên match keyword.

replace: thay thế kí tự nào đó bằng một

Với từng ấy phương thức, bạn nghĩ chúng ta có thể lọc được không?

Hãy bắt đầu!

Lọc để lấy ra category và hiển thị:

{% if article.tags.size > 0 %}
 {% for tag in article.tags %}
   {% if tag contains 'category-' %}
     <span class="category">{{ tag | remove_first: "category-" | replace: "-", " " }}</span>
   {% endif %}
 {% endfor %}
{% endif %}

Lọc để lấy ra kết quả là các tag filter

{% if article.tags.size > 0 %}
 <ul>
 {% for tag in article.tags %}
   {% if tag contains 'filter-' %}
     <li>{{ tag | remove_first: "filter-" | replace: "-", " " }}</li>
   {% endif %}
 {% endfor %}
 </ul>
{% endif %}

Kết luận

Bạn thấy không, với một ví dụ nhỏ về tận dụng xử lý, chúng ta có thể tạo ra những bộ lọc thông minh hơn cho giao diện của Shopify.

Share vì hữu ích

About Khôi 'Pro' Nguyễn

Technical Lead tại Solis Lab. Quản lý ngôn ngữ tại vi.wordpress.org.

View all posts by Khôi 'Pro' Nguyễn →

Trả lời