Liquidの基本

オブジェクト Object handle

ハンドルは、liquidのオブジェクトの属性にアクセスするために使われます。Shopifyのほとんどのオブジェクト(商品、コレクション、ブログ、記事、メニュー)はハンドルを持っています。例えば、”About Us “というタイトルのページは、ハンドルのabout-usを使ってLiquidにアクセスできます。

こんな感じ

{{ pages.about-us.content}}

これはShopifyのabout us のページのコンテンツ

という意味

どうやってハンドルがつけられるか

デフォルトだと、ハンドルは小文字で表されてスペースや他の特殊文字はハイフン 『-』に置き換えられる。

商品のタイトルが「shirts」、基本的にはshirtsというハンドルが自動でつけられる。

また同じタイトルのものが増えたら shirts-1 shirts-2と自動的にハンドルがつけられる。

例えば my shiny new title だと自動的に my-shiny-new-title としてハンドルがつけられる。

またハンドルはオンラインストアのURLを自動的に設定する。

たとえば about-usがハンドルのpageだと。

yourshop.myshopify.com/pages/about-us

みたいな感じに。

もし最初に about us というページを作っらabout-usというハンドルが自動でつけられているので、about us から例えば about my store という名前に変更したかったらリンクがおかしくなってしまうので手動で変更する必要がある。そのままでも問題は無いがあとからわからなくなってしまうので変えたほうが良い。

URL&handleのボックスのところで変更できる。

ハンドルへのアクセス

ハンドルにアクセスしたいときは、[] や.を使ってアクセスする。

{{ pages.about-us.title }}

{{ pages[“about-us”].title }}

表示結果

About US

About US

また、この記法を使って、テーマ・エディター・オブジェクトを渡すことができる。これは、テーマのユーザーに、テーマに表示するコンテンツを選択できるようにしたいテーマデザイナーにとって便利な機能。

{% for product in collections[settings.home_featured_collection].products %}

    {{ product.title }}

{% endfor %}

特集コレクションの中のプロダクトをforループさせて、product.titleを表示させる。

表示結果

Awesome Shoes

Cool Shirt

Wicked Socks

参考

https://shopify.dev/docs/themes/liquid/reference/basics/handle

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top