「RuffRuff 予約販売」は在庫切れや新商品販売前、入荷待ちなどタイミングで発生する機会損失の削減をサポートします。
ノーコードかつ３ステップで簡単にセットアップでき、日本語に対応しています。
無制限で予約商品を登録および無制限で予約注文を受け付けることが可能です。引用元: RuffRuff 予約販売
株式会社TsunでCTOをしている小笠原です！
最近Shopifyのアプリやテーマ開発をメインに行っています。
このブログではShopify開発に役立つ情報を共有しています。
Shopifyエンジニアの方の参考になれば嬉しいです！
下記の記事ではShopifyのメリットやデメリット、始め方について詳しく解説していますのでご参考にしてください。
Shopifyとは？ショッピファイのメリットやデメリット｜Shopifyについて徹底解説
Shopifyでストア構築するときによく使われるアプリにOrder Printerという公式アプリがあります。
テンプレートがあらかじめ用意されているんですが、独自のテンプレートを1から作るとなると結構骨が折れる作業だったので、こうすれば効率よく作れるよ！という方法をご紹介したいと思います。
下記を実現したVS Codeの開発環境
まずは今回の一番の目玉であるテンプレートの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を変更した結果がどのように表示されるかが即座にわかるようになります！
Live Previewだけでも十分開発効率は上がりますが、フォーマットとオートコンプリートもできるようにしましょう！
Liquid という拡張機能があるので、インストールします。
これだけでLiquidファイルのハイライト、フォーマット、オートコンプリートなどができるようになります。
複数行のとき(liquid tag)にフォーマットの不具合がありましたが、その他は概ね問題なく使えました。
Order Printerのテンプレート作成時にはこの拡張機能を使って、フォーマットを整えたりするのがいいかなと思います。
今回はOrder Printerアプリのテンプレートを開発する環境について紹介しました。
もっとこうしたほうが作業しやすいよ！などありましたら是非コメントで教えて下さい！
Tsun Inc.ではOrder Printerを使った注文書等の独自テンプレートにも対応しています。
独自の注文書や伝票を作成したい方は、ぜひTsun Inc.へお問い合わせください。
Tsun Inc. CTOの小笠原です！今回はShopify APIをPostmanで簡単に実行するノウハウをまとめました。 Shopify APIに限...
RuffRuff 目次作成の機能や料金プランを知りたい方は下記のページをご参考にしてください。 Shopifyに目次を自動生成するアプリ「RuffRuff...
EコマースやShopifyの初学者にとって、できるだけ “やさしく” “わかりやすく” “正確に” 難しいコマース用語やマーケティング用語、ストア構築から販売までの仕組み・ノウハウを伝えることを心がけて、記事コンテンツを作成しています。
掲載している各種情報は、株式会社Tsunが調査した情報をもとにしています。できるだけ“最新“かつ“正確“な情報の掲載に努めておりますが、内容を完全に保証するものではありません。当サイトによって生じた損害について、株式会社Tsunではその賠償の責任を一切負わないものとします。掲載情報に誤りがある場合には、お手数ですが株式会社Tsunまでご連絡をいただけますようお願いいたします。
{"one"=>"比較する2つまたは3つのアイテムを選択します", "other"=>"選択された3つのアイテムの{{ count }}"}
