šļø 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)