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:
- Chạy vòng lặp
forđối vớiarticle.tags - Nếu bạn cần hiển thị category, hãy filter ra các tag chứa prefix
category- - 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.
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.
