EC Cube 3系 商品ページを縦長のランディングページ風にするごく簡単な方法

オンラインショップを作成するのに便利なオープンソースEC-Cube。

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

この記事でわかること

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

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

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

例えば、

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

こういう時は、いわゆるランディングページ風の、縦長の商品ページを使うほうがいいです。
楽天市場のショップなんかは結構ランディング風のページを作っているところも多い気がします。
 
ランディングページのコンテンツを作るのはまあいいとして、じゃあそれをEC-Cubeの商品詳細ページにどう埋め込むか。

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

で、「特定の一押し商品だけを縦長にする」なら以下の方法が一番簡単じゃないかという結論になりました。
 
ランディングのコンテンツをブロックとして作成して、該当する商品のIDの時だけそのブロックを表示させる

みたいな感じです。

具体的な方法

今回は商品情報がすでに作成されていて、商品IDが1の商品をランディング化することとします。
まずEC-Cube 管理画面のコンテンツ管理>ブロック管理で、新規にブロックを作成。
ブロックデータの部分に以下のように記述します。

{% if Product.id == '1' %}
{% block stylesheet %}
<!-- このページのみで使用するCSSがあればここに記入するか以下のように外部cssファイルを読み込む -->
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/mystyle.css">
{% endblock %}
{% block javascript %}
<!-- このページのみで使用するjavascriptがあればここに記入(または外部jsファイル読み込み)-->
{% endblock %}
<!--ここにランディングページのコンテンツを作成-->
{% endif %}

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

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


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

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

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

この記事が役立ったらシェアをお願いします!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

  • 初めまして。
    現在ECCUBEを使用したサイトの運営を担当しておりまして、
    こちらの記事を参考に、ページを制作しております。
    「商品IDが1と2」の商品に同様のコンテンツを表示させたいときは、
    {% if Product.id == ‘1’ %}
    の部分はどういう記述にすればよろしいのでしょうか?
    お分かりでしたらご教示いただけますと幸いです。
    何卒よろしくお願いいたします。

    • タナカさん、初めまして。
      {% if Product.id == ‘1’ or Product.id == ‘2’ %}
      でできるかと思うのですが、お試しいただけますか?
      よろしくお願いいたします。

コメントする

この記事でわかること