閉じる
  1. iPhoneやiPadで誤ってアプリケーションを購入した場合の返金方法…
閉じる
閉じる
  1. GSOMIAとはなんぞ?1分で要点だけを解説
  2. クーロン設定方法と記載方法かんたん紹介
  3. ‘bootstrap4’ is not a r…
  4. macでポート開放する簡単な方法
  5. Nginx + SSL(無料!)Let’s Encrypt…
  6. macのターミナルの入力が変(改行&文字入力が機能しない)
  7. ubuntu インストールしたパッケージをアンインストールする2つの方…
  8. XSEVERのネームサーバ設定
  9. AWS EC2サーバにSSH接続する方法とエラー回避の方法
  10. Illustratorで文字を一部拡大縮小出来る「文字タッチツール」が…
閉じる

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. この記事へのトラックバックはありません。

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

想定年利5%の全自動型運用

年利5%の不動産運用

人気の記事

  1. GSOMIA(じーそみあ)とはこの「GSOMIA」という言葉だが、「General Securi…
  2. ubuntu
    クーロン設定方法と記載方法かんたん紹介クーロンを利用して仕事を自動化しましょう。エディタ起動…
  3. djangologo
    'bootstrap4' is not a registered tag librarydjan…
  4. macでポート開放する簡単な方法Pythonでシステム開発しているとき、ポートが既に使用されてい…
  5. ssl
    Nginx + SSL無料!Let's Encryptを設定しよう(Django+Ubuntu編)…
  6. 症状macのターミナルから特定のコマンドを実行すると必ずこれに陥っていました。 改行…

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

愛のおひねり

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

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

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

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

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