オンラインショップを作成するのに便利なオープンソースEC-Cubeを先日から使い始めました。

WordPressにすっかり慣れた自分としては、オープンソースでオンラインショップならWordpressにWooCommerceなどのプラグインを入れるのがいいでしょ、とすぐ思ってしまうのですが、EC-Cubeはオンラインショップに特化した国産プラットフォームということもあり、直感的に設定していくのも難しくないような感じがしています。慣れたら楽そう。

とはいえ、細かいカスタマイズ方法になると、Wordpressと違ってEC-Cubeはユーザー数がさほど多くなせいか、単なる自分の知識不足のせいか、ちょっとしたことでも調べるのに結構時間がかかる。。。

EC-Cube3系は比較的新しいバージョンなので情報がまだ足りない気もします。

そんなわけで一度迷って解決したことは今後迷わぬよう、しばらくEC-Cube関連の記事を覚え書きとしてアップしていこうと思っている次第です。

長くなりましたが、今回は「ある特定の商品ページだけ、縦長のランディングページ風にする方法」を覚え書きとして記録しておきます。

sponsored link

 

 

特定の商品ページだけ縦長にするごく簡単な方法

EC Cube3系のデフォルトテンプレートの場合、商品の詳細ページを開くと左側に画像、右側に商品の詳細情報と購入ボタンが表示されるようになっていますよね。(以下のキャプチャのような感じ)

 

良く知られている有名な商品を扱うとか、とりわけ詳しい説明のいらない(例えば商品画像+スペック情報だけで済む)ような商品だったら、このようなレイアウトでも全然問題ないですが、そうじゃないほうがいい場合もあります。

例えば、

  • ショップの一押し商品について詳しく紹介したい場合
  • 知名度が高くないため、商品の魅力を十分に訪問者に伝える必要がある場合

こういう時は、いわゆるランディングページ風の、縦長の商品ページを使うほうがいいです。
楽天市場のショップなんかは結構ランディング風のページを作っているところも多い気がします。

 

ランディングページのコンテンツを作るのはまあいいとして、じゃあそれをEC-Cubeの商品詳細ページにどう埋め込むか。

バリバリカスタマイズできるなら方法などいくらでも見つかるのでしょうが、何といっても初心者ですので。。できるだけデフォルトテンプレートのコア部分には手を入れず、ごく簡単な方法でサクッと作れることを考えてみました。

で、「特定の一押し商品だけを縦長にする」なら以下の方法が一番簡単じゃないかという結論になりました。

 

ランディングのコンテンツをブロックとして作成して、該当する商品のIDの時だけそのブロックを表示させる

みたいな感じです。

具体的な方法

今回は商品情報がすでに作成されていて、商品IDが1の商品をランディング化することとします。

まずEC-Cube 管理画面のコンテンツ管理>ブロック管理で、新規にブロックを作成。

ブロックデータの部分に以下のように記述します。

ポイントはランディングページにする商品IDに該当する場合のみこのブロックデータが読み込まれるように設定すること。

あとは、「ページ管理」メニューから商品詳細ページのレイアウト管理を選択。#contents_topのところに先ほど作成したブロックを設定すればOK。

 

これで商品ID1の商品詳細ページのランディング化をする準備が整ったことになります。あとは、上記コードの「ここにランディングページのコンテンツを作成」の部分につらつらとランディングのコンテンツを書いていけばOKです。

EC Cube 3のデフォルトテンプレートはBoostrapベースで作られているのでレスポンシブ対応でコンテンツを作るのも楽ですね。

EC Cube初心者の私にとっては何もかもが新しいことだらけでやたら時間が取られてますが、せめてBootstrapであることが唯一の救い。