跳轉到主要內容
程式碼編輯器讓您完整掌控範本。範本由 HTML 和 CSS 搭配 Liquid 組成,Liquid 也是 Shopify 使用的範本語言:{{ order_name }} 會印出訂單名稱,{% for line_item in line_items %} 會針對每個品項重複執行。Foliant 的訂單變數沿用 Shopify 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 }}。請參閱日期、語言與翻譯。
  • 使用 Foliant 內建的 VAT 片段:{% include 'vat_breakdown' %} 會印出 VAT 明細表,{% include 'legal_notes' %} 則印出法律說明(反向收費、出口、IOSS…)。

注意事項

  • 若有編號的範本(發票、折讓單或報價單)沒有在任何地方印出 document_number,Foliant 會在文件結尾加上一小行編號。請參閱範本中的文件編號。
  • 程式碼範本的頁碼和重複的表格標題,位於範本設定頁面的 頁面版面 下。
  • 若要從 Shopify Order Printer 或 Order Printer Pro 移入範本,請在範本頁面使用 匯入範本。請參閱從 Order Printer 匯入範本。

相關文章