[EC-CUBE]カテゴリにコンテンツを登録できるようにする

カテゴリ管理画面のテンプレートを編集

/data/Smarty/templates/テンプレートコード/admin/products/category.tplを修正します。
編集箇所は<!–▼画面右–>以下

修正前


<!--▼画面右-->
<td width="428" valign="top">

<span class="red12"><!--{$arrErr.category_name}--></span>
<input type="text" name="category_name" value="<!--{$arrForm.category_name|escape}-->" size="30" class="box30" maxlength="<!--{$smarty.const.STEXT_LEN}-->"/>
<input type="submit" name="button" value="登録"/><span class="red10"> (上限<!--{$smarty.const.STEXT_LEN}-->文字)</span>
<table width="428" border="0" cellspacing="0" cellpadding="0" summary=" ">
<tr><td height="15"></td></tr>
</table>

修正後

<!--▼画面右-->
<td width="428" valign="top">

<!-- 編集中ここから -->
<table>
<tr>
<!--{assign var=key value="category_name"}-->
<td bgcolor="#f2f1ec" align="center" class="fs12n">カテゴリ名</td>
<td bgcolor="#FFFFFF">
<span class="red12"><!--{$arrErr&#91;$key&#93;}--></span>
<input type="text" name="<!--{$key}-->" value="<!--{$arrForm&#91;$key&#93;|escape}-->" size="30" class="box30" maxlength="<!--{$smarty.const.STEXT_LEN}-->"/>
<span class="red10"> (上限<!--{$smarty.const.STEXT_LEN}-->文字)</span>
</td>
</tr>
<tr>
<!--{assign var=key value="category_image"}-->
<td bgcolor="#f2f1ec" class="fs12n">カテゴリ画像<br />[669×150]</td>
<td bgcolor="#ffffff">
<a name="<!--{$key}-->"></a>
<a name="category_image"></a>
<span class="red12"><!--{$arrErr&#91;$key&#93;}--></span>
<!--{if $arrFile&#91;$key&#93;.filepath != ""}-->
<img src="<!--{$arrFile&#91;$key&#93;.filepath}-->" alt="<!--{$arrForm.name|escape}-->" />
<span class="red12">
<a href="" onclick="selectAll('category_id'); fnModeSubmit('delete_image', 'image_key', '<!--{$key}-->'); return false;">[画像の取り消し]</a><br>
</span>
<!--{/if}-->
<input type="file" name="category_image" size="50" class="box50" style="<!--{$arrErr&#91;$key&#93;|sfGetErrorColor}-->" />
<input type="button" name="btn" onclick="selectAll('category_id'); fnModeSubmit('upload_image', 'image_key', '<!--{$key}-->')" value="アップロード">
</td>
</tr>
<tr>
<td bgcolor="#f2f1ec" class="fs12n">カテゴリコメント<span class="red">(タグ許可)*</span></td>
<td bgcolor="#ffffff">
<span class="red12"><!--{$arrErr.category_comment}--></span>
<textarea name="category_comment" value="<!--{$arrForm.category_comment|escape}-->" maxlength="<!--{$smarty.const.LLTEXT_LEN}-->" style="<!--{if $arrErr.category_comment != ""}-->background-color: <!--{$smarty.const.ERR_COLOR}--><!--{/if}-->"  cols="60" rows="8" class="area60"><!--{$arrForm.category_comment|escape}--></textarea><br />
<span class="red10"> (上限<!--{$smarty.const.LLTEXT_LEN}-->文字)</span>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="button" value="登録" /></td>
</tr>
</table>
<!-- 編集中ここまで -->

<table width="428" border="0" cellspacing="0" cellpadding="0" summary=" ">
<tr><td height="15"></td></tr>
</table>

ymさんのコメントより

javascript selectAll()の追加

function IfDispSwitch(id) {略}
function fnMoveSelect(select, target) {略}
// target の子要素を選択状態にする
function selectAll(target) {
$('#' + target).children().attr({selected: true});
}

hidden “image_key”の追加と$arrHiddenの展開を追加

<form name="form1" id="form1" method="post" action="<!--{$smarty.server.PHP_SELF|escape}-->" enctype="multipart/form-data">
<input type="hidden" name="mode" value="edit">
<input type="hidden" name="image_key" value="">
<input type="hidden" name="parent_category_id" value="<!--{$arrForm.parent_category_id}-->">
<input type="hidden" name="category_id" value="<!--{$arrForm.category_id}-->">
<!--{foreach key=key item=item from=$arrHidden}-->
<input type="hidden" name="<!--{$key}-->" value="<!--{$item|escape}-->">
<!--{/foreach}-->

はい、これでテンプレートの修正はおしまい。
次は処理を行う部分のphpファイルを編集していきましょう!

スポンサーリンク
336x280_1
336x280_1

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
336x280_1

コメント

  1. homan より:

    トラックバックありがとうございます&反映が遅くなってしまって申し訳ないです(まさかトラックバックされているとは夢にも思わず、確認を怠っておりました)

    こうやって感化されて広がっていくのって、オープンソースらしくていいなーと感じているところです。僕もまだまだ勉強の途中なので、一緒にEC-CUBEを盛り上げていきましょうね♪

    ソースも見やすくていいサイトですね^^

  2. suzukenn より:

    おぉ!先生!
    いつも大変お世話になっております。
    お褒めいただき大変恐縮です。
    思いやりが足りないせいか先生のように見る人に優しい記事は書けずにいるのですが、先生を見習って精進したいと思っております。
    これからもご指導のほどよろしくお願いいたします。
    私も微力ながらこのBLOGでEC-CUBEを盛り上げる一助となれば幸いです。
    わざわざどうもありがとうございました!

  3. Side8810 より:

    こんにちは。とても参考にさせていただいております。
    上記のカスタマイズの件ですが、そのままコピーした状態ではファイルのアップロードができないようです。(アップロードボタンしても反応しない)
    非常に有用なカスタムだと思いますので、ぜひ実装したいです。
    宜しくお願いします。

  4. suzukenn より:

    Side8810さん、こんにちは 🙂
    コメントありがとうございます。

    アップロードボタンが反応しないとのことですので、おそらくは
    <input type="button" name="btn" onclick="selectAll(‘category_id’); fnModeSubmit(‘upload_image’, ‘image_key’, ‘<!–{$key}–>’)" value="アップロード">
    ボタンをonclickしたときのfnModeSubmit();呼び出しに失敗しているんじゃないかと思うんですが、すぐには原因の特定が難しいです。
    そのうちまとまった時間が取れたらこちらで検証してみたいと思いますので、今しばらくお時間ください。

    ちなみに、僕がこの記事を書くのに参考にさせていただいた穂万先生の記事
    http://www.eccube-school.jp/products/detail43.html
    の方法でもuploadフォルダにアップした画像を表示することが可能です。
    もしお急ぎでしたら先生の方法をご利用になることをお薦めします。

    この記事の内容を実装するには少なくともPHPの知識がある程度ないと正直難しいと思います。まずは穂万先生に習って、ただコピペするのではなくソースを理解しながら実装して、それから僕の方法にチャレンジしてもらうと理解も進んでいいんじゃないかなと思います。

    最後に余計な事とは思いつつ…
    僕もつい1,2年前まではPHPの事は何もわからない素人でした。
    なので、Webで見つけたコードをそのままコピペしてカスタマイズとかしてましたが、それだと何か想定外のことが起こると対応できないのですよね。
    ですので時間がかかってもそこに書かれたコードが何を意味するのか理解する努力をしてみるといいと思います。そうこうするうち今まで読めなかったソースが読めるようになって、楽しくなってくる。そうすると今度は自分で作ってみたくなる。どんどん上達するにつれて、実践でも活用できるようになりSide8810さんのお仕事の役にも立つと。
    一朝一夕というわけにはいきませんがぜひ頑張ってみてくださいね。

  5. ym より:

    通りすがりのものです。
    数日前に EC-CUBE を使い始めました。
    アップロードできない件ですがアップロードボタンにはりついている
    JavaScript の selectAll() 関数が未定義のようでした。
    (これは product.tpl からコピペ)
    あと、アップロード直後にファイル名を入れておく
    hidden フィールドも足りないような気がします。
    v2.3.3 で確認しました。
    単にカテゴリーに画像を貼るだけなのに、こんなに面倒とは。。
    このあたり想定できる機能なので標準でいれてほしいですよね。
    もしくはもっと簡単に拡張できないと。
    HTML タグで貼るのもなぁという気がします。

  6. suzukenn より:

    ymさん、はじめまして 🙂
    拙い僕の記事をフォローをしていただきましてありがとうございます!
    仰るとおり、このカスタマイズかなり苦労した覚えがありまして、見直すのは難儀だなぁと…なかなか手をつけられずにおりまして…(言い訳)
    ご指摘いただき大変助かりました。

    EC-CUBEは一筋縄ではいかないですね^^;
    特に管理画面は使い勝手にやや難がある上にカスタマイズが大変ということもあって、不便さを解消するためにCakePHPベースで管理機能を作って、そっちでDB操作をするようになりました(笑)
    商品の一括変更とか一覧からフラグを切り替えたりとか簡単なものばかりですけど重宝します 🙂
    EC-CUBEがCakePHP(他のフレームワークでもいいけど)ベースで作られてたら、もっと盛り上がるし開発も進むような気がするんですけどねぇ…なんて無責任な独り言でした。

  7. ym より:

    さっそく反映していただきましてありがとうございます。
    hidden フィールドですがもう一つ必要かもしれません。
    $arrHidden にセットされるものです。クラスのほうを
    ちゃんと確認してませんので、これで本当に良いのかどうか
    わかりませんが、category.tpl の先頭数行は次のようにしました。
    (v2.3.3 で確認したので他のバージョンには合わないかもしれません)
    ———————-8<————————-

    // target の子要素を選択状態にする
    function selectAll(target) {
    $(‘#’ + target).children().attr({selected: true});
    }

    <form name=”form1″ id=”form1″ method=”post” action=”” enctype=”multipart/form-data”>

    <input type=”hidden” name=”parent_category_id” value=”“>
    <input type=”hidden” name=”category_id” value=”“>

    <input type=”hidden” name=”” value=”“>

    ———————-8<————————-
    あと、v2.3.3 では管理画面のテンプレートだけは常に default のほうが
    使われるみたいですね。。これを理解するのにずいぶん時間が掛かってしまいました ^^;)

  8. suzukenn より:

    ymさん、本当にありがとうございます!ミスばかりで大変恐縮です >_< 仰るとおり、foreach で $arrHiddenを回す記述を忘れてました^^; 早速記事に反映させていただきますね 😉 ご迷惑ばかりおかけしますが、これからもご指導のほどよろしくお願いいたします。