楽天・Yahoo・ポンパレなどのモールでカテゴリページはカテゴリに登録された商品を自動的に並べてくれますが、あまりカッコよくないし同じような画像の商品の場合、かわり映えがしないのでページ全体が退屈な感じがします。

そこで商品について説明を含んだバナーを一緒に設置しょうと思ったのですが、商品画像とバナーを並べて表示させるのは通常の編集では不可能だったので、他の方法を探してみました。

目指したのは商品ページの価格やポイント倍率の部分だけを切り取って表示させるというものです。

色々と探してみましたが挫折して、結局デザイナーの方に教えてもらいました。今後かなり使えそうなのでまとめておきます。

この方法はjavascriptを使用します。モールの管理ツール内での編集はjavascriptが使用できないので楽天goldやトリプル（yahoo)などのサーバーが利用できる必要があります。

 

まず商品ページから必要な部分を切り取ってくるスクリプトです。

.load(” “)の中に読み込みたいページのURLと、切り取る箇所のidやclassを入れます。(id class ではなくpやhを入れるとその要素が切り取れます。

ブラウザで商品ページの商品価格などを見ると#goodsboxや#itemboxなどのidがおそらくついていると思うので、それを拾ってきて入れればＯＫです。

$(” 切り取ったページを表示させる要素”)には例えば

のようにdivを入れると、このdiv内に切り取ってきた箇所が表示されます。

 

先ほどのスクリプトを書いたhtmlファイル楽天goldなどのサーバーにアップします。

このhtmlファイルには商品ページやモール全体で使われているcssとjQueryをリンクさせておいてください。

あとは通常の管理ツールでのページ編集時にiframeを使って、先ほど作ったhtmlファイルを読み込めば完成です。

商品の情報を変更しても、いちいち他のページに変更を加えなくても良くなります。

 

この方法を使った店舗がこちらです。