こんにちは，ディレクターの八木です。
今回は，アークウェブでECショップ構築のお手伝いをさせていただいた「E-3 ショップ (イースリーショップ)」様のWebサイトをご紹介します。
E-3ショップはイースリーさまが運営される，フットボールに特化したセレクトショップです。 オープンソースのECソフト「Zen Cart」で構築されています。
弊社は過去に，Movable Type による ジュニアサッカー（少年サッカー）の保護者向け情報サイト「サカイク」，フットボール指導者のためのWebメディア「COACHUNITED 」 サイトの構築をお手伝いさせていただいた縁で，今回のショップ構築を担当させていただくことになりました。
キックオフ時のご要望として，商品ページをひとつひとつ個別サイトのように丁寧に作りこみたい、有名サイト「ほぼ日」と「ほぼ日ストア」の関係のようなイメージでサカイク（本サイト）と商品ページが密に連携し，ランディングページとしても成り立つような使い方をしたいというものがありました。 これに応えるには，ECソフトが生成する定型の商品詳細ページではやや力不足です。
一方で，全ての商品にパワーをかけられるわけではないため，主力商品以外は簡単に商品ページが生成できるようなっていて欲しいという要件もありました。
1番目については，特集ページやブログ記事で商品を紹介し，そこからショップ内の商品詳細ページに誘導する方法もありますが，1クッション余分な遷移を挟むことになります。また，ショップの商品情報と前段のページはデータ的に連携していないので，商品価格や商品属性に変更があった場合は，紹介ページをいちいち探して修整する必要があり厄介です。
そこで，Zen Cartに商品情報API機能を追加して，簡単なJavaScriptのコードを埋め込めば，任意のページに商品情報や「カートに追加」ボタンを追加できるような仕組みを提供することにしました。下図はキックオフ当初に手書きで書いた全体構想図です。ヘタな絵でスミマセン(><)。
これを使うと，サイト内・サイト外を問わず、好きなページに任意の商品の情報や購入ボタン，ショップのログインボタンなどを表示することができます。ページのURLは自由に決められますからランディングページとして使う上でも都合が良いはず。商品情報や価格はショップのデータベースを参照しているので，ショップ側で商品情報を変更したら埋め込んだ先のページにも即時反映されます。
さらに，こうして作成したページを，ショップの詳細詳細ページとして指定できるようにしました。 商品によっては通常の定型レイアウトの商品詳細ページで十分なものもありますから，デフォルトはZen Cartが生成する定型の商品詳細ページです。しかし特に力を入れたい商品については，前述のAPIを活用して作り込んだ紹介ページを用意し，これを商品詳細ページとして使えるわけです。
一例:
「モチベーションを上げたい」カテゴリ に並ぶ商品を例にとると，1番上の 「親子で学ぶ サッカー世界図鑑【Jリーグプレーヤーズガイド付き】 は定型レイアウトの商品詳細ページ，2番目の モダンフットボール（特典DVD付き：先着300名） は，API利用の自由レイアウトページ が使われています。
外部ページを利用した商品詳細(カートへボタンは外部ページ側のCSSで自由な表現)
このような機能を搭載してスタートし，約半年が過ぎました。 運営の中でいただくご要望に応えていき，さらによいショップにしていくお手伝いを続けていきたいと思います。
イースリーショップの商品で，八木が実際に購入して使っているイチオシ商品が「考えてうまくなる しつもんサッカーカレンダー」です。 子ども向けのかわいいデザインなのに，"なりたい自分"をイメージし，そうなるための具体的な行動を決めて毎日実践する(記録する)スキームが身につく，数ある自己啓発本も真っ青な すご腕カレンダーなんですね。たまたま見つけて半分冗談で購入したのですが，5月以来3ヶ月近く，Myダイエットカレンダーとして毎日お世話になっており，月末になると大まじめで「ご褒美！シール」をペタっと貼っては一人ニヤニヤしています (^^)。
八木のおすすめ 「考えてうまくなる しつもんサッカーカレンダー」
↑宣伝費貰ってません^^;; マジおすすめです。お子さんに。。。でも良いけど, ご自身に是非どうぞっww
E-3 ショップ http://www.e-3shop.com
