コンテンツにスキップ
【厳選】おすすめ Shopifyアプリ
【厳選】おすすめ Shopifyアプリ
Shopify Order PrinterのテンプレートをVS Codeで効率的に作成する Tsun Inc.

Shopify Order PrinterのテンプレートをVS Codeで効率的に作成する

「RuffRuff 予約販売」は在庫切れや新商品販売前、入荷待ちなどタイミングで発生する機会損失の削減をサポートします。
ノーコードかつ3ステップで簡単にセットアップでき、日本語に対応しています。
無制限で予約商品を登録および無制限で予約注文を受け付けることが可能です。

引用元: RuffRuff 予約販売

 

株式会社TsunでCTOをしている小笠原です!
最近Shopifyのアプリやテーマ開発をメインに行っています。
このブログではShopify開発に役立つ情報を共有しています。
Shopifyエンジニアの方の参考になれば嬉しいです!

下記の記事ではShopifyのメリットやデメリット、始め方について詳しく解説していますのでご参考にしてください。

Shopifyとは?ショッピファイのメリットやデメリット|Shopifyについて徹底解説

なぜやるのか

Shopifyでストア構築するときによく使われるアプリにOrder Printerという公式アプリがあります。
テンプレートがあらかじめ用意されているんですが、独自のテンプレートを1から作るとなると結構骨が折れる作業だったので、こうすれば効率よく作れるよ!という方法をご紹介したいと思います。

作成したもの 

下記を実現したVS Codeの開発環境

  • テンプレートのLive Preview (コードを変更した結果がすぐに確認できる)
  • Liquidのフォーマットとオートコンプリート

前提条件

対象読者

  • Order Printerを使ったことがある
  • Liquidの基礎的な知識がある
  • VS Codeのユーザー

準備するもの

  • VS Codeの最新バージョン (執筆時点では Version: 1.67.2)

作成方法

テンプレートのLive Preview

まずは今回の一番の目玉であるテンプレートのLive Previewをできるようにします。
やることは拡張機能の2つインストールするだけです。
まず、VS Codeの拡張機能 Shopify Liquid Preview をインストールします。
この拡張機能によって、Liquidで書いたコードが即座にHTMLに変換されたプレビューが見れるようになります。

Order Printerのテンプレートを作成する場合、Liquid variableを使っていると思いますが、Liquid variableの値もプレビューに反映することが可能です。
やり方はLiquidファイルに対応したJSONを作成して、プレビュー時に指定してあげるとLiquid variableを反映してくれます。

このままでは実際に印刷時の文字の大きさや位置がわからないので、拡張機能 HTML Preview をインストールします。
HTML Preview によってHTMLがどのように表示されるかがプレビューできるので、下記のようにLiquidを変更した結果がどのように表示されるかが即座にわかるようになります!

Liquidのフォーマットとオートコンプリート

Live Previewだけでも十分開発効率は上がりますが、フォーマットとオートコンプリートもできるようにしましょう!
Liquid という拡張機能があるので、インストールします。
これだけでLiquidファイルのハイライト、フォーマット、オートコンプリートなどができるようになります。

複数行のとき(liquid tag)にフォーマットの不具合がありましたが、その他は概ね問題なく使えました。
Order Printerのテンプレート作成時にはこの拡張機能を使って、フォーマットを整えたりするのがいいかなと思います。

まとめ 

今回はOrder Printerアプリのテンプレートを開発する環境について紹介しました。
もっとこうしたほうが作業しやすいよ!などありましたら是非コメントで教えて下さい!

 

Tsun Inc.ではOrder Printerを使った注文書等の独自テンプレートにも対応しています。
独自の注文書や伝票を作成したい方は、ぜひTsun Inc.へお問い合わせください。

前の記事 Shopify CLIでログイン中のストア名をStarshipプロンプトに表示する

Shopify Apps

TECH BLOGS

BLOGS

編集プロセス

EコマースやShopifyの初学者にとって、できるだけ “やさしく” “わかりやすく” “正確に” 難しいコマース用語やマーケティング用語、ストア構築から販売までの仕組み・ノウハウを伝えることを心がけて、記事コンテンツを作成しています。

詳しく見る →

掲載情報に関して

掲載している各種情報は、株式会社Tsunが調査した情報をもとにしています。できるだけ“最新“かつ“正確“な情報の掲載に努めておりますが、内容を完全に保証するものではありません。当サイトによって生じた損害について、株式会社Tsunではその賠償の責任を一切負わないものとします。掲載情報に誤りがある場合には、お手数ですが株式会社Tsunまでご連絡をいただけますようお願いいたします。

アプリの比較

{"one"=>"比較する2つまたは3つのアイテムを選択します", "other"=>"選択された3つのアイテムの{{ count }}"}

比較する最初のアイテムを選択します

比較する2番目の項目を選択します

比較する3番目の項目を選択

比較