BASEテンプレートカスタマイズMemo
このブログで繰り返し書いてきたとおり、事業としてネットショップを開設するならBASEは個人的におすすめしませんが、
という人には丁度良いツールなのかも知れません。(現に身内に上記のようなことを言われました)
その流れでテンプレート編集を委託され(有料)、初めてBASE
のテンプレートカスタマイズを行ったので、備忘録に残しておこうと思います。
BASEテンプレートは独特なので最初面くらいましたが、シンプルなので慣れればそんなに難しくありません(ただし、凝りだすと面倒くさくなってくる)。
HTML編集Appが必要
BASEのテンプレート編集には「HTML編集App」のインストールが必要です。
以前は980円ぐらいの有料アプリだったはずですが今は無料です。要望が多かったんでしょうね。
なお、HTML編集できるのはテンプレートのみで、たとえばトップページ内にHTML編集できるフリースペースのようなものはありません（テンプレートカスタマイズでフリースペースを作ることは可能なので、対応しているテーマはあるかもしれない）。
余談ですが、このHTML編集Appのように、BASEはインストールしないと利用できない機能が結構あります。例えばカテゴリー管理や商品検索もアプリなしでは使えません。
「面倒なことはしたくない」と言っても、最初にアプリ探して入れる手間がかかる（ある程度ちゃんとしようと思ったら10個ぐらいは入れることになる。ほとんどは無料）ので、逆にBASEのほうが面倒くさい気もします。そこは人それぞれなんでしょう。
なお「ネットショップを無料で使えるものがBASE以外にあるのか？」と聞かれれば、
Square（スクエア） （面倒なことは嫌いな人向け & BASE以上の低コスト運営）や、
イージーマイショップ
（なんで無料なのか疑わしいレベル。ごりごりカスタマイズしたい人も満足）をおすすめします。
ページの振り分け
他のネットショップASPやWordPressを使ったことがある方なら、ページの種類ごとにテンプレートが用意されているのに慣れているかもしれませんが、BASEテンプレートは１つのhtmlコードで全てのページを制御しています。
ページの種類
BASEのページタイプは以下です。カッコ内はページ振り分けに必要となる変数で、＊印があるのはアプリインストールが必要なページです。
- トップページ(IndexPage)
- カテゴリー(IndexPageCategory) *
- 検索結果(IndexPageSearch) *
- 商品ページ(ItemPage)
- お問い合わせ(ContactPage)
- 特商法(LawPage)
- プライバシーポリシー(PrivacyPage)
- ショップ紹介(AboutPage)
- ブログページ(BlogPage) *
コインページ(CoinPage)*（2021年5月廃止）- コミュニティページ(CommunityPage) *
BASEにはフリーページが無いので、この10種類のページを駆使してショップ制作することになります。
2021年5月 追記： 「ページ追加App」が誕生し、任意のページを追加できるようになりました。
ただし現時点で、オフィシャルテーマでしか利用できないため、HTML編集Appでカスタマイズしたテーマや、デザインマーケットの有料テーマでは利用することができません。
ifやループは{block} {/block}
BASEテンプレートでif文やfor文を記述することは出来ません。代わりに｛block}というタグがその役割を果たします。
たとえば、{block:ItemPage}〜{/block:ItemPage}で、商品詳細ページだけに表示したいHTMLコードを書くことができます。
逆に{block:NoItemPage}「商品ページ以外」のようなタグも用意されています。詳しくはBASEデベロッパー:BASE Templateをご参照ください。以下の項目についても同様です。
↓はBASE Developersから引用
上図にカテゴリーページと検索結果ページがありませんが、IndexPageにパラメーター付与されたURLとなるので、{block:IndexPage}〜{/block:IndexPage}の中に記述します。
andもorもelseも使えないので、複数条件の場合は変数を重ねる。orやelseは１つずつ個別に記述します。これが一番面倒だった記憶があります。
商品ループ
カテゴリーのループや、商品情報のループもifと同じく{block:}〜{/block:}で行いますが、それぞれにループ用の変数が用意されており、それ以外のループ処理は使用できません。
たとえば「商品一覧を表示させるループ」には{block:Items}〜{/block:Items}という変数が用意されています。
ネットショップのテンプレートでループ処理といえばあとは「商品画像」ですが、悲しきかな商品画像をループで取り出すことはできません。
BASEの商品画像は最大20枚まで登録できる仕様なので、{block:ItemImage1}から{block:ItemImage20}まで個別に用意する必要があります。コピペで済む話ではあるものの非常に面倒くさいし無駄にコードが長くなるのでできれば改善してほしいところです。
独自変数の追加
head内に{block:hidden}で囲む形で独自の変数をmetaタグで登録し、テンプレートの機能として利用することができます。
登録数に上限はありませんが、テンプレート文字数に上限があるので
text color image ifの4種類を登録できるので、作成したテンプレートをデザインマーケットで販売する際には、ここで差別化することができます。
たとえば、{myColor} で色を登録しておいて、必要な箇所で{color:myColor}と記述すれば登録した色コードが出力されます。
詳しくはBASE Developers「デザインオプション」にて。
自動で出力されるコンテンツはHTML制御できない
たとえば、テイクアウト商品にはテイクアウトに必要な情報（引取り可能時間や場所など）が自動で表示されますが、これら自動表示のコンテンツの多くは、実際にテスト表示してみないと、どのようなHTMLが出力されているのか把握できません。
CSSをあてることは可能ですが、Appごとにクラス名も異なるので、すべて確認していくのは割と面倒な作業です。
特殊なタグ・NotLoadItemsPage
HTML編集に取り掛かると一行目から「{block:NotLoadItemsPage}」という変数だ出てきて？？となります。
BASEは販売商品数が多かった場合も一覧表示を ページ分割せず、続きの商品を非同期で読み込んでいく仕様になっているため、ページ末尾にある{block:LoadItemsPage}タグ内には商品読み込み時のHTMLを記述。それ以前には通常時のHTMLを記述します。
非同期とは何かとざっくりと簡単に説明すると、たとえばGoogleMapの埋め込まれているサイトで地図の位置を変更したりズームインアウトしてもmapだけが情報更新され、ページそのものが再読み込みされることはありません。このようなページ上で一部のみ情報更新させている仕組みを「非」同期通信と呼びます。
独自のCSSファイルやJSファイルをアップロード
BASEのデザイナー登録は、別にテンプレート販売しようなんて思ってない人でも登録できます。
デザイナー登録が完了すると、BASEデベロッパー用ダッシュボードの「ツール」から自作のcssファイルやjsファイルをアップロードすることができます。
↑ 機能アップデートによりデザイナー登録は不要になりました。HTML編集画面からファイルアップロードできます。
アップロード完了するとlink用のURLが発行されるので、それをテンプレートのhtmlに記述すればOKです。
ちなみに修正やファイルURLの確認は出来ませんので、修正したい or URLがわからなくなった場合は再度アップロード→URLの取得。という流れになります。
インラインCSSの注意点
先ほど独自の変数で{color:myColor}という例を出しました。
お気づきの方もおられると思いますが、head内にstyleタグでminifyしたcssを記述するとき、p{color:#000}が変数と認識される場合があります（p{color:#000;}なら大丈夫）。
このエラーは、2020年9月以前のショップデザイン機能でのみ発生しているらしいので、2020年10月以降に登録、またはショップデザイン機能をアップデートしている場合は問題ありません。
