메인 콘텐츠로 건너뛰기
코드 편집기에서는 템플릿을 완전히 제어할 수 있습니다. 템플릿은 HTML과 CSS에 Liquid를 더한 것이며, Liquid는 Shopify에서 사용하는 것과 같은 템플릿 언어입니다. {{ order_name }}은 주문 이름을 출력하고, {% for line_item in line_items %}는 모든 품목에 대해 반복합니다. Foliant의 주문 변수는 Shopify Order Printer의 변수를 따르므로, Order Printer용으로 작성한 템플릿은 대부분 그대로 사용할 수 있습니다. 코드 편집기는 모든 플랜에서 사용할 수 있습니다.

코드 편집기 열기

편집기에서 템플릿을 열고 코드 탭을 클릭하세요. 코드 템플릿은 바로 코드 탭에서 열립니다. 비주얼 템플릿은 먼저 컴파일된 코드가 표시되며, 변경하려면 코드 편집을 클릭하세요. 비주얼 모드와 코드 모드 전환을 참조하세요. 왼쪽 창에는 세 개의 탭이 있습니다. 오른쪽 창은 실시간 미리 보기입니다. 입력을 멈추면 잠시 후 업데이트됩니다.

필드 삽입

  1. 필드를 넣을 위치에 커서를 두세요.
  2. 필드 삽입을 클릭하세요.
  3. 필드 검색에서 필드(예: “tracking” 또는 “SKU”)를 검색한 다음 클릭하세요.
Foliant가 커서 위치에 해당 Liquid를 삽입합니다(예: {{ shipping_address.city }}). {{ line_item.sku }}와 같은 품목 필드는 품목 반복문 안에서만 작동합니다. 반복문 자체를 넣으려면 주문 품목을 삽입하세요.

코드 검색

템플릿에서 텍스트를 찾으려면 필드 삽입 옆의 검색 버튼을 클릭하세요(또는 코드에서 ⌘F / Ctrl+F를 누르세요).

코드 오류

편집기는 입력하는 동안 코드를 확인하고 여백에 문제를 표시합니다.
  • 오류가 있으면 저장할 수 없고 미리 보기가 일시 중지됩니다. 닫히지 않은 {{ 또는 {%는 오류입니다. 오류는 편집기 위의 코드 오류 배너에 나열되며, 각 오류에 줄로 이동이 있습니다.
  • 경고는 잘못되었을 수 있는 부분을 알려 주지만 저장을 막지는 않습니다. 예를 들어 알 수 없는 Liquid 필터, 태그 또는 객체, 알 수 없는 HTML 태그나 CSS 속성, 닫히지 않은 HTML 태그 등이 있습니다.
저장할 때도 Foliant가 템플릿을 확인합니다. Liquid를 읽을 수 있어야 하고, HTML 태그의 짝이 맞아야 하며, 인라인 SVG에는 그리기 요소만 포함할 수 있습니다. 문제가 있으면 저장에 실패하고 업데이트하지 못함 배너에 최대 다섯 개의 문제가 나열되며, 알 수 있는 경우 줄 번호도 함께 표시됩니다. 템플릿은 저장되었지만 미리 보기를 렌더링할 수 없는 경우, 배너에 Liquid 메시지와 줄(알 수 있는 경우)이 표시됩니다.

좋은 템플릿 작성하기

  • 금액 값은 센트 단위입니다. 항상 {{ total_price | money }}와 같은 금액 필터로 출력하세요. 템플릿의 금액과 통화를 참조하세요.
  • 메모나 주소처럼 고객이 입력한 텍스트에는 | escape를 사용하세요. 예: {{ note | escape }}.
  • 문서 언어에 맞는 문구에는 {{ 'subtotal' | t }}를 사용하세요. 날짜, 언어 및 번역을 참조하세요.
  • VAT에는 Foliant의 기본 제공 스니펫을 사용하세요. {% include 'vat_breakdown' %}는 VAT 내역 표를, {% include 'legal_notes' %}는 법적 고지(역과세, 수출, IOSS…)를 출력합니다.

알아 두기

  • 번호가 매겨지는 템플릿(인보이스, 대변 메모 또는 견적서)에서 document_number를 어디에도 출력하지 않으면, Foliant가 문서 끝에 번호가 담긴 작은 줄을 추가합니다. 템플릿의 문서 번호를 참조하세요.
  • 코드 템플릿의 페이지 번호와 반복되는 표 머리글은 템플릿 설정 페이지의 페이지 레이아웃에서 설정합니다.
  • Shopify Order Printer 또는 Order Printer Pro에서 템플릿을 가져오려면 템플릿 페이지에서 템플릿 가져오기를 사용하세요. Order Printer에서 템플릿 가져오기를 참조하세요.

관련 문서