

【Shopify】(随時更新)便利なオブジェクト - #番外編

Shopifyには、商品やコレクションなど様々なオブジェクトが存在します。
今回は、たまに使う、便利なオブジェクトを紹介していきます。
この記事は随時更新します。
■バックナンバー
- #01 - ローカルで開発する環境を構築する手順
- #02 - 無料テーマのディレクトリ構造の解説
- #03 - 仕様や用語、開発の流れの解説
- #04 - 独自言語「liquid」の基本的な書き方
- #05 - 動的な情報を出力できるオブジェクトとプロパティについて
- #06 - 商品一覧ページのカスタマイズ方法
- #07 - TOPページに商品一覧を新着順で出力する
- #08 - Content Schemaを理解して、管理画面からサイトをカスタマイズできるようにする
- #09 - 商品検索を理解する
- #番外編 - (随時更新)開発Tips
- #番外編 - (随時更新)便利なオブジェクト
- #オブジェクトの中身を確認する(PHPのprint_rやJavaScriptのconsole.logのようなイメージ)
おすすめ商品
https://shopify.dev/docs/themes/liquid/reference/objects/recommendations
商品詳細ページで、その商品に関連する商品を取得できるオブジェクトです。
{% if recommendations.performed %}
{% if recommendations.products_count > 0 %}
{% for product in recommendations.products %}
{{ product.title | link_to: product.url }}
{% endfor %}
{% endif %}
{% else %}
<div class="placeholder">Placeholder animation</div>
{% endif %}
利用可能な決済手段のアイコン一覧
https://shopify.dev/docs/themes/liquid/reference/objects/shop#shop-enabled_payment_types
以下のように、Shopify上で利用可能な決済手段のアイコンを一覧で取得できるオブジェクトです。
{% unless shop.enabled_payment_types == empty %}
<div class="payment-icn">
<ul class="payment-icn__lists">
{% for type in shop.enabled_payment_types %}
<li class="payment-icn__item">
{{ type | payment_type_svg_tag: class: 'icon' }}
</li>
{% endfor %}
</ul>
</div>
{% endunless %}
まとめ
■バックナンバー
- #01 - ローカルで開発する環境を構築する手順
- #02 - 無料テーマのディレクトリ構造の解説
- #03 - 仕様や用語、開発の流れの解説
- #04 - 独自言語「liquid」の基本的な書き方
- #05 - 動的な情報を出力できるオブジェクトとプロパティについて
- #06 - 商品一覧ページのカスタマイズ方法
- #07 - TOPページに商品一覧を新着順で出力する
- #08 - Content Schemaを理解して、管理画面からサイトをカスタマイズできるようにする
- #09 - 商品検索を理解する
- #番外編 - (随時更新)開発Tips
- #番外編 - (随時更新)便利なオブジェクト
- #オブジェクトの中身を確認する(PHPのprint_rやJavaScriptのconsole.logのようなイメージ)