Eストアー ショップサーブで各ページに固有のclassを付けて思い通りのcssを設定する!

  JavaScript, jQuery, WEBサービス, コーディング, ショップサーブ 

 

photo credit: tim_d via photopin cc

photo credit: tim_d via photopin cc

ちょっと前にショップサーブ を利用してショッピングサイトを制作するお仕事がありました。
ショップサーブは株式会社Eストアーが提供するショッピングサイトASPで、顧客管理や売上分析機能が非常に充実しており、また電話サポートを始め各種サポートが充実しております。

ショップサーブは通販システム業界では老舗です。
15年間培ったノウハウがあるからこそ提供できるサービスがあります。

ECサイトの開業をご検討中のはじめての方、経験者の方、どなたでもショップ運営に必要なものがすべて揃う。使いやすい。
ビジネスを繁盛させることができる。そのすべてのソリューションをワンストップで提供することができる。それがショップサーブです。

ショッピングサイトに必要な機能は揃っており、マニュアル(←これも非常に細かくて丁寧です。)を見ながらサイトの設定を行うだけで、ウェブに詳しくない方でもそれなりのECサイトが構築できる印象でした。

 

ショップサーブのコーディングで困ったこと

先に述べたように機能充実、親切設計なショップサーブですが、コーディング時にいくつか困ったことがありました。

基本的にtableでコーディングされている

ショップサーブは基本的なhtmlの作りが<table>で作られていました。ヘッダーやサイドバーなど共通パーツは<td>の中に入っています。
カラーミーショップのようにhtmlの作り自体から自由に設定することは出来ませんでした。

tableコーディングはレイアウトも崩れにくいですし、ウェブに詳しくない方が触られる前提であれば、まぁしょうがないかもしれないですね。
最近のコーディング手法になれたhtml+css中級者以上の方には逆に扱いづらい作りとも言えます。

管理画面内でhtmlを自由に設定できる箇所もいくつか用意されているので、その部分に関しては「div+クラス名」で領域を設けてコーディングを進めることにしました。

ページ固有のcssクラスが付加されていない

例えばwordpressを使用している場合、トップページなら「.home」、一覧ページなら「.archive」みたいに、各ページの状態によってbodyにcssクラスが付与されて各ページで異なったデザインを設定することが可能です。

今回のお仕事では、「商品ページ毎に微妙にデザインを変えたい」、「一覧ページに表示させるバナーと商品詳細ページに表示させるバナーを分けたい」ほんでもって「商品詳細ページごと表示をさせるバナーを変更したい」といった要望があり、各ページの状態を取得することが必須でした。

とはいえ、ショップサーブでは各ページの状態を判別するためのcssクラスが付与される箇所が無く、ここでハマってしまったわけです。

 

解決法:jQueryを利用し、URLからページの状態を判別するcssクラスを付加することにした

ショップサーブで作られたサイトのURLを見てみます。まずはカテゴリ一覧ページ。

http://ドメイン名/SHOP/カテゴリID/list.html

続いて商品詳細ページ。今回は商品IDに「7桁の数字」+「-(ハイフン)」+「00」というルールがありましたので下記のURLになります。

http://ドメイン名/SHOP/数字7桁-00.html

URLの構造が違うのでこれを利用してbodyタグにクラスを付加することができそうです。jQueryを利用してコードを書いていきます。

順に見ていきます。まず最初に現在いるページのURLを取得し、分解して配列にします。

URLを分解して格納した配列をfor文でまわします。

クラス名ができたらbodyにクラスをつけます。一応トップページにも固有のクラスを付加しておくことにしました。

まとめるとこんな感じ。

これでbodyタグに各ページ状態固有のclass名が付加されます。

各ページ状態によって要素の表示⇔非表示を切り替えたり、レイアウトを変更することがかなり楽になりました!

最後に

ショップサーブでのコーディング時、他にもハマったポイントがいくつかあったので今後また書いていこうと思います。

※コーディングはしづらかったのですが、ショップサーブは初心者の方にはかなり扱いやすいと思います!基本的には素晴らしいサービスですよ〜。

 

コレ聴きながら書きました!

バカテク炸裂!MUSE大好きです。ちょっと漂う耽美な雰囲気も◎

ブログの更新情報はこちらで配信しています。

   

follow us in feedly

ad

wpx

  • wordpressに慣れてくると、今度は痒いところに手が届く細やかなカスタマイズをしたいですよね。phpを利用したカスタマイズからデータベースに直接アクセスする方法がとにかく丁寧に解説されています。個人的には第5章、「プラグインの自作」が物凄く役に立ちました!
  • JavaScript 第6版

    定番のO'Reilly本でJavaScriptを深く学びましょう!気になる箇所をざっと読むだけでも、とても参考になります。ざっと読みを繰り返すのがオススメ。超良書です!
  • サイトの拡張性を飛躍的に高める WordPressプラグイン開発のバイブル

    WordPressプラグインの開発から運用までカバーする、プラグイン開発のまさに「バイブル」です。

    セキュリティやマネタイズにも触れられていて参考になるところ多すぎです。
  • WordPressのテーマ制作やテンプレートについての概念など、実際にサイトを制作しながらWordPressを知ることができます。
    制作するだけでなく、ユーザビリティからSEO、さらにはパフォーマンス改善にも触れているという充実ぶり。
    オリジナルテーマ制作のお供にどうぞ!
  • サンプルが大充実!定番のjQuery入門書です。
    本の内容に沿って制作を進めるだけで、即実戦投入できる程の機能ができ上がります。
    解説が丁寧且つチートシートも付いているのでjQueryについての理解がぐんと深まりますよ!
PAGE TOP ↑