Shopifyストア内「検索結果」一覧ページを修正を考慮する方のために、事前に知っておくべき基本的な事６選を紹介します。
Shopifyすごい！ノーコードでECサイトが作れる！と絶賛されるものの「ここはちょっと変えたい」と、すでに用意されたデフォルトデザインやレイアウトを修正したくなります。
中でもあらゆる「商品一覧」たとえば、トップページ表示の一覧やコレクションの一覧ページは、商材の特徴を生かしたオリジナルデザインを施したいものです。
自作の商品一覧やコレクションページの修正は、たくさんの運営者が手を加えるのですが、意外と「検索結果」一覧ページに対しては「デフォルトのまま」が多い気がします。
という事で今回は、自分の備忘録を兼ねて「検索結果」一覧ページを修正を考慮する方のために、事前に知っておくべき基本的な事６選を紹介したいと思います。
修正するファイル
検索結果を構成するファイルは「セクション > main-search.liquid」です。（*使用するテーマによって変わるかもしれません）
個々の「検索結果(アイテム)」のデザインやレイアウトに修正を加えたい場合は、ファイルの約262行にある、
{%- for item in search.results -%}
{% assign lazy_load = false %}
{%- if forloop.index > 2 -%}
{%- assign lazy_load = true -%}
{%- endif -%}
<li
class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
{% endif %}
>
{%- case item.object_type -%}
{%- when 'product' -%}
：
中略をご確認ください。
「商品」だけに絞って検索
基本的に、ユーザーの検索キーワードに対して関連する、
・商品(Product)
・ブログ記事(Article)
・ページ(Page)
の３つがすべて表示されます。
もし、最初から商品のみの検索結果にしたい場合は、の下に、以下のコードを挿入します。
<input type="hidden" name="type" value="product">詳しい説明は、以下の記事をおぜひご一読ください。
【Shopify小技】自作「検索窓パーツ」を作りたい！しかも商品のみに‥
「search.results」とは
検索に対象になる〇〇〇を取り出すために使用するループコードは、
{%- for item in search.results -%}
：
{%- endfor -%}になります。
search.resultsは、Liquidオブジェクトで、検索にマッチするアイテムの配列を返します。
検索結果の配列要素は「item」
検索結果の配列要素は「item」になります。
そのため、要素のタイトルやURLを取得するためには、
item.title →タイトル
item.url →URL
item.price →価格
item.featured_image →サムネイル
というコードを用います。
オリジナルレイアウトやデザインにする際に、article.titleやprodut.urlにしがちですが、ブログ記事であれ、商品であれ、すべてitem.〇〇〇になるので、ぜひ覚えておいてくださいう。
「object_type」とは
配列要素「item」は、上述したようにブログ記事、商品、ページのいずれです。そのため、それぞれの仕様にあった表示方法などを実装するためには、「object_type(オブジェクト・タイプ)」で条件分岐を施す必要があります。
{% if item.object_type == 'product' %} →「item」が「商品」
{% if item.object_type == 'article' %} →「item」が「ブログ記事」
{% if item.object_type == 'page' %} →「item」が「ぺージ」
テーマによって違うかもしれませんが、「検索結果」のデフォルトファイルには、以下のように条件分岐が行われています。
{%- case item.object_type -%}
{%- when 'product' -%}
{%- when 'page' -%}
{%- when 'article' -%}
{%- endcase -%}「item」のプロパティで条件分岐
「itme」が持つプロパティで条件分岐も可能性です。
例えば、現在販売中（在庫がある）商品のみを検索結果の対象にしたい場合は、
{%- if item.available -%}と、availableプロパティで条件分岐。
また、セール中の商品のみを対象にしたい時は、compare_at_priceプロパティを用いて条件分岐すればOKです。
{%- if item.compare_at_price -%}
