「RuffRuff 予約販売」は在庫切れや新商品販売前、入荷待ちなどのタイミングで発生する機会損失の削減をサポートします。
自身のShopifyストアに驚くほど簡単に予約販売を実現し、無制限での予約商品を登録および無制限で予約注文を受け付けることが可能です。また、予約商品と通常商品を同時に注文させないように制限したり、入荷時期が未定な場合は再入荷通知も可能です。
他の予約販売アプリにはない商品出荷前に支払回収できる「後払い」機能などのユニークな機能もたくさん存在します。
株式会社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.へお問い合わせください。
