BASEテンプレートのカスタマイズ

BASEテンプレートカスタマイズMemo

このブログで繰り返し書いてきたとおり、事業としてネットショップを開設するならBASEは個人的に全くおすすめしませんが、

  • 面倒なことは一切したくない
  • 集客はSNSだけでやる
  • だから手数料高くてもいい

という人には丁度良いツールなのかも知れません。(現に身内に上記のようなことを言われました)

その流れでテンプレート編集を委託され(有料)、初めてBASEのテンプレートカスタマイズを行ったので、備忘録に残しておこうと思います。

BASEテンプレートは独特なので最初面くらいましたが、シンプルなので慣れればそんなに難しくありません。

HTML編集Appが必要

BASEのテンプレート編集には「HTML編集App」のインストールが必要です。

以前は980円ぐらいの有料アプリだったはずですが今は無料です。要望が多かったんでしょうね。

余談ですが、このHTML編集Appのように、BASEはインストールしないと利用できない機能が結構あります。例えばカテゴリー管理や商品検索もアプリなしでは使えません。

「面倒なことはしたくない」と言っても、最初にアプリ探して入れる手間がかかる(ある程度ちゃんとしようと思ったら10個ぐらいは入れることになる。ほとんどは無料)ので、逆にBASEのほうが面倒くさい気もします。そこは人それぞれなんでしょう。

なお「ネットショップを無料で使えるものがBASE以外にあるのか?」と聞かれれば、STORESイージーマイショップをおすすめします。

ページの振り分け

他のネットショップASPやWordPressを使ったことがある方なら、ページの種類ごとにテンプレートが用意されているのに慣れているかもしれませんが、BASEテンプレートは1つのhtmlコードで全てのページを制御しています。

ページの種類

BASEのページタイプは以下です(ちゃんと見てないのでもっとあるかも知れない)。カッコ内はページ振り分けに必要となる変数です。

  • トップページ(IndexPage)
    • カテゴリー(IndexPageCategory) *
    • 検索結果(IndexPageSearch) *
  • 商品ページ(ItemPage)
  • お問い合わせ(ContactPage)
  • 特商法(LawPage)
  • プライバシーポリシー(PrivacyPage)
  • ショップ紹介(AboutPage)
  • ブログページ(logPage) *

*印があるのはアプリインストールが必要なページです。

カテゴリーページと検索結果ページはindex.htmlのパラメーター振り分けのようなものなので、トップページの下層に入れています。

ifやループは{block:}{/block:}

BASEテンプレートでifを記述することは出来ません。{block}というタグがその役割を果たします。

たとえば、{block:ItemPage}〜{/block:ItemPage}で、商品詳細ページだけに表示したいHTMLコードを書くことができます。逆に{block:NoItemPage}「商品ページ以外」のようなタグも用意されています。詳しくはBASEデベロッパー:BASE Templateをご参照ください。以下の項目についても同様です。

↓はBASE Developersから引用

基本のページ構成

andもorもelseも使えないので、複数条件の場合は変数を重ねる。orやelseは1つずつ個別に記述します。これが一番面倒だった記憶があります。

商品ループ

カテゴリーのループや、商品情報のループもifと同じく{block:}〜{/block:}で行います

たとえばトップページに商品一覧を表示する場合や、カテゴリ、検索結果など「商品一覧を表示させるループ」には{block:Items}〜{/block:Items}という変数が用意されています。

ネットショップのテンプレートでループ処理といえばあとは「商品画像」ですが、悲しきかな商品画像をループで取り出すことはできません。

BASEの商品画像は最大20枚まで登録できる仕様なので、{block:ItemImage1}から{block:ItemImage20}まで個別に用意する必要があります。コピペで済む話ではあるものの非常に面倒くさいし無駄にコードが長くなるのでできれば改善してほしいところです。

独自変数の追加

head内に{block:hidden}で囲む形で独自の変数を登録し、テンプレートの機能として利用することができます。

text color image ifの4種類を登録できるので、作成したテンプレートをデザインマーケットで販売する際には、ここで差別化することができます。詳しく先述のBASE Developersにて。

特殊なタグ・NotLoadItemsPage

HTML編集に取り掛かると一行目から「{block:NotLoadItemsPage}」という変数だ出てきて??となります。

BASEは販売商品数が多かった場合も一覧表示を ページ分割せず、続きの商品を非同期で読み込んでいく仕様になっているため、ページ末尾にある{block:LoadItemsPage}タグ内には商品読み込み時のHTMLを記述。それ以前には通常時のHTMLを記述します。

非同期とは何かとざっくりと簡単に説明すると、たとえばGoogleMapの埋め込まれているサイトで地図の位置を変更したりズームインアウトしてもmapだけが情報更新され、ページそのものが再読み込みされることはありません。このようなページ上で一部のみ情報更新させている仕組みを「非」同期通信と呼びます。

独自のCSSファイルやJSファイルをアップロード

BASEのデザイナー登録は、別にテンプレート販売しようなんて思ってない人でも登録できます。

デザイナー登録が完了すると、BASEデベロッパー用ダッシュボードの「ツール」から自作のcssファイルやjsファイルをアップロードすることができます

アップロード完了するとlink用のURLが発行されるので、それをテンプレートのhtmlに記述すればOKです。ちなみに修正やファイルURLの確認は出来ませんので、修正したい or URLがわからなくなった場合は再度アップロード→URLの取得。という流れになります。

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年8月17日HTML/CSSBASE,カスタマイズ,無料ネットショップ

Posted by ミフネWEB