BASE のショップにコメント欄を置く

関門はプランではなくテーマにある

お金の話を先に片づけます。ほかのサービスの解説だと、たいていここで話が止まるからです。BASE はプランを、作れるものではなく請求のしかたで分けています。ヘルプにはこう書かれています。"「BASEかんたん決済手数料」「サービス利用料」以外に、プランによって利用できる機能に違いはありません"。BASE Apps の HTML編集 の料金欄は 無料 で、独自ドメイン も同じです。この記事はプランを上げてくださいとは一度も言いません。

効いてくる条件は同じ Apps の紹介文のほうにあります。"無料のオフィシャルテーマを元に、HTML編集をすることはできません"。編集の元にできるのは「新規作成（サンプル）」、つまり白紙のサンプルと、デザインマーケットで購入したデザイナーズテーマだけです。これは技術の話というよりデザインの選択です。サンプルから店構えを組み直すつもりなら、この道は最後まで無料で通ります。いまの見た目を残したくて、それが無料の公式テーマ由来なら、実際の最初の一歩はデザイナーズテーマを買うことになります。

実際に置かれるもの

近道に見えて、近道ではない App

コードに少しでも触ったことのあるショップなら、HTMLタグ管理 App はもうご存じだと思います。無料で、GA4 や Google Tag Manager や広告のタグを入れる場所で、テーマを開かなくてもタグを受け取ってくれます。だからウィジェットのスクリプトもここに貼りたくなります。貼れます。スクリプトの読み込みまで進みます。そこから何も起きません。理由は BASE 自身が書いています。

ヘルプは置き場所を選ばせません。"タグの設置箇所の選択はできません。headタグ内に反映されます"。同じページには、この App でできないこととして "bodyタグ内を編集する" が挙がっています。カスタムタグが届く範囲は "カート画面とレジ画面をのぞいた、すべてのページのheadタグ内" です。設置箇所を選べるようにする更新には触れられていますが、日付は付いていません。"具体的な日程についてはまだ決まっておりません" とあります。

コメント欄が必要とするものと並べると、ずれが正確に見えます。ローダーは head から届いてもかまいません。動き出したローダーはマウント用の要素を探し、見つからなければ何も言わずに終わります。ウィジェットのないページはただの正常なページだからです。結果としてショップはスクリプトを1つ読み込み、見た目は前とまったく同じままになります。探すべきエラーがどこにも出ない、いちばん高くつく「何も起きない」です。

両方入れておくのは問題ありません。BASE は "「HTMLタグ管理 App」と「HTML編集 App」は、あわせてご利用いただけます" と書き、同じタグを二重に設定すると正常に動かないことがあると注意を添えています。使い分けとしては、計測タグはそのまま置いておいて、ウィジェットはテーマに持たせるのが素直です。

設置の手順

1. ショップが答える住所を2つとも書き出す

   BASE のショップには開設時に決めた無料の .base.shop の住所があり、BASE は "ショップ開設時に登録したURLは、後から変更することができません" と明記しています。独自ドメインは 独自ドメイン App から入り、ドメイン側の CNAME を cname.thebase.in に向けて、反映まで最大 72時間 待ちます。ルートドメインもサブディレクトリも対象外なので、shop. や store. のようなサブドメインになります。独自ドメインを当てたあと元の .base.shop が生き続けるのかどうかは、この記事で読んだ BASE の各ページに書かれていません。わからないものはわからないままにして、BootSignal のダッシュボードに両方とも登録しておくのが早いです。example.com を登録すれば shop.example.com も通ります。ホスト名の判定が登録ドメインのサブドメインを受け入れるからです。返ってくるのがサイト ID です。

2. Apps から HTML編集 を入れる

   BASE Apps の一覧で HTML編集 を開いてインストールします。紹介文はできるようになることを "HTML / CSS / JavaScriptなどを編集できるようになります" と説明しています。入れた直後のショップは見た目が変わりません。この App が足すのはエディタで、テーマを差し替えてくれるわけではないからです。

3. 編集してよいテーマを1つ作る

   ショップ管理画面でデザインを開き、＋テーマを作成する に進みます。サンプルから始めるなら「新規作成」、デザイナーズテーマを買ってあるなら「購入したテーマを元に新規作成」を選び、「このテーマを元に作成」で確定します。1文字書く前に、ソースを自分のパソコンのファイルにコピーしておいてください。このエディタに取り消しはありませんし、あとでテーマを選び直すと編集した内容が上書きされます。

