[Shopify]ファーストビューに検索機能＋サジェストキーワードをポコポコ追加できるセクション(Dawn) 44/100
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
先日ご紹介した背景＋検索機能つきのメインビジュアルのセクションに、サジェストキーワードを追加できる機能をつけました♪
↓前回の記事↓
キーワードはCMSから追加・編集・削除ができます♪
検索窓だけあってもどんなキーワードで探したらいいのかわからず、結局使わないことって私はよくあるんですよね〜
なので、そんな私のようなユーザー向けにサキーワードで教えてあげて、クリックすると、検索画面へ遷移するセクションを作りました。
✔️今回のゴール
✔️CMSの特徴
keywordsを追加クリックするとポコポコ追加できます。
keywordsを押すと下記の画面へ遷移してキーワドを入力できます。
「サーチwithサジェスト」タイトルをクリックすると、
タイトル
リード文
各種カラー設定
✔️設置方法
Step1 セクションファイル新規作成
管理画面＞コード編集＞Sections＞新しいSection追加
ファイル名はなんでもOK
今回はtop-search-suggestにしました
Step2 テンプレートコードコピペ
サンプルコード用意しました。
下記のコードを先ほど作成したファイルにコピペ。
◆サンプルコード
サンプルコードではサジェストキーワードが最大３つまで追加できます。レイアウトはフルバージョンと同じです。
なるべく簡単に設置できるように、CSSは１ファイルにまとめておきました♪
{% style %}
.hero_search {
height: auto;
text-align: center;
padding: 8rem 2rem;
}
@media (min-width: 750px) {
.hero_search {
padding: 8rem;
}
}
.suggest-keywords-feild {
margin: 2rem 0;
}
@media (min-width: 750px) {
.suggest-keywords-feild {
padding: 2rem 5rem;
}
}
.suggest-keywords {
list-style: none;
padding: 0;
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
@media (min-width: 750px) {
.suggest-keywords {
max-width: 60%;
margin: auto;
}
}
.suggest-keywords a {
text-decoration: none;
padding: 0.5rem 1.8rem;
border-radius: 3rem;
font-size: 1.4rem;
}
.suggest-keywords a:hover {
opacity: .8;
}
.search-feild .kv_search {
color: #fff;
width: 6rem;
border-radius: 3rem;
height: 100%;
}
@media (min-width: 750px) {
.search-feild .kv_search {
width: 20%;
}
}
.search-feild .field__input {
border-radius: 3rem;
}
.search-feild .field::after {
box-shadow: none;
}
.search-feild .field:hover.field:after {
box-shadow: none;
}
.search-feild .field__input:focus {
box-shadow: none;
}
.search-feild .field__button > svg {
height: 1.6rem;
width: 1.6rem;
}
@media (min-width: 750px) {
.search-kv__form {
max-width: 70%;
margin: auto;
}
}
.search-contents h2 {
color: {{ section.settings.color_heading }};
}
.search-contents p {
color: {{ section.settings.color_lead }};
}
.suggest-keywords a {
color: {{ section.settings.color_tag }};
background: {{ section.settings.color_tagbk }};
}
.search-feild .kv_search {
background-color: {{ section.settings.color_iconbk }};
}
.search-feild .field__input:focus {
border: 2px solid {{ section.settings.color_border }};
}
{% endstyle %}
<div class="hero_search" style="background: url('{{ section.settings.img | img_url: 'master' }}') no-repeat center center / cover;">
<div class="search-contents">
<h2>{{ section.settings.header }}</h2>
<p>{{ section.settings.lead }}</p>
<div class="search-feild">
<form action="{{ routes.search_url }}" method="get" role="search" class="search search-kv__form">
<div class="field">
<input class="search__input field__input"
id="Search-In-Modal-1"
type="search"
name="q"
value=""
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="field__button kv_search" 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 class="suggest-keywords-feild">
<ul class="suggest-keywords">
{% for block in section.blocks %}
<li><a href="../search?q={{ block.settings.word }}">{{ block.settings.word }}</a></li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
{% schema %}
{
"name": "サーチwithサジェスト",
"tag": "section",
"settings": [
{
"type": "image_picker",
"id": "img",
"label": "背景画像"
},
{
"type": "text",
"id": "header",
"label": "タイトル"
},
{
"type": "html",
"id": "lead",
"label": "リード文"
},
{
"type": "paragraph",
"content": "-------テキストカラー-------"
},
{
"type": "color",
"id": "color_heading",
"label": "タイトルカラー",
"default": "#ffffff"
},
{
"type": "color",
"id": "color_lead",
"label": "リード文カラー",
"default": "#ffffff"
},
{
"type": "paragraph",
"content": "-------検索窓カラー-------"
},
{
"type": "color",
"id": "color_border",
"label": "検索窓枠カラー（クリック時）",
"default": "#2e3860"
},
{
"type": "color",
"id": "color_iconbk",
"label": "送信ボタン背景",
"default": "#0077d5"
},
{
"type": "paragraph",
"content": "-------サジェストカラー-------"
},
{
"type": "color",
"id": "color_tag",
"label": "キーワード文字カラー",
"default": "#ffffff"
},
{
"type": "color",
"id": "color_tagbk",
"label": "キーワード背景カラー",
"default": "#ffd3b3"
}
],
"blocks": [
{
"name": "keywords",
"type": "select",
"limit": 3,
"settings": [
{
"type": "text",
"id": "word",
"label": "キーワード"
}
]
}
],
"presets": [
{
"name": "サーチwithサジェスト"
}
]
}
{% endschema %}以上で完了です♪
CMSのセクション追加で「サーチwithサジェスト」が追加されてます。
✔️コピペで簡単！フルコード
サンプルコードではキーワード追加上限が３つでしたが、フルバージョンでは制限なしですので３つ以上追加可能になります。レイアウトは同じです。
MAX何個までなのか、、、少なくとも20個は追加できました！
まだまだ追加できそうでしたが、途中で面倒になりそれ以上は確認してませんw
【ご注意】
※返金&サポートはしておりません。
※Dawnテーマ対象です。
別テーマでも使用できるかもしれませんが検証してません。
※コードのみのご紹介で解説などはしておりません。
※2022.5.31時点のコードです。メンテナンスは今後する予定はありません。
ここから先は
6,312字
この記事が気に入ったらサポートをしてみませんか？