コンテンツ
過去数週間、私はビューポートインダストリーズ、エリオットジェイストックスという会社のためにShopifyテーマを構築してきました。そして私は昨年結成しました。 Shopifyを選択した理由はいくつかあります。
- これにより、デジタル製品と物理製品の両方を販売できます
- 完全にホストされているため、サーバーについて心配する必要はありません。
- それは私たちの銀行とうまく統合する多くの支払いゲートウェイをサポートしています
- テーマベースです。つまり、既存のサイトのHTML、CSS、JavaScriptを簡単に再利用できます。
Shopifyは、Liquidと呼ばれるテンプレートエンジンを使用して、ストアからテンプレートにデータを出力します。 Liquidは、おそらくこれまで使用したことのないShopifyテーマの1つの要素であり、不快感を与える可能性があります。しかし、良いニュースは、始めるのはそれほど難しいことではないということです。
Smarty、ERB、またはTwigを使用したことがある場合は、次の内容に慣れているはずです。そうでない場合でも、心配しないでください。いくつかの簡単なルールを学ぶだけです。ウェブ開発ツールキットにLiquidスキルを追加すると、すぐにクライアント向けのテーマの作成を開始できるようになります。
テーマファイルとフォルダー
Shopifyのテーマは、多数のファイル（.liquid拡張子の付いたHTMLファイル、CSS、JS、画像など）とフォルダーにすぎません。テーマは好きなように見えて機能します。実際には制限はありません。テーマの基本構造は次のとおりです。
- 資産
- 設定
- レイアウト
- theme.liquid
- 切れ端
- テンプレート
- 404.liquid
- article.liquid
- blog.liquid
- cart.liquid
- collection.liquid
- index.liquid
- page.liquid
- product.liquid
- search.liquid
これらのファイルを使用して、最も基本的なテーマを作成できます。もちろん、CSS、JavaScript、およびいくつかの画像を追加することをお勧めします。これらをアセットフォルダに配置します。 （現在、アセットフォルダー内のサブフォルダーは許可されていないことに注意してください。）
テーマの仕組みの詳細、およびconfigフォルダーとスニペットフォルダーについては、ShopifyWikiの[スクラッチ]と[テーマの設定]からテーマを読むことをお勧めします。
または、無料のパートナープログラムに登録し、テストショップを作成して、テストショップの管理エリアから利用できる多くの無料テーマの1つを調べることができます。テーマメニューにあるテーマエディターに移動するだけです。
テンプレートへのURLのマッピング
Shopifyテーマは、現在のURLを特定のテンプレートにマッピングすることで機能します。たとえば、次のURLを持つ製品を表示している場合...
http://www.unitedpixelworkers.com/products/indianapolis
...その後、Shopifyはあなたの使用を知っています product.liquid テンプレート。このため、テンプレートには上記のファイル名のみを使用する必要があります。
Shopifyは、現在のURLに関連して表示するテンプレートを知っているだけでなく、非常に具体的な変数をいくつか利用できるようにします。これらは「テンプレート変数」と呼ばれ、テンプレートにデータを表示できるようにします。
たとえば、product.liquidテンプレートでは、適切な名前のテンプレートにアクセスできます。 製品 変数。これは、テンプレートに製品の名前、説明、価格、および入手可能性を出力できることを意味します。 Liquid変数とテンプレート変数の組み合わせを使用して、テンプレートに製品に関連するデータを入力します。
利用可能なテンプレート変数の完全なリストについては、MarkDunkleyのShopifyチートシートにアクセスしてください。
液体：基本
Liquidは、テーマデザイナーとしての私たちの生活を楽にするためにここにあります。これを行う主な方法の1つは、レイアウトを使用することです。レイアウトは、ヘッダー、メインナビゲーション、フッターなどの一般的なページ要素を含めるのに理想的です。
上記のフォルダ構造では、次のファイルに気付くでしょう。 theme.liquid レイアウトフォルダにあります。 theme.liquidをマスターテンプレートと考えることができます。 product.liquidなど、他のすべてのテンプレートは、このマスターテンプレート内にレンダリングされます。必要に応じて複数のレイアウトを設定できますが、デフォルトのレイアウトは常にtheme.liquidと呼ばれる必要があります。
United Pixelworkersのtheme.liquidファイルは見たことがありませんが、下の赤で囲まれた領域のマークアップが含まれていると想像できます。
基本的なテーマは次のとおりです。液体レイアウトは次のようになります。
- ！DOCTYPE html>
- html>
- 頭>
- {{content_for_header}}
- タイトル>ページタイトルはここに表示されます/タイトル>
- / head>
- ボディ>
- {{content_for_layout}}
- / body>
- / html>
二重中括弧で囲まれた2つのフレーズに気付くでしょう。 {{content_for_header}} そして {{content_for_layout}}。これらは、実際のLiquidの最初の例です。
Shopifyは、{{content_for_header}}を使用して、ドキュメントのhead>セクションに特定のファイルを追加することがよくあります。たとえば、トラッキングコードを追加します。 {{content_for_layout}}は、URLにマッピングされたテンプレートのコンテンツが表示される場所です。たとえば、商品ページを表示している場合、product.liquidファイルがレイアウトファイルの{{content_for_layout}}に置き換わります。
product.liquidを理解する
レイアウトの基本を実行したので、次はテンプレートを見てみましょう。ショップはすべて商品に関するものなので、見てみましょう product.liquid.
これは、product.liquidテンプレートの非常にシンプルですが機能的な例です。
- h2> {{product.title}} / h2>
- {{ 製品説明 }}
- {％if product.available％}
- form action = "/ cart / add" method = "post">
- select id = "product-select" name = ’id’>
- {product.variantsのバリアントの％％}
- option value = "{{variant.id}}"> {{variant.title}}-{variant.price} / option>
- {％endfor％}
- / select>
- input type = "submit" name = "add" value = "カートに追加" id = "purchase" />
- / form>
- {％ そうしないと ％}
- p>この製品は利用できません/ p>
- {％endif％}
ここでは、Liquidの重要な概念がいくつか機能しています。それらを順番に見ていきましょう。
出力
コードの最初の行には、フレーズが含まれています {{product.title}}。レンダリングされると、製品のタイトルが出力されます。これは、ご存知のとおり、URLによって決定されます。以下のUnitedPixelworkersの例では、製品タイトルは単に「インディアナポリス」です。
Liquidはドット構文形式を使用します。この場合、{{product.title}}は商品テンプレート変数とそのtitle属性に相当します。を使用して同じ方法で製品の説明を出力できます {{ 製品説明 }}.
これは液体用語では次のように知られています 出力。すべての出力は、次のように二重中括弧で示されます：{{your_output}}。
論理
コードの次の行で、中括弧で囲まれたステートメントの後に％が続きます。この場合は、 {％if product.available％}。これは、Liquidのもう1つの重要な概念です。 論理。さらに下に、{％else％}、最後に{％endif％}ステートメントがあります。
この ifステートメント 1つ以上の条件（この場合は、製品が利用可能かどうか）に基づいて、テンプレートの表示内容を指定できます。事実上、これは次のように言っています。「当社の製品が入手可能な場合は、それに関連する情報を示してください。それ以外の場合は、在庫がないことをユーザーに通知するメッセージを表示します。」
Liquidのすべての論理ステートメントは、中括弧のパーセンテージ表記、つまり{％if…％}を使用します。ステートメントを適切に閉じることを忘れないでください。そうしないと、問題が発生します。例えば：
- {％if product.available％}
- ここに[カートに追加]ボタンを表示します
- {％ そうしないと ％}
- 製品が次に利用可能になる時期についてのメッセージを表示します
- {％endif％}
フィルタ
Liquidを使用すると、いくつかの方法で出力を操作できます。これらの1つは、フィルターを使用することです。フィルタに入るコンテンツは、特定の方法で変更されたもう一方の端から出てきます。
上記のproduct.liquidの例を見ると、 { お金 }。バリエーションとは、商品のバリエーションを説明するために使用される用語です。たとえば、さまざまな色やサイズです。ここで興味深いのは、フィルターを使用して価格出力を変更することです。この場合は、マネーフィルターを使用します。これにより、ショップの通貨記号が価格の前に追加されます。
その他のフィルターには次のものがあります strip_html、特定のテキストからHTMLタグを取り除き、 ucase、 大文字に変換されます。
フィルタを結合することもできます。例えば：
- {article.content}
この例では、記事テンプレート変数のcontent属性を取得し、それをstrip_htmlフィルターに渡し、最後にtruncateフィルターに渡します。切り捨てフィルターを使用すると、最終出力の長さ（この場合は20文字）を指定できます。
フィルタを使用すると、テンプレートにスクリプト要素と画像要素をすばやく作成することもできます。フィルタを使用して、altタグが関連付けられた画像を出力する非常に簡単な方法は次のとおりです。
- {asset_url}
Shopifyテーマでこれを使用すると、次のimg要素がテンプレートにレンダリングされます。
- img src = "/ files / shops / your_shop_number / assets / logo.png" alt = "サイトロゴ" />
ザ・ Asset_url フィルタは、現在のテーマへのフルパスを返すので非常に便利です 資産 フォルダ。このフィルターを使用すると、複数のショップにテーマを適用でき、パスを気にする必要がありません。
次は何ですか？
うまくいけば、これらのいくつかの例は、Liquidがそれほど複雑ではないことを示しています。もちろん、それを使ってできることはもっとたくさんありますが、出力、ロジック、フィルターをマスターすることで、Shopifyテーマを構築するために必要なもののほとんどを理解することができます。
さらなるリソースとインスピレーション
- 便利なスターターShopifyチュートリアル
- MarkDunkleyのShopifyチートシート
- Blankify：Shopifyスターターテーマ
- チュートリアル：テーマを最初から作成する
- Shopifyパートナープログラム
- 40の刺激的なShopifyストア
