LoginSignup
15
6

More than 1 year has passed since last update.

@eijiSaito(eiji saito)in株式会社UnReact

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

Last updated at Posted at 2021-02-24

はじめに

この記事では、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 機能を実現することができます。

15
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
15
6