šŸ“– HĘ°į»›ng Dįŗ«n Sį»­ Dį»„ng Invoice Playground

šŸŽ›ļø Thanh CĆ“ng Cį»„ (Toolbar)

  • šŸ’¾ Save: LĘ°u trįŗ”ng thĆ”i hiį»‡n tįŗ”i (bao gį»“m tįŗ„t cįŗ£ nį»™i dung, cĆ i đįŗ·t, chįŗæ đį»™ sĆ”ng/tį»‘i, kĆ­ch thĘ°į»›c panel, v.v.)
  • šŸ”„ Reset: KhĆ“i phį»„c vį» trįŗ”ng thĆ”i Ä‘Ć£ lĘ°u gįŗ§n nhįŗ„t
  • šŸ“ Load Mock Data: Tįŗ£i dį»Æ liį»‡u mįŗ«u đį»ƒ thį»­ nghiį»‡m
  • ā†¶ Undo / ā†· Redo: HoĆ n tĆ”c hoįŗ·c lĆ m lįŗ”i thay đį»•i trong editor đang focus (Ctrl/Cmd+Z, Ctrl/Cmd+Shift+Z)
  • šŸ“¦ Export ZIP: Xuįŗ„t tįŗ„t cįŗ£ file thĆ nh file ZIP vį»›i tĆŖn tį»± đį»™ng bao gį»“m timestamp
  • šŸ“„ Import ZIP: Nhįŗ­p file ZIP Ä‘Ć£ xuįŗ„t trĘ°į»›c Ä‘Ć³, tį»± đį»™ng điį»n thĆ“ng tin tį»« tĆŖn file
  • āŠŸ Collapse All / āŠž Expand All: Thu gį»n hoįŗ·c mį»Ÿ rį»™ng tįŗ„t cįŗ£ cĆ”c editor section
  • šŸŒ™ Dark Mode / ā˜€ļø Light Mode: Chuyį»ƒn đį»•i giį»Æa chįŗæ đį»™ tį»‘i vĆ  sĆ”ng cho toĆ n bį»™ giao diį»‡n

šŸ“ CĆ”c Editor Sections

  • Template Code (Liquid): Code template chĆ­nh sį»­ dį»„ng cĆŗ phĆ”p Liquid. Hį»— trį»£ alias draftOrder cho order
  • Styles (CSS): CSS styles vį»›i Liquid syntax, đʰį»£c inject vĆ o template khi render
  • Order Object (JSON): Dį»Æ liį»‡u order mįŗ«u (hoįŗ·c draftOrder)
  • Template Object (JSON): Cįŗ„u hƬnh template (font, size, barcode, v.v.)
  • Configuration Object (JSON): ThĆ“ng tin cį»­a hĆ ng (logo, đį»‹a chį»‰, sį»‘ điį»‡n thoįŗ”i, v.v.)
  • Text Object (JSON): CĆ”c text labels đa ngĆ“n ngį»Æ

šŸŽØ TĆ­nh Năng Editor

  • Syntax Highlighting: Highlight cĆŗ phĆ”p cho Liquid, JSON, CSS
  • Fira Code Font: Font lįŗ­p trƬnh chuyĆŖn nghiį»‡p vį»›i ligatures
  • Dracula Theme: Theme tį»‘i đįŗ¹p mįŗÆt (dark mode)
  • VS Theme: Theme sĆ”ng sįŗ”ch sįŗ½ (light mode)
  • Line Numbers: Hiį»ƒn thį»‹ sį»‘ dĆ²ng
  • Cursor Position: Hiį»ƒn thį»‹ vį»‹ trĆ­ con trį» į»Ÿ gĆ³c dĘ°į»›i phįŗ£i mį»—i editor

šŸ–±ļø Thao TĆ”c Vį»›i Editor

  • Click vĆ o header section: Thu gį»n/mį»Ÿ rį»™ng section Ä‘Ć³
  • KĆ©o thįŗ£ section: Di chuyį»ƒn đį»ƒ sįŗÆp xįŗæp lįŗ”i thį»© tį»± cĆ”c section (thį»© tį»± đʰį»£c lĘ°u tį»± đį»™ng)
  • KĆ©o đʰį»ng viį»n giį»Æa sections: Thay đį»•i kĆ­ch thĘ°į»›c chiį»u cao cį»§a section
  • Keyboard shortcuts: Tįŗ„t cįŗ£ shortcuts cį»§a VS Code đį»u hoįŗ”t đį»™ng (Find, Replace, Multi-cursor, v.v.)

