閉じる
  1. iPhoneやiPadで誤ってアプリケーションを購入した場合の返金方法…
閉じる
閉じる
  1. Illustratorで文字を一部拡大縮小出来る「文字タッチツール」が…
  2. MAC VMware のショートカット:コピー&ペースト編
  3. MACのVMwareでエラー。vmmonが読み込まれていることを確認し…
  4. macがしゃべり出す「VoiceOver」を切る!うるせぇよ
  5. MAMP Proでアップデートが失敗する場合の対処法
  6. mac で Microsoft Office 365 や for ma…
  7. PhotoshopCCで画像を自由に変形させる(看板やPC画面に埋め込…
  8. vimでペースト・貼り付けたら余計なインデントが混ざる(解決)
  9. ヤフーショップが個人出店者をヤフオクへ強制移店させるそうだ(期限は来年…
  10. トラックパッドのピンチイン、アウトで拡大縮小出来ない場合の対処法
閉じる

ALPHACAST|アルファキャスト

EC-CUBEで商品一覧の画像が小さい→大きくする方法

アルファキャストec-cubeロゴ

EC-CUBEで商品一覧の画像が小さい→大きくする方法

EC-CUBEは非常に完成されたECプラットフォームです。
お客様より独自の通販サイトの構築を依頼されたら必ずEC-CUBEをご提案しています。
WordPressも好きですが、論理的に体系化されたファイル構成は非常に好感が持てます。

さて、今回は表記の通り
商品一覧画面の画像を一段階大きく表示したい
場合の手順のご紹介です。

環境

EC-CUBEバージョン 2.13.5
PHPバージョン PHP 5.3.3
DBバージョン MySQL 5.1.73

商品画像が小さい

ズバリこのような状態です。

表示画面サイズや、使用するテンプレートにもよりますが、よく起こります。
無駄な余白が気になりますし、なにより大切な商品の写真が栄えません。

一覧表示のソースを書き換える

対象ソースは以下。

<EC-CUBEドキュメントルート>/eccube/data/Smarty/templates/[テンプレート名]/products/list.tpl

画像表示箇所を特定する

ソース内で画像を表示している箇所を特定し以下のように書き換えます。
※ブラウザの開発モードを利用すれば特定は一発です。以下の記事が参考になるかと思います。

[blogcard url=”http://alphacast.jp/mac/safari-developer-menu/”]

ソースを以下のように書き換える

↓以下のように変更

具体的には3行目の一カ所を変更するだけです。

$arrProduct.main_list_image

$arrProduct.main_image

つまり表示に呼び出されている画像ファイルの種類を変更してやります。

結果確認

無事大きくなりました。
めでたしめでたし。

まとめ

EC-CUBEは部品化された多数のテンプレートで構成されています。
今回は商品一覧表示用のテンプレート(list.tpl)を一部編集しましたが、
役割と変更すべき箇所がわかれば、さらなるカスタマイズが可能になります(当たり前か)

繰り返しますがEC-CUBEはファイル構成が非常にスマートなため変更に掛かる工数やリスクを
低く見積もる事が出来ます。これって素晴らしい事ですよね。

最後までご覧いただき有難うございました。

愛のおひねり




育毛剤

関連記事

  1. アルファキャストec-cubeロゴ

    無料:EC-CUBEで特定の商品にだけ送料無料設定するプラグイン…

  2. アルファキャストec-cubeロゴ

    EC-CUBEで支払い方法の初期値を設定する

  3. アルファキャストec-cubeロゴ

    EC-CUBEの会員登録画面の職業項目を変更する(並び順も)

おすすめ記事

  1. iPhoneやiPadで誤ってアプリケーションを購入した場合の返金方法

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

人気の記事

  1. IllustratorCC 2019で文字タッチツールが見当たらないから調査・解決した
    Illustratorで文字を一部拡大縮小出来る「文字タッチツール」がないIllustrator…
  2. MAC VMwareのショートカット:コピー&ペーストはVMwareでバーチャルOS「Windo…
  3. MACのVMwareでエラー。vmmonが読み込まれていることを確認してください
    MACのVMwareでエラー発生:「vmmonが読み込まれていることを確認してください」、、だと?…
  4. VoiceOverを切る手順
    macがしゃべり出す「VoiceOver」を切る!スタバで作業する私にとって、突然macが大声で…
  5. MAPM Proでアップデートが失敗する場合の対処法アプリ起動時に、5.1から5.3へのアップデ…
  6. macのofficeでエラー発生
    mac で Microsoft Office 365 や for mac インストール時にエラーコー…

漠速!WordPress特化型サーバ登場

愛のおひねり

子供の頃、ファミコンより「MSX」に飛びついたマイノリティー。

当時、雑誌に掲載されていたソース(BASIC言語)を打ち込み無料でゲームを楽しみ悦に浸る。

某大手電機メーカーの情報システム部門勤務を経て独立。

現在はIT広告媒体全般を請け負う便利屋。

趣味:
ビリヤード、フルート、カラオケ、Amazonプライムビデオ観賞