【Shopify】liquidのオブジェクトについてまとめてみた (routes, script, search)

#はじめに
この記事では、Liquidオブジェクトについて日本語訳したものです。

`routes`、`script`、`search`のオブジェクトをまとめていきます。

[こちら](https://shopify-dev.shopifycloud.com/docs/themes/liquid/reference/objects)を参考にしました。

#routesオブジェクト
routesオブジェクトの概要について[ドキュメント](https://shopify-dev.shopifycloud.com/docs/themes/liquid/reference/objects/routes)からの引用です。

>`routes`オブジェクトを使用して、ストアフロント（トップページ）への動的なURLを生成することができます
テーマで複数の言語をサポートする際にも`routes`オブジェクトを使用します。

##routes.root_url
ストアのベース（トップページ）URLを返します。

```.liquid
{{ routes.root_url }}
```
>/

##routes.account_url
アカウントページのURLを返します。

```.liquid
{{ routes.account_url }}
```
>/account


##routes.account_login_url
アカウントのログインページのURLを返します。

```.liquid
{{ routes.account_login_url }}
```
>/account/login



##routes.account_logout_url
アカウントのログアウトページのURLを返します。

```.liquid
{{ routes.account_logout_url }}
```
>/account/logout

##routes.account_register_url
アカウント登録ページのURLを返します。

```.liquid
{{ routes.account_register_url }}
```
>/account/register



##routes.account_addresses_url
会員アカウントに関連付けられたアドレスを管理できるページのURLを返します。

```.liquid
{{ routes.account_addresses_url }}
```
>/account/addresses


##routes.collections_url
コクションページのURLを返します。

```.liquid
{{ routes.collections_url }}
```
>/collections


##routes.all_products_collection_url
ストア内の全商品を含むコレクションのURLを返します。

```.liquid
{{ routes.all_products_collection_url }}
```
>/collections/all

##routes.search_url
検索するためのURLを返します。

```.liquid
{{ routes.search_url }}

```
>/search


##routes.cart_url
カートページのURLを返します。

商品の`variant.id`、`item.key`を用いて少なくとも1つのアイテムを指定する必要があります。

```.liquid
{{ routes.cart_url }}
```
>/cart

##routes.cart_add_url
カートに商品を追加するためのURLを返します。

```.liquid
{{ routes.cart_add_url }}
```
>/cart/add


カートに一つや複数のバリアントを追加するには、`POST/cart/add.js`エンドポイントを使用します。

カートに追加するには、`variant.id`または`item.key`を用いて少なくとも1つのアイテムを指定する必要があります。

`quantity`は追加したい量、`id`はその商品の variant ID を指定します。

複数のvariantをカートに追加するには、`items`配列にオブジェクトを追加します。

```.liquid
items: [
  {
   id: 36110175633573,
   quantity: 2
  }
]
```

シリアル化されたカートへの追加フォームを送信するには、以下のポスターデータを指定します。

シリアルかとは、オブジェクトをバイト列やテキストに変換することを言います。

```.js
jQuery.post('/cart/add.js', $('form[action="/cart/add"]').serialize());
```
また、数量やIDだけでなく、ラインアイテムのプロパティでカートに追加することも出来ます。

```.liquid
jQuery.post('/cart/add.js', {
  items: [
    {
      quantity: 1,
      id: 794864229,
      properties: {
        'First name': 'Caroline'
      }
    }
  ]
});
```


詳細については、、[Ajax Cart API](https://shopify-dev.shopifycloud.com/docs/themes/ajax-api/reference/cart#post-cart-add-js) リファレンスを参照してください。


##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](https://shopify-dev.shopifycloud.com/docs/themes/ajax-api/reference/cart#post-cart-change-js) リファレンスを参照してください。

```.liquid
{{ routes.cart_change_url }}
```
>/cart/change



##routes.cart_clear_url
カートをクリアできるURLを返します。

```.liquid
{{ routes.cart_clear_url }}
```
>/cart/clear



##routes.product_recommendations_url
おすすめ商品情報のURLを返します。

```.liquid
{{ routes.product_recommendations_url }}
```
>/recommendations/products





#scriptオブジェクト
scriptオブジェクトの概要について[ドキュメント](https://shopify-dev.shopifycloud.com/docs/themes/liquid/reference/objects/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
スクリプトの名前を返します。

```.liquid
{% 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オブジェクトの概要について[ドキュメント](https://shopify-dev.shopifycloud.com/docs/themes/liquid/reference/objects/search)からの引用です。

>`search`オブジェクトは、検索結果や一致した検索結果の数などの情報を返します。

##search.performed

`action="/search"`を持つHTMLフォームが正常に送信された場合に、`true`を返します。

これにより、検索された時にコンテンツを表示することができます。

```.liquid
{% if search.performed %}
    <!-- Show search results -->
{% endif %}
```


##search.results
検索に一致する項目の配列を返します。

+ article
+ page
+ product

`search.results`をループさせることで、個々の検索結果にアクセスすることが出来ます。

```.liquid
{% for item in search.results %}
  <h3>{{ item.title | link_to: item.url }}</h3>
{% endfor %}
```

検索結果には、`object_type`というタイトルの追加属性があり、各結果の型を返します。

以下の例では、`object_type`による制御フローを書いています。

```.liquid
{% 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 を与えます。

```.liquid
{{ item.content | highlight: search.terms }}
```
>\<!-- If the search term was "Yellow" -->
\<strong class="highlight">Yellow</strong> 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 機能を実現することができます。

https://coming-soon.reterior.jp/

https://apps.shopify.com/shopify-application-314?locale=ja&surface_detail=%E3%83%AA%E3%83%86%E3%83%AA%E3%82%A2&surface_inter_position=1&surface_intra_position=1&surface_type=search