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

Rate this post

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.

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...