4. ローダーはソースの共通部分に置く

   ヘッダーやフッターのマークアップはどのブロックタグにも入らない場所に書かれています。ローダーも同じ扱いで、閉じる </body> の直前に置きます。あとで何を足しても、ショップが読み込む BootSignal のスクリプトはこの1本のままです。

   コードコピー

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="ja" defer></script>

5. マウント用の div は出したいページのブロックの中へ

   コメント欄を出したいページを囲んでいるブロックタグを探して、その内側に div を貼ります。同じソースがすべてのページを描くので、スレッド ID を固定で書くとショップ全体が1つの会話を共有してしまいます。div の下の数行は、それをアドレスから読み取ります。ここに BASE 特有の書き方は出てきません。

   コードコピー

   <div id="bs-thread" data-bootsignal="comments"></div>
   <script>
     (function () {
       var el = document.getElementById('bs-thread');
       if (el) el.setAttribute('data-thread-id', location.pathname);
     })();
   </script>

6. プレビューで見て、保存して、ショップに渡す

   エディタには別のタブで開く プレビュー と、保存する があります。保存しただけでは公開されません。デザインに戻ってテーマを開き、カスタムテーマから作ったテーマを選んで、そこで 保存する を押します。お客さんが見るのはこの2回目の保存のほうです。編集はパソコンでの作業として案内されているので、スマートフォンだけで終わらせる作業ではありません。

div はブロックの中、ローダーは外。その理由

BASE のテーマはテンプレートを集めたフォルダではありません。テンプレートのドキュメントが1行で書いています。"デザインテーマは画像、css、jsなどの外部ファイルを除けば1つのソースでショップ全体のページを構成します"。ページの出し分けもその中で行われます。"各ページのコンテンツは{block:IndexPage}などのそれぞれのページであることを判別するif文に相当するタグで囲います" とあり、{block:IndexPage} のようなタグが if 文の役をします。ヘッダーやフッターのような共通部分は、そのタグの外にそのまま書かれています。変数タグは {IndexPageURL} のような形、ブロックタグは {block:Items} のような形です。

この1点が置き場所を両方とも決めてくれます。ローダーはブロックの外、つまりどのページにも同じように届く場所へ。ウィジェットのないページでは何も起きないので、置きっぱなしで損をしません。div はブロックの中1か所へ。だからコメント欄は商品のページの下に出て、カートには出ません。自分のテーマのソースを開いて、すでに使われているブロックタグを探せば、地図はそれで引けます。

BASE の請求に上乗せされるぶん

BootSignal の請求は登録ドメイン単位で、ショップ1つならこの1行で終わります。登録ドメイン1つあたり 月 $20 または年 $200。カタログのウィジェット 34 個と、購読後に増えたぶんも含みます。アクセスの量は計算に入りません。ショップをもう1つ開いたときに増えるのはダッシュボードのドメインで、プランの等級ではありません。細かい条件は料金のページにあります。

BASE 側の請求は、いまのプランの決済手数料とサービス利用料のままです。その料率はここには書きません。この記事で読んだヘルプはプランの違いを説明していても、数字そのものは載せていないからです。うろ覚えの料率はリンクより役に立ちません。ご自身のプランのページで確かめてください。

ほかのウィジェットも同じ1本で動く

2つ目からは、貼ってあるローダーがそのまま動かしてくれます。同じブロックに data-bootsignal の値だけ変えた div を足せば終わりです。ショップなら評価が素直に合います。商品の下に付く質問より、商品に付く点数のほうが読まれるからです。

ショップのページに何も出ないとき

上から順に見てください。BASE はこの部分に付き合わないことを最初から明かしています。テンプレートのドキュメントに、テンプレート編集への技術的なサポートは提供しないと書かれています。どの行で止まったかがわかっていれば、こちらへの連絡は短い2行で済みます。

1. ショップはそのカスタムテーマを配信していますか。エディタでの保存は適用ではありません。デザイン、テーマ、カスタムテーマ での2回目の 保存する が適用です。
2. 公開中のショップのネットワークタブに bootsignal.js は出ていますか。出ていなければ、ローダーの行は適用していないテーマのほうに入っています。
3. ページのソースに div はありますか。別のページのブロックタグの中にあれば、そのページにだけ出てほかには出ません。
4. コンソールに missing data-site-id (loader) or data-thread-id (target) を含む警告は出ていますか。それなら div は載っていて、属性のどちらかが届いていません。
5. アドレスバーのホスト名は登録したものと一致していますか。独自ドメインだけ登録した状態で .base.shop から開けば、静かなままなのが正しい動きです。
6. HTMLタグ管理 App から貼っていませんか。その場合スクリプトは head にあって div はどこにもなく、壊れた設置とまったく同じ見え方になります。