はじめに
この記事では、Liquidオブジェクトについて日本語訳したものです。
routes、script、searchのオブジェクトをまとめていきます。
こちらを参考にしました。
routesオブジェクト
routesオブジェクトの概要についてドキュメントからの引用です。
routesオブジェクトを使用して、ストアフロント（トップページ）への動的なURLを生成することができます
テーマで複数の言語をサポートする際にもroutesオブジェクトを使用します。
routes.root_url
ストアのベース（トップページ）URLを返します。
{{ routes.root_url }}
/
routes.account_url
アカウントページのURLを返します。
{{ routes.account_url }}
/account
routes.account_login_url
アカウントのログインページのURLを返します。
{{ routes.account_login_url }}
/account/login
routes.account_logout_url
アカウントのログアウトページのURLを返します。
{{ routes.account_logout_url }}
/account/logout
routes.account_register_url
アカウント登録ページのURLを返します。
{{ routes.account_register_url }}
/account/register
routes.account_addresses_url
会員アカウントに関連付けられたアドレスを管理できるページのURLを返します。
{{ routes.account_addresses_url }}
/account/addresses
routes.collections_url
コクションページのURLを返します。
{{ routes.collections_url }}
/collections
routes.all_products_collection_url
ストア内の全商品を含むコレクションのURLを返します。
{{ routes.all_products_collection_url }}
/collections/all
routes.search_url
検索するためのURLを返します。
{{ routes.search_url }}
/search
routes.cart_url
カートページのURLを返します。
商品のvariant.id、item.keyを用いて少なくとも1つのアイテムを指定する必要があります。
{{ routes.cart_url }}
/cart
routes.cart_add_url
カートに商品を追加するためのURLを返します。
{{ routes.cart_add_url }}
/cart/add
カートに一つや複数のバリアントを追加するには、POST/cart/add.jsエンドポイントを使用します。
カートに追加するには、variant.idまたはitem.keyを用いて少なくとも1つのアイテムを指定する必要があります。
quantityは追加したい量、idはその商品の variant ID を指定します。
複数のvariantをカートに追加するには、items配列にオブジェクトを追加します。
items: [
{
id: 36110175633573,
quantity: 2
}
]
シリアル化されたカートへの追加フォームを送信するには、以下のポスターデータを指定します。
シリアルかとは、オブジェクトをバイト列やテキストに変換することを言います。
jQuery.post('/cart/add.js', $('form[action="/cart/add"]').serialize());
また、数量やIDだけでなく、ラインアイテムのプロパティでカートに追加することも出来ます。
jQuery.post('/cart/add.js', {
items: [
{
quantity: 1,
id: 794864229,
properties: {
'First name': 'Caroline'
}
}
]
});
詳細については、、Ajax Cart API リファレンスを参照してください。
routes.cart_change_url
商品の購入数を変更できるURLを返します。
商品のvariant.idまたはline_item.keyを指定する必要があります。
/cart/change.jsは、カートのラインアイテムのquantity（数量）とproperties（商品の情報）を変更することが出来ます。
変更できるのはすでにカートに入っている商品のみで、一度に変更できるのは一つのラインアイテムだけです。
データを変更するには、変更するラインアイテムのidかline propertyが必要です。
idの値はvariant_idまたはkeyを指定します。
詳細については、、Ajax Cart API リファレンスを参照してください。
{{ routes.cart_change_url }}
/cart/change
routes.cart_clear_url
カートをクリアできるURLを返します。
{{ routes.cart_clear_url }}
/cart/clear
routes.product_recommendations_url
おすすめ商品情報のURLを返します。
{{ routes.product_recommendations_url }}
/recommendations/products
scriptオブジェクト
scriptオブジェクトの概要についてドキュメントからの引用です。
scriptオブジェクトには、ストアで公開されているShopifyスクリプトに関する情報が含まれています。
グローバルスクリプトオブジェクトを使用してタイプ別のスクリプトを検索します。
Shopifyスクリプトとは、割引や配送オプション、決済方法の変更をするコードのことです。
以下のタイプのようなスクリプトを作成することが出来ます。
-
Line item scripts - カート内のラインアイテムの価格を変更したり、割引を付与したりすることができます。カート内のアイテムが追加、削除、変更するたびに実行されます。
-
Shipping scripts - 配送方法を変更したり、配送料金の割引を適用したりすることができます。顧客がチェックアウトの配送オプションページにアクセスするたびに実行されます。
-
Payment scripts - 支払いゲートウェイの名前を変更、非表示にしたり、再注文したりすることができます。顧客がチェックアウト時に支払い方法のページにアクセスするたびに実行されます。PayPal ExpressやApple Payなど、チェックアウトの前に顧客に表示される支払いゲートウェイとは相互作用しません。
Shopifyスクリプトには、いくつかのテンプレートが用意されており、実際に作成する際は、テンプレートを選択して、ニーズに合わせて編集することができます。
以下のようなテンプレートがあります。
- percentage (%) off a product：割引 (%)
- amount ($) off a product：割引 ($)
- percentage (%) and amount ($) off a product：割引
- bulk discounts：まとめ割
- buy one get one free (BOGO)：一つ買うと一つ無料（BOGO）
- modify shipping rate price：送料価格を変更する
- modify shipping rate name：変更送料名
- hide shipping rates：送料を隠す
- re-order shipping rates：再注文送料
- modify payment gateway name：決済ゲートウェイ名を変更する
- hide payment gateway：非表示の支払いゲートウェイ
- re-order payment gateways：再注文決済ゲートウェイ
Shopifyスクリプトの詳細については、Shopifyスクリプトとスクリプトエディタのヘルプコンテンツを参照してください。
scriptオブジェクトの属性を見ていきましょう。
script.id
スクリプトのIDを返します。
script.name
スクリプトの名前を返します。
{% if scripts.cart_calculate_line_items %}
<p>Check out our sale: {{ scripts.cart_calculate_line_items.name }}</p>
{% endif %}
Check out our sale: Buy one chambray shirt and get a second for half price
searchオブジェクト
searchオブジェクトの概要についてドキュメントからの引用です。
searchオブジェクトは、検索結果や一致した検索結果の数などの情報を返します。
search.performed
action="/search"を持つHTMLフォームが正常に送信された場合に、trueを返します。
これにより、検索された時にコンテンツを表示することができます。
{% if search.performed %}
<!-- Show search results -->
{% endif %}
search.results
検索に一致する項目の配列を返します。
- article
- page
- product
search.resultsをループさせることで、個々の検索結果にアクセスすることが出来ます。
{% for item in search.results %}
<h3>{{ item.title | link_to: item.url }}</h3>
{% endfor %}
検索結果には、object_typeというタイトルの追加属性があり、各結果の型を返します。
以下の例では、object_typeによる制御フローを書いています。
{% for item in search.results %}
<h3>{{ item.title | link_to: item.url }}</h3>
{% if item.object_type == 'article' %}
{% comment %}
'item' is an article
All article object properties can be accessed.
{% endcomment %}
{% if item.image %}
<div class="result-image">
<a href="{{ item.url }}" title="{{ item.title | escape }}">
{{ item | img_url: 'small' | img_tag: item.title }}
</a>
</div>
{% endif %}
{% elsif item.object_type == 'page' %}
{% comment %}
'item' is a page.
All page object properties can be accessed.
{% endcomment %}
{% else %}
{% comment %}
'item' is a product.
All product object properties can be accessed.
{% endcomment %}
{% if item.featured_image %}
<div class="result-image">
<a href="{{ item.url }}" title="{{ item.title | escape }}">
{{ item.featured_image | img_url: 'small' | img_tag: item.featured_image.alt }}
</a>
</div>
{% endif %}
{% endif %}
<span>{{ item.content | strip_html | truncatewords: 40 | highlight: search.terms }}</span>
{% endfor %}
search.results_count
一致した検索結果の数を返します。
search.terms
検索欄に入力された文字列を返します。
以下の例のようにhighlightフィルタを使って、検索結果の中でsearch.termsと一致するインスタンスに異なる style を適用することも出来ます。
highlightフィルターは、検索範囲内の一致した文字列をHTMLの<strong>タグでラップし、クラスに highlight を与えます。
{{ item.content | highlight: search.terms }}
<!-- If the search term was "Yellow" -->
<strong class="highlight">Yellow shirts are the best!
search.types
検索が実行されたタイプを表す文字列の配列を返します。
配列に含まれる項目は、article、page、productのいずれかになります。
検索タイプは、検索ページのURLパラメータで確認することができます。
例えば、URLが、storefront.com/search?type=article,product&q=*の場合、search.typesの配列には、articleとproductが入ります。
終わりに
今回の記事はここまでになります。
お疲れさまでした。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。