【shopifyテーマ開発】おしゃれなFAQページをLiquidで実装

こんにちは。PeiWebです。
今回は、shopifyでFAQを実装したので、アウトプットします。
使い回しもできるのでけっこうおすすめです。

完成形

完成したFAQページ

まずは、FAQの固定ページを作成していきます。

jsonファイルの作成

json

{
  "sections": {
    "main": {
      "type": "main-page-faq",
      "settings": {}
    }
  },
  "order": ["main"]
}

今回は、FAQページを作成するセクションを読み込ませたいので、typeをmain-page-faqとしました。これで、セクションフォルダにmain-page-faq.liquidファイルを読み込ませることができます。

schemaの定義

次に、セクションフォルダ内にliquidファイル「main-page-faq.liquid」を作成します。
schemaの定義はこんな感じです。

liquid

{% schema %}
{
 "name": "FAQ",
 "tag": "section",
 "class": "faq-section",
 "blocks":[
   {
     "name": "質問項目",
     "type": "faq",
     "settings": [
       {
         "id": "question",
         "label": "質問",
         "type": "text",
         "default": "質問を入力してください"
       },
       {
         "id": "answer",
         "label": "回答",
         "type": "richtext",
         "default": "<p>回答を入力してください</p>"
       }
     ]
   }
 ]
}
{% endschema %}

質問と回答の項目はループして使えるように、blocksの中に、settingを追加しました。
質問は、type : textにしましたが、回答は太字とかできるようにtype: richtextに変更しました！　richtextの際には、deault:<p>....</p>のようにデフォルトに<p>タグつけないと怒られました。。。

shopify上で、どのように表示されるか確認します。
セクションの中身
質問項目のsettingsの中身

しっかり実装されていますね^^

次に、HTML,CSSを組み込んでページを表示させていきます。

FAQページを実装

まずは、liquidファイルはこんな感じです。

liquid

<link rel="stylesheet" href="{{ 'section-main-page.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'page-faq.css' | asset_url }}" media="print" onload="this.media='all'">
 
<noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
 
<div class="page-width page-width--narrow">
  <h1 class="main-page-title page-title h0">
    {{ page.title | escape }}
  </h1>
  <div class="rte">
    {{ page.content }}
  </div>
 </div>
{% comment %} FAQの中身 {% endcomment %}
<div class="faq__contents">
  {% for block in section.blocks %}
  {% assign item = block.settings %}
	<div class="faq__contents--tab">
		<input id="tab-checkbox__{{forloop.index }}" type="checkbox" name="tabs">
		<label for="tab-checkbox__{{forloop.index }}">
		{{ item.question }}</label>
		<div class="faq__contents--answer">
		  {{ item.answer }}
		</div>
	</div>
  {% endfor %}
</div>

FAQの中身を見ていきます。
まず、block.settingsはよく使うので、変数として定義しておきます。
FAQなので、チェックボックスを使います。inputのidとlabelのforは一致する必要があります。
そして、idは重複してはいけないというルールがあるので、質問の項目ごとにidを変えなくてはいけません。そこで、'forloopオブジェクト'を用いて、{{ forloop.index }}でループした回数を取得します。
最後に、schemaで定義した質問と回答の変数{{ item.question }}, {{ item.answer }}を記載すれば完了です。

あとは、CSSを記述するだけです。

CSSファイル

cssファイルはこんな感じ。。

css

.faq__contents,
.faq__contents ::after,
.faq__contents ::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.faq__contents .faq__contents--tab {
  position: relative;
  margin: 10px 10px;
  width: 90%;
  color: #f7f7f7;
  overflow: hidden;
}

.faq__contents .faq__contents--tab input {
  position: absolute;
  opacity: 0;
}

.faq__contents .faq__contents--tab label {
  display: block;
  position: relative;
  line-height: 1.6em;
  margin: 0;
  padding: 1em 2em 1em 2.5em;
  cursor: pointer;
  text-indent: 1em;
  border-radius: 0.5em;
  background: rgba(7, 114, 222, 0.7);
  font-weight: 700;
}

.faq__contents .faq__contents--tab label::before {
  /* font-family: serif; */
  font-size: 1.5em;
  margin-left: -2em;
  padding-right: 0.5em;
  content: 'Q : ';
}

.faq__contents .faq__contents--tab label:hover {
  transition: all 0.3s;
  background: rgba(16, 109, 201, 0.9);
}

.faq__contents .faq__contents--tab label::after {
  content: '+';
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.7em;
  font-weight: 700;
  line-height: 2em;
  width: 2em;
  height: 2em;
  -webkit-transition: transform 0.4s;
  transition: transform 0.4s;
}


.faq__contents .faq__contents--tab .faq__contents--answer {
  position: relative;
  overflow: hidden;
  max-height: 0;
  padding: 0 0 0 2.5em;
  -webkit-transition: max-height 0.2s;
  transition: max-height 0.2s;
  border-radius: 0 0 0.5em 0.5em;
  background: rgba(7, 114, 222, 0.7);
}

.faq__contents .faq__contents--tab .faq__contents--answer::before {
  position: absolute;
  margin: 0.4em 0 0 -1em;
  padding: 0;
  font-size: 1.4em;
  content: 'A : ';
  color: rgb(40, 40, 40);
}

.faq__contents .faq__contents--tab .faq__contents--answer p {
  margin: 1em;
  color: rgb(40, 40, 40);
}

.faq__contents .faq__contents--tab input:checked~.faq__contents--answer {
  max-height: 40em;
  background-color: #f6f6f6;
}


.faq__contents .faq__contents--tab input:checked~label {
  border-radius: 0.5em 0.5em 0 0;
}

.faq__contents .faq__contents--tab input[type=checkbox]:checked+label::after {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

色とか、余白とかフォントとか自由にカスタマイズすることができます。個人的には、hoverするときは、背景色を色を濃くしたりするのが好きです。

---

最後に、、、
少しでも参考になれば記事にイイねしていただけますと嬉しいです。

Webサイト & ECサイト構築のご相談・ご依頼はTwitterのDMまでお願いいたします！
お待ちしております^^
https://twitter.com/pei_traveler

---