ā†”ļø Panel Resize & Collapse

  • KĆ©o thanh dį»c giį»Æa: Thay đį»•i kĆ­ch thĘ°į»›c giį»Æa Editors Panel vĆ  Preview Panel
  • Click vĆ o giį»Æa thanh dį»c: Thu gį»n/mį»Ÿ rį»™ng Editors Panel (click trong vĆ¹ng 40px tį»« tĆ¢m)

šŸ–¼ļø Preview Panel

  • Live Preview: Tį»± đį»™ng cįŗ­p nhįŗ­t khi bįŗ”n chį»‰nh sį»­a (debounce 300ms)
  • Paper Size: Chį»n kĆ­ch thĘ°į»›c giįŗ„y (Letter, A4, Legal, v.v.)
  • Error Display: Hiį»ƒn thį»‹ lį»—i Liquid syntax ngay trong preview vį»›i sį»‘ dĆ²ng chĆ­nh xĆ”c

šŸ’¾ LĘ°u Trį»Æ & Import/Export

  • Session Storage: Tį»± đį»™ng lĘ°u nį»™i dung khi lĆ m viį»‡c (khĆ“ng mįŗ„t khi refresh)
  • Local Storage: LĘ°u preferences (dark mode, paper size, section order)
  • Export Format: pdf_invoice_[tsName]_[storeName]_[templateName]_[date]_[time].zip
  • Import Parse: Tį»± đį»™ng parse tĆŖn file vĆ  điį»n vĆ o cĆ”c input field
  • Auto-load Mock: Tį»± đį»™ng load dį»Æ liį»‡u mįŗ«u khi mį»Ÿ lįŗ§n đįŗ§u

āš ļø Xį»­ LĆ½ Lį»—i

  • Syntax Error: Hiį»ƒn thį»‹ lį»—i vį»›i sį»‘ dĆ²ng chĆ­nh xĆ”c trong Template Editor
  • Line Calculation: Tį»± đį»™ng tĆ­nh offset do styles injection
  • Error Tips: Gį»£i Ć½ sį»­a lį»—i phį»• biįŗæn (vĆ­ dį»„: dĆ¹ng != thay vƬ !==)
  • Visual Feedback: Hiį»ƒn thį»‹ lį»—i trong preview vį»›i format dį»… đį»c

šŸŽÆ Tips & Tricks

  • Nhįŗ„n Ctrl/Cmd+S đį»ƒ save nhanh
  • Nhįŗ„n Ctrl/Cmd+Z đį»ƒ undo, Ctrl/Cmd+Shift+Z đį»ƒ redo
  • Sį»­ dį»„ng draftOrder thay vƬ order khi lĆ m viį»‡c vį»›i draft orders
  • Click Reset đį»ƒ quay vį» trįŗ”ng thĆ”i an toĆ n nįŗæu cĆ³ lį»—i
  • Export ZIP thĘ°į»ng xuyĆŖn đį»ƒ backup cĆ“ng viį»‡c
  • KĆ©o thįŗ£ sections đį»ƒ sįŗÆp xįŗæp theo Ć½ thĆ­ch
  • Thu gį»n sections khĆ“ng dĆ¹ng đį»ƒ tįŗ­p trung vĆ o code quan trį»ng

šŸ”§ Input Fields

  • TS Name: TĆŖn TS (dĆ¹ng trong tĆŖn file export)
  • Store Name: TĆŖn cį»­a hĆ ng (dĆ¹ng trong tĆŖn file export)
  • Template Name: TĆŖn template (dĆ¹ng trong tĆŖn file export, giį»Æ nguyĆŖn chį»Æ hoa/thĘ°į»ng)
  • Paper Size: KĆ­ch thĘ°į»›c giįŗ„y cho preview (Letter, A4, Legal, Tabloid, A3, A5)
Template Code (Liquid)
ā–¼
AI Diff
Styles (CSS)
ā–¼
AI Diff
AI Template Editor

šŸ“‹ Data Editors

Preview (Letter Size: 8.5" Ɨ 11")

BEFORE
AFTER