メインコンテンツへスキップ
コードエディタでは、テンプレートを細かく自由に編集できます。テンプレートはHTMLとCSSにLiquidを組み合わせたものです。LiquidはShopifyと同じテンプレート言語で、{{ order_name }} は注文名を表示し、{% for line_item in line_items %} はアイテムごとに繰り返します。Foliantの注文変数はShopify Order Printerの変数に準拠しているため、Order Printer用に書かれたテンプレートはほとんどそのまま使えます。コードエディタはすべてのプランで利用できます。

コードエディタを開く

エディタでテンプレートを開き、コードタブをクリックします。コードテンプレートは直接ここで開きます。ビジュアルテンプレートの場合は、まずコンパイルされたコードが表示されます。変更するにはコードを編集をクリックします。ビジュアルとコードの切り替えをご覧ください。 左側のパネルには3つのタブがあります。 右側のパネルはライブプレビューです。入力を止めると、すぐに更新されます。

フィールドを挿入する

  1. フィールドを入れたい位置にカーソルを置きます。
  2. フィールドを挿入をクリックします。
  3. フィールドを検索でフィールド(例:「tracking」や「SKU」)を検索し、クリックします。
Foliantがカーソル位置にLiquidを挿入します(例:{{ shipping_address.city }})。{{ line_item.sku }} などの明細行のフィールドは、明細行のループ内でのみ機能します。ループ自体を挿入するには明細行アイテムを挿入してください。

コードを検索する

フィールドを挿入の隣にある検索ボタンをクリックする(またはコード内で ⌘F / Ctrl+F を押す)と、テンプレート内のテキストを検索できます。

コードエラー

エディタは入力中にコードをチェックし、問題を余白に表示します。
  • エラーがあると保存できず、プレビューも一時停止します。閉じていない {{ や {% はエラーになります。エラーはエディタ上部のコードエラーバナーに一覧表示され、それぞれに行へ移動があります。
  • 警告は誤りの可能性がある箇所を示しますが、保存は可能です。例えば、不明なLiquidのフィルター、タグ、オブジェクト、不明なHTMLタグやCSSプロパティ、閉じていないHTMLタグなどです。
保存時にもFoliantがテンプレートをチェックします。Liquidが読み取れること、HTMLタグの対応が取れていること、インラインSVGに描画要素のみが含まれていることが必要です。問題がある場合は保存に失敗し、更新に失敗しましたバナーに最大5件の問題が表示されます。行番号が分かる場合は行番号も表示されます。 テンプレートは保存できてもプレビューを表示できない場合は、バナーに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からテンプレートをインポートするをご覧ください。

関連記事