Shopify Liquid Formatter - Format Liquid Code

Tính năng nổi bật

Tại sao cần Liquid Formatter?

Shopify Liquid code có thể trở nên messy và khó đọc, đặc biệt với nested logic blocks. Unformatted code khó maintain, debug, và collaborate. Liquid Formatter tự động indent code, align tags, và improve readability. Giúp developers quickly understand template structure, spot errors easier, và maintain consistent coding style across team. Formatted code cũng easier to review trong pull requests. Tool này đặc biệt hữu ích khi work với complex templates có nhiều if/for/case statements, hoặc khi inherit messy code từ others.

Lợi ích khi sử dụng

• •Improve code readability
• •Easier debugging
• •Consistent code style
• •Faster development
• •Better collaboration
• •Spot errors quickly
• •Professional code quality
• •Miễn phí và dễ sử dụng

Cách sử dụng Shopify Liquid Formatter

1. 1Paste Liquid code vào ô Input
2. 2Hoặc click 'Load Sample' để test với code mẫu
3. 3Click 'Format Code' để beautify code
4. 4Hoặc click 'Minify Code' để compress code
5. 5Xem formatted code ở ô Output
6. 6Code được auto indent theo nested levels
7. 7Click 'Copy Output' để copy formatted code
8. 8Paste vào .liquid file của bạn
9. 9Repeat cho các templates khác
10. 10Maintain consistent formatting across theme

Shopify Liquid Basics

Liquid là templating language của Shopify, dùng để load dynamic content. Objects: {{ product.title }} output data. Tags: {% if %} control logic flow. Filters: {{ price | money }} transform output. Common tags: if/unless (conditionals), for (loops), case/when (switch), assign (variables), capture (store content). Common filters: money, date, upcase, downcase, split, join, default. Liquid combines với HTML để build dynamic Shopify themes. Understanding Liquid syntax essential cho Shopify theme development.

Liquid Best Practices

Indentation: Consistent indent (2 hoặc 4 spaces) cho nested blocks. Comments: {% comment %} để explain complex logic. Variables: Assign descriptive names. Filters: Chain filters logically. Performance: Minimize loops, cache expensive operations. Avoid deep nesting (>3 levels). DRY: Use snippets cho reusable code. Sections: Break large templates into sections. Testing: Test với different data scenarios. Validation: Check syntax errors. Version Control: Commit formatted code. Documentation: Comment complex logic. Follow Shopify's Liquid style guide.

Common Liquid Patterns

Product Loop: {% for product in collection.products %} list products. Variant Selection: {% for variant in product.variants %} show options. Conditional Display: {% if product.available %} show/hide based on availability. Pagination: {% paginate collection.products by 12 %} paginate results. Cart Items: {% for item in cart.items %} display cart. Metafields: {{ product.metafields.custom.field }} custom data. Translations: {{ 'key' | t }} multi-language. Image Sizes: {{ image | img_url: '400x' }} responsive images. Money Format: {{ price | money_with_currency }} proper formatting. Date Format: {{ order.created_at | date: '%B %d, %Y' }} readable dates.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan