バージョン選択

フォーラム

メニュー

オンライン状況

57 人のユーザが現在オンラインです。 (43 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 57
もっと...

サイト内検索

質問 > フロント機能 > トップページに新商品の画像とリンクを表示したい

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
Yama-san
投稿日時: 2019/1/18 21:39
対応状況: −−−
新米
登録日: 2019/1/16
居住地:
投稿: 4
トップページに新商品の画像とリンクを表示したい
▼テンプレート
[EC-CUBE] 4.0.1
[レンタルサーバ] X-server
[導入プラグインの有無] なし
[カスタマイズの有無] なし
[現象]

・トップページに新商品の画像を19枚表示するには、どこをどうしたらいいのでしょうか。
・できればブロックで追加する方法を教えて欲しいです。

↓このような形にしたいです。

引用:

<ul>
  <li><a href="新着商品1の詳細へのリンク"><img src="新着商品の画像1" alt="商品名"></li>
  <li><a href="新着商品2の詳細へのリンク"><img src="新着商品の画像2" alt="商品名"></li>
  <li><a href="新着商品3の詳細へのリンク"><img src="新着商品の画像3" alt="商品名"></li>
  .....19枚分
  <li><a href="">もっとみる</a></li>
</ul>



初心者のため、詳しく教えてくださいますと幸いです。
よろしくお願いいたします。
nyorai
投稿日時: 2019/1/31 9:40
対応状況: −−−
仙人
登録日: 2015/8/21
居住地:
投稿: 302
Re: トップページに新商品の画像とリンクを表示したい
新着商品を表示するプラグインがオーナーズストアにいくつかあるようですので、プラグインを使ってみるのも良いかもしれません。
https://www.ec-cube.net/products/detail.php?product_id=1335
Yama-san
投稿日時: 2019/1/31 19:33
対応状況: −−−
新米
登録日: 2019/1/16
居住地:
投稿: 4
Re: トップページに新商品の画像とリンクを表示したい
アドバイスありがとうございます。

プラグインも検討していますが、自分でカスタマイズする方法を知りたいと思っています。 とても難しいことなのでしょうか
468
投稿日時: 2019/2/1 16:15
対応状況: −−−
登録日: 2008/10/26
居住地:
投稿: 3217
Re: トップページに新商品の画像とリンクを表示したい
ご要望のカスタマイズですが、
・ブロックの仕組み
・ページを表示する流れ(ControllerクラスとTwig)
・DBから商品データの取得の仕組み
を理解していく必要があると思います。

単純な要件にみえるカスタマイズですが、
色々な所を触って理解していく必要がある為、
ここで一気に説明するのは、難しいかもしれません。

まずはブロックの仕組みから確認されてみては如何でしょうか?
phpMyAdmin等でデータベースの中身は確認できるような状況でしょうか?
ブロックの仕組みは、dtb_blockテーブルの中を見ていただくのが理解しやすいと思います。
管理画面のコンテンツ管理>ブロック管理でブロックが新規登録できると思いますので、
1つ新しいブロックを追加してみてください。
ブロック名:テスト
ファイル名:test
コード:aaaa
で登録すると、dtb_blockテーブルに1件レコードが追加されると思います。
この状態で、コンテンツ管理>レイアウト管理>トップページ用レイアウトの編集画面を表示すると、
未使用ブロックに、「テスト」ブロックが増えているかと思います。
この「テスト」ブロックを配置してレイアウトを登録すると、
配置した場所に「aaaa」と表示されると思います。

この段階では、/app/template/default/Block/test.twigの中身を
単純に表示しているだけですので、
コントローラークラスを経由して、DBから商品データを取り出し、
twigで表示する処理を追加していく必要があります。

dtb_blockテーブルのuse_controllerカラムの値が0可と思いますが、ここを1に変更します。
1に変更すると、ブロックをページに読み込む際に、
block_ + dtb_blockテーブルのfile_nameカラムを文字連結したルーティングを参照するようになります。
「テスト」ブロックの場合、「block_test」で定義されたルーティングを参照します。
まだ、この段階ではルーティングが存在しないと思いますので、
エラーが発生し、ブロックを配置したところに何も表示されないと思います。


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

Yama-san
投稿日時: 2019/2/4 13:38
対応状況: −−−
新米
登録日: 2019/1/16
居住地:
投稿: 4
Re: トップページに新商品の画像とリンクを表示したい
丁寧にご説明いただき誠にありがとうございます。

phpMyAdminでデータベースを確認できます。

デフォルトであるブロックを複製したり、静的なブロック要素の複製や表示はできたのですが、動的な要素がある場合にどのようにするのが一般的なのか知りたいと思い投稿しました。

一気にご説明いただくことが難しいことは理解したのですが、
大変恐縮ですが、箇条書きで大まかな作業の流れをお教えいただくことは可能でしょうか。
468
投稿日時: 2019/2/4 17:43
対応状況: −−−
登録日: 2008/10/26
居住地:
投稿: 3217
Re: トップページに新商品の画像とリンクを表示したい
直接本体をカスタマイズする事を想定した場合、私は以下の手順で作業します。

・ブロックを管理画面で新規登録する

・phpMyAdminでdtb_blockテーブルのuse_controllerカラムを1に変更

・block_ + dtb_blockテーブルのfile_nameカラムを文字連結したルーティングに対応するコントローラークラスを新規作成
/src/Eccube/Controller/Block/にファイルを追加します。
SearchProductController.phpをコピーして、クラス名や@Routeアノテーションを書き換えます。
name="****"の文字列がblock_ + dtb_blockテーブルのfile_nameカラムを文字連結したルーティングになるようにすれば、
追加したコントローラーがブロックの描画時に呼び出されるようになると思います。

・追加したコントローラー内で商品情報をDBから取得する処理を記述
例えば、/src/Eccube/Repository/ProductRepository.php に登録日が新しい順に8件商品を返すメソッドを追加して、呼び出します。
Repositoryクラスが利用できるように追加したコントローラーのコンストラクタに追記します。
取得した商品はtwigへ渡します。

・/app/template/default/Block/dtb_blockテーブルのfile_nameカラム.twigファイル内でコントローラーから受け取った商品を表示します。

こんな感じの流れになるかと思います。
プラグインでカスタマイズを実現する場合は、まったく別の作業となります。


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

Yama-san
投稿日時: 2019/2/5 23:39
対応状況: 解決済
新米
登録日: 2019/1/16
居住地:
投稿: 4
Re: トップページに新商品の画像とリンクを表示したい
丁寧にご説明いただきありがとうございます。
教えていただきました流れを参考にすすめてみます!
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,282名です
総投稿数は109,688件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1567
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.