2017年8月23日オンラインショップを作成するのに便利なオープンソースEC-Cubeを先日から使い始めました。WordPressにすっかり慣れた自分としては、オープンソースでオンラインショップならWordpressにWooCommerceなどのプラグインを入れるのがいいでしょ、とすぐ思ってしまうのですが、EC-Cubeはオンラインショップに特化した国産プラットフォームということもあり、直感的に設定していくのも難しくないような感じがしています。いえ、細かいカスタマイズ方法になると、Wordpressと違ってEC-Cubeはユーザー数がさほど多くなせいか、単なる自分の知識不足のせいか、ちょっとしたことでも調べるのに結構時間がかかる。EC-Cube3系は比較的新しいバージョンなので情報がまだ足りない気もします。そんなわけで一度迷って解決したことは今後迷わぬよう、しばらくEC-Cube関連の記事を覚え書きとしてアップしていこうと思っている次第です。長くなりましたが、今回は「ある特定の商品ページだけ、縦長のランディングページ風にする方法」を覚え書きとして記録しておきます。Cube3系のデフォルトテンプレートの場合、商品の詳細ページを開くと左側に画像、右側に商品の詳細情報と購入ボタンが表示されるようになっていますよね。(以下のキャプチャのような感じ)良く知られている有名な商品を扱うとか、とりわけ詳しい説明のいらない(例えば商品画像+スペック情報だけで済む)ような商品だったら、このようなレイアウトでも全然問題ないですが、そうじゃないほうがいい場合もあります。知名度が高くないため、商品の魅力を十分に訪問者に伝える必要がある場合こういう時は、いわゆるランディングページ風の、縦長の商品ページを使うほうがいいです。楽天市場のショップなんかは結構ランディング風のページを作っているところも多い気がします。ランディングページのコンテンツを作るのはまあいいとして、じゃあそれをEC-Cubeの商品詳細ページにどう埋め込むか。カスタマイズできるなら方法などいくらでも見つかるのでしょうが、何といっても初心者ですので。できるだけデフォルトテンプレートのコア部分には手を入れず、ごく簡単な方法でサクッと作れることを考えてみました。「特定の一押し商品だけを縦長にする」なら以下の方法が一番簡単じゃないかという結論になりました。ランディングのコンテンツをブロックとして作成して、該当する商品のIDの時だけそのブロックを表示させるみたいな感じです。今回は商品情報がすでに作成されていて、商品IDが1の商品をランディング化することとします。EC-Cube管理画面のコンテンツ管理>ブロック管理で、新規にブロックを作成。ブロックデータの部分に以下のように記述します。%}ポイントはランディングページにする商品IDに該当する場合のみこのブロックデータが読み込まれるように設定すること。あとは、「ページ管理」メニューから商品詳細ページのレイアウト管理を選択。#contents_topのところに先ほど作成したブロックを設定すればOK。これで商品ID1の商品詳細ページのランディング化をする準備が整ったことになります。あとは、上記コードの「ここにランディングページのコンテンツを作成」の部分につらつらとランディングのコンテンツを書いていけばOKです。3のデフォルトテンプレートはBoostrapベースで作られているのでレスポンシブ対応でコンテンツを作るのも楽ですね。Cube初心者の私にとっては何もかもが新しいことだらけでやたら時間が取られてますが、せめてBootstrapであることが唯一の救い。Article大好きなセルビア。カテゴリーが特化していないブログやサイトにおすすめWordPressサイトのサーバー引っ越しならぜった知っておきたいhostsファイルの使い方。現在ECCUBEを使用したサイトの運営を担当しておりまして、こちらの記事を参考に、ページを制作しております。%}の部分はどういう記述にすればよろしいのでしょうか?お分かりでしたらご教示いただけますと幸いです。PMタナカさん、初めまして。%}でできるかと思うのですが、お試しいただけますか?よろしくお願いいたします。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。10162About管理人:YUNA暖かい南関東出身。カザフスタン共和国での生活を経て現在はセルビア共和国に長期滞在中。ロシア人の夫とのコミュニケーション、そしてセルビアでの生活のためにロシア語とセルビア語を日々勉強中。職はWeb制作、Webデザイン、Webマーケティングなど、Webに関わる事色々。お願い時々、ロシア語の記事を中心に当ブログの内容に非常に似たコンテンツを作成されているサイトを見かけます。無断でのこのような利用はおやめください。出産費用が無料のセルビア。LANGUAGELIFEWEBサイト・ブログ運営ニュースレター配信ネットショップ制作ツールその。