ググらずには前へ進めないフロントエンドエンジニアが書く、次はググらなくてもできますように…とメモを残すブログです!

EC-CUBE 2.13.5 商品ページにPDFを追加(アップロード)

2017/11/22
⚠️投稿日または最終更新日から5年以上経過している内容です。

検索してもテキストかテキストエリアの拡張のみしか見当たらないあたり、 あまり需要がないのでしょうか…?

PDFを商品ごとにアップする必要がある案件を担当するにあたり、右往左往しましたが、 ほとんど画像のアップロードを増やす要領で実現できたので、メモします!

まずは、文字列(PDFファイル名)を保存する為のUIを作ります。 商品ページへの基本的な項目の追加は下記の記事がとてもわかり易いです。[EC-CUBE] 2.13 商品詳細ページの項目追加(MySQL)

・625行目辺り「商品詳細の SQL を取得する」に追加 までは上記の手順でちゃちゃっと済ませておきます。

追加の項目名が不明だと分かりづらいので、 以降は manual と表現します。

次に、商品登録ページに入力欄を設置しますが、 ここはテキストではなく、input[type="file"] にします。 一覧-メイン画像の tr を複製し利用します。

html
<tr>
    <!--{assign var=key value="main_list_image"}-->
    <th>一覧-メイン画像<br />[<!--{$smarty.const.SMALL_IMAGE_WIDTH}-->×<!--{$smarty.const.SMALL_IMAGE_HEIGHT}-->]</th>
    <td>
        <a name="<!--{$key}-->"></a>
        <a name="main_image"></a> // ←←←ここは削除
        <a name="main_large_image"></a> // ←←←ここは削除
        <span class="attention"><!--{$arrErr[$key]}--></span>
        <!--{if $arrForm.arrFile[$key].filepath != ""}-->
        <img src="<!--{$arrForm.arrFile[$key].filepath}-->" alt="<!--{$arrForm.name|h}-->" /> <a href="" onclick="selectAll('category_id'); eccube.setModeAndSubmit('delete_image', 'image_key', '<!--{$key}-->'); return false;">[画像の取り消し]</a><br />
        <!--{/if}-->
        <input type="file" name="main_list_image" size="40" style="<!--{$arrErr[$key]|sfGetErrorColor}-->" />
        <a class="btn-normal" href="javascript:;" name="btn" onclick="selectAll('category_id'); eccube.setModeAndSubmit('upload_image', 'image_key', '<!--{$key}-->'); return false;">アップロード</a>
    </td>
</tr>

上のようなテンプレートの記述です。

  • // ←←←ここは削除 は必要ないので削除。
  • th の名前を変更
  • 名前下の画像の縦x横は .pdf のみなどアップロードできる拡張子を明記しておくと良いともいます。
  • main_list_image を manual(先程作った枠の項目名)に置き換え(2箇所)

入力欄はこれで完成です。

次に、商品ページ(LC_Page_Admin_Products_Product.php)の機能を拡張します。

  • lfInitFormParam()
  • lfInitFile() の関数にそれぞれ付け加えます。

lfInitFormParam() は、上の記事でも作業を行ったところですね。

php
// こういうのを追加していた場合
$objFormParam->addParam('取扱説明書', 'manual', STEXT_LEN, 'KVa', array('SPTAB_CHECK', 'MAX_LENGTH_CHECK'));

// 下記2行を追加(データの受け渡し用で使用)
$objFormParam->addParam('temp_manual', 'temp_manual', '', '', array());
$objFormParam->addParam('save_manual', 'save_manual', '', '', array());

lfInitFile() はアップロードファイルパラメーター情報の初期化する関数です。 アップロードファイルをプログラムに送りつける前に事前に枠を置いておくような感覚でしょうか。

php
$objUpFile->addFile('取扱説明書', 'manual', array('pdf'), IMAGE_SIZE, false, 0, 0, false);

これで、完了です。

実際に、PDFを選択し、アップロードすると、 /upload/temp_image/ フォルダに保存されます。 そのまま商品ページを保存すると、 /upload/save_image/ フォルダに保存されます。

また、データベース上でも確認してみると、 manual(先程作った枠の項目名)のところにPDFファイル名が入力されているはずです。

アップロードの機能は画像の仕組みをそのまま利用できるので、 非常に少ない追記で行うことができました。 途中でサムネイル生成の判定が入りますが、 main_image 系のみ反応するようなので、特に作業の必要がなく回避できるのはありがたかったです。

IMAGE_SIZE はシステム設定>パラメーター設定にあります。 初期値が 1MB だと思います。普通に足りないと思うので、 10MB ぐらいにしておくと、無難かと思われます。 また PDF だけ 10MB にしたい場合は、 引数の IMAGE_SIZE を 10000 にするとOKです。

確認や実際の表示は Aタグで開くようにしてあげると良いでしょう。


2017/11/24 追記

特に不具合は無かったのですが、 商品を複製する際に、「イメージの形式が不明です。」とエラーが出て処理が止まるようになってしまいました。 アップロード時のサムネイル生成は key 名で判定が入るので、カスタマイズ不要でしたが、 複製の際は別途機能を使うみたいなので、次のように追記する必要がありました。

/data/module/gdthumb.php

php
/*
 * サムネイル画像の作成
 * string $path
 * integer $width
 * integer $height
 */
function Main($path, $width, $height, $dst_file, $header = false) {
  // 追記
  if(strpos($path, '.pdf') !== false || strpos($path, '.PDF') !== false) {
    return array(1, false);
  }

  // 以降は、~元々の処理~
}