【shopifyテーマ開発】サイト内検索のセクション作成
こんばんは。PeiWebです。今回は、トップページにサイト内検索するセクションを制作してみました✨
完成形
まずは、完成形を見ていきます。
通常、デフォルトのバリデーションの設定では以下のようになっていますが、
それでは、実装していきます。
Liquidを用いたカスタマイズ
早速、実装していきます。まずは、いつも通り、Schemaから定義していきます。
一例として、定義するSchemaは以下です。
赤色の枠のところを実装していきます。
custom-index-search.liquid
今回、サイト内検索の制作を行うセクションを「custom-index-search.liquid」とします。
Schemaの定義
{% schema %}
{
"name": "サイト内検索",
"limit": 1,
"settings": [
{
"type": "html",
"id": "header",
"label": "タイトル",
"default": "何かお探しですか？"
}, {
"type": "image_picker",
"id": "img",
"label": "画像"
}, {
"type": "color",
"id": "color_txt",
"label": "テキストカラー",
"default": "#ffffff"
}
],
"presets": [
{
"name": "検索窓"
}
]
}
{% endschema %}
サイト内検索は、サイト内で1個しか必要ないので「"limit": 1」としております。
タイトル、画像、テキストカラーを加えております。
HTML追記
続いて、HTMLを追記していきます。
以下のコードがあるが確認できます。
{% style %}
.index_search p,
.index_search h2 {
color: {{ section.settings.color_txt }}
;
}
{% endstyle %}
<div class="page-width-search index_search" style="background: url('{{section.settings.img | img_url: 'master' }}') no-repeat center center / cover;">
<div class="index_search_contents">
<h2 class="center">{{ section.settings.header }}</h2>
<div class="search_form_feild">
<form
action="{{ routes.search_url }}"
method="get"
role="search"
class="search search-modal__form">
<div class="field">
<input
class="search__input field__input"
id="Search-In-Modal-1"
type="search"
name="q"
value="{{ search.terms | escape }}"
placeholder="{{ 'general.search.search' | t }}"
{%- if settings.predictive_search_enabled -%}
role="combobox"
aria-expanded="false"
aria-owns="predictive-search-results-list"
aria-controls="predictive-search-results-list"
aria-haspopup="listbox"
aria-autocomplete="list"
autocorrect="off"
autocomplete="off"
autocapitalize="off"
spellcheck="false"
{%- endif -%}>
<label class="field__label" for="Search-In-Modal-1">{{ 'general.search.search' | t }}</label>
<input
type="hidden"
name="options[prefix]"
value="last">
<button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
<svg
class="icon icon-search"
aria-hidden="true"
focusable="false"
role="presentation">
<use href="#icon-search"></svg>
</button>
</div>
{%- if settings.predictive_search_enabled -%}
<div
class="predictive-search predictive-search--header"
tabindex="-1"
data-predictive-search>
<div class="predictive-search__loading-state">
<svg
aria-hidden="true"
focusable="false"
role="presentation"
class="spinner"
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/svg">
<circle
class="path"
fill="none"
stroke-width="6"
cx="33"
cy="33"
r="30"></circle>
</svg>
</div>
</div>
<span
class="predictive-search-status visually-hidden"
role="status"
aria-hidden="true"></span>
{%- endif -%}
</form>
</div>
</div>
</div>
今回、shopifyテーマ「down」の検索結果のファイル「main-search.liquid」から検索窓を引用しました。
詳しく解説していきます。
routes.search_url
以下のような検索ページを返します。
こちらは、routeオブジェクトに、「search_url」が追記した形となっております。
参考までに、他のプロパティも紹介していきます。
| プロパティ | 返すページ |
|---|---|
| account_addresses_url | ログインページ |
| account_logout_url | ログアウトページ |
| account_register_url | アカウント登録ページ |
| account_url | アカウントページ |
| cart_url | 購入画面(カートのページ) |
| collections_url | コレクションページ |
| root_url | ホーム画面 |
search.terms | escape
検索語句を返します。そのため、検索する値を入力し検索ページに飛ばすために、valueオプションに記載しております。
また、異なるスタイルを適用するハイライトフィルターを使うことが可能です。
general.search.search | t
こちらは、対応する言語の言葉を返しております。
言語は、日本語設定にされているので、日本語の翻訳ファイル「ja.json」をみていきます。
"search": {
"search": "検索",
"reset": "検索ワードをクリアする"
}
"検索"と記載されているため、placeholderには、「検索」と表示されます。
settings.predictive_search_enabled
こちらは、日本語のschemaの設定をおこなている「ja.schema.json」に以下のように記載されております。
"search_input": {
"name": "検索行動",
"settings": {
"header": {
"content": "商品のおすすめ"
},
"predictive_search_enabled": {
"label": "商品のおすすめを有効にする"
},
"predictive_search_show_vendor": {
"label": "販売元を表示",
"info": "商品のおすすめが有効な場合に表示されます。"
},
"predictive_search_show_price": {
"label": "価格を表示",
"info": "商品のおすすめが有効な場合に表示されます。"
}
}
},
つまり、「商品のおすすめを有効にする」にしているかどうかで条件分岐されていることがわかりますね。
CSS
これで、骨組みは終わりましたので、あとはCSSで調整するだけですね。
.index_search {
height: 50vh;
padding: 5rem 2rem;
display: table;
width: 100%;
}
@media (min-width: 750px) {
.index_search {
padding: 5rem;
}
}
.index_search .index_search_contents {
display: table-cell;
vertical-align: middle;
}
.search-modal__form {
margin: auto;
}
@media (max-width: 749px) {
.page-width-search {
padding-left: 2rem;
padding-right: 2rem;
}
}
.field__button{
top: 0 !important;
right: 0 !important;
}
.field__label {
top: 10px !important;
left: 10px !important;
}
最後に、、、
少しでも参考になれば記事にイイねしていただけますと嬉しいです。
Webサイト & ECサイト構築のご相談・ご依頼はTwitterのDMまでお願いいたします！
お待ちしております^^
Discussion