[備忘録] ショップサーブに独自プログラムを仕込むポイント

いろいろググりましたが、ショップサーブに独自プログラムを仕込んだ体験談的なページがなかったので、備忘録として今回のポイントを記載しておきます。興味のない人にはどうでもいい話なんで無視してください。

ショップサーブでプログラムを組み込む場合、言語はPerlのがやりやすい

ショップサーブではPerl、PHPが使用できます。

ただし、PHPの場合も拡張子は「.cgi」にして、phpまでのパスを記述する必要があります。また、記述が必要なのは実行ファイル側で、インクルードされる側のPHPにパスを書くとエラーとなります。アップ後は実行ファイルのパーミッションを755にします。

モジュールモードで慣れちゃってると、結構面倒です。

PerlならSQLiteも使用できますが、PHPは不可ということなので、Perlで組んだほうがいろいろ楽チンかと思います。

GDやImageMagickも使えますし、qmailも使えるので結構ありがたい仕様だと思います。

ちなみにちょっと手間をかければKCFinderも動きます。

（拡張子変更、PHP7.2以降に対応するカスタム、セッション管理の追記）

トップページに任意のコードをインクルードさせる

これができるようになると、トップページのカスタマイズにかなり幅がでますね。

ショップサーブは更新毎にトップページを含む殆どのページを静的に上書き・新規作成するため、トップページ（index.html）に記述しても次の更新でおじゃんになってしまいます。

そこで、方法として２種類考えました

１．index.shtmlをトップページとする

２．外部JSを読み込んでDOM操作する

１については、ショップサーブの場合 shtmlのほうがhtmlより先に表示され、且つ更新時にもindex.shtmlはノータッチなので、SSIを使って動的コンテンツをインクルードさせることができます。

ただし、これをやっちゃうとショップサーブのシステム側で更新する新着商品やおすすめ商品などのコンテンツは反映されないため、事実上厳しいです。

それでもやろうとするならば、裏側でindex.htmlを一度読み込み、新着やメニューといった部分のみを抜き出してindex.shtmlに再配置する方法になるかと思います。吐き出しコードを見ると各部コメントで括られているので、そこを切り落とすポイントにすればできます。（後述）

２は今回実際に組み込んだ方法で、CMS上で更新されたコンテンツの一部（記事ピックアップ箇所）を外部JSとして書き出し、いわゆるDOM操作にてトップページに配置しています。

デザイン設定→HTMLのカスタマイズ→headタグへの追記に独自のJSを読み込むように記述し、センター用フリーエリアに対応するノードを記述・配置しておけばよいです。

注意点はJSファイルはブラウザキャッシュが残りやすいので、

<script src="/js/original.js?' + new Date().getTime() + '"></script>

というようにアクセスされた時間をぶら下げるようにしておけば、常に最新のものが表示されます。

.htaccessは書き換えられる？

ショップサーブの管理画面より「開店・閉店の切り替え」や「URLの設定」等を操作すると、.htaccessファイルが更新されますので、.htaccessに独自の記述をしている場合は注意が必要です。

ワードプレスのパーマリンク的に実際のディレクトリ構造とURLを挿げ替えるような、RewriteEngineの記述をする際は特に注意が必要です。

（サイトオープンしてしまえば、上記を変更することは滅多にないと思いますが）

テンプレートを作る際のポイント

独自プログラムでページを表示する際、全体のページレイアウトと体裁を合わせたいところですが、商品カテゴリーのメニュー等、ショップサーブ側で更新される部分については、都合のいいコードが提供されているわけではありませんので、ショップサーブで更新されるどこかのページを取り込んで、メニュー部分を抜き出して自作のテンプレートに配置する必要があります。

実際は以下のようにコメントがついていますので、その間のコードを抜き出せばよいと思います。

<!--GloNavStart-->

グロナビのコード

<!--GloNavEnd-->

<!-- SIDEBAR-OBJECT CATEGORY-LIST BEGIN -->

サイドバーのコード

<!-- SIDEBAR-OBJECT CALENDAR END -->

とりあえず、こんなもんかな。