試行錯誤の末に問題なく動作するようになったと思うので、メモ的に残しておきます。
利用したEC-CUBEのバージョンは『2.13.2』です。テンプレートは『EC-CUBE on Bootstrap3』にて制作されたものを利用させていただきます。開発中との事ですが、今後も期待しております。
Contents
最終的に仕上げたい感じ
商品詳細ページに『規格』が2つ用意されていますが、それ以上に必要な項目があったのでプルダウン形式のものを追加することにしました。規格①はカラー、規格②はサイズ、規格以外の追加項目として商品全てに関わる、『配置』と『仕上がり』という項目を追加しました。
DBにテーブル追加
追加した項目をマスターデータとして登録すると楽かな?と思ったので、phpMyAdminにてテーブルを追加しました。マスターデータとして扱うにはテーブル名の先頭を『mtb_』とします。フィールド数や名前などは他のテーブル参照で。
- 配置テーブル→mtb_position
- 仕上がりテーブル→mtb_finish
テーブルにフィールド追加
受注したデータを保存しておくテーブルが『dtb_order_detail』になります。こちらに以下のフィールドを追加。データ型は『text』としました。
- 配置→position_set
- 仕上がり→finish_set
テンプレートファイルの修正
テンプレートを追加する際に『ecbootstrap3』としました。パス的には『Smarty/templates/ecbootstrap3/』です。修正するときはバックアップを取ったほうが良いと思います!
カスタマイズファイル:products/detail.tpl
①238行目付近に追加。エラー処理も入ってますが、空欄の選択項目が無いので、無くてもよかった。
<!--{* 【追加】 *}-->
<div class="clearfix form-group<!--{if $arrErr.position_set != ""}--> has-error<!--{/if}-->">
<label for="position_set" class="col-sm-5 control-label">配置:</label>
<div class="col-sm-7">
<select id="position_set" class="form-control" name="position_set" style="<!--{$arrErr.position_set|sfGetErrorColor}-->">
<!--{html_options options=$arrPOSITION selected=$arrForm.position_set.value}-->
</select>
<!--{if $arrErr.position_set != ""}-->
<br /><label class="attention" for="position_set">※ 配置を入力して下さい。</label>
<!--{/if}-->
</div>
</div>
<!--{* 【追加】 *}-->
<div class="clearfix form-group<!--{if $arrErr.finish_set != ""}--> has-error<!--{/if}-->">
<label for="finish_set" class="col-sm-5 control-label">仕上がり:</label>
<div class="col-sm-7">
<select id="finish_set" class="form-control" name="finish_set" style="<!--{$arrErr.finish_set|sfGetErrorColor}-->">
<!--{html_options options=$arrFINISH selected=$arrForm.finish_set.value}-->
</select>
<!--{if $arrErr.finish_set != ""}-->
<br /><label class="attention" for="finish_set">※ 仕上がりを入力して下さい。</label>
<!--{/if}-->
</div>
</div>
カスタマイズファイル:cart/index.tpl
①115行目付近に追加。
<div class="col-xs-9 col-sm-5 col-md-7"><!--{* 商品名 *}-->
<strong>
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$item.productsClass.product_id|u}-->"><!--{$item.productsClass.name|h}--></a>
</strong>
<!--{if $item.productsClass.classcategory_name1 != ""}-->
<div><small><!--{$item.productsClass.class_name1|h}-->:<!--{$item.productsClass.classcategory_name1|h}--></small></div>
<!--{/if}-->
<!--{if $item.productsClass.classcategory_name2 != ""}-->
<div><small><!--{$item.productsClass.class_name2|h}-->:<!--{$item.productsClass.classcategory_name2|h}--></small></div>
<!--{/if}-->
<!--{if $item.position_set != ""}-->
<div><small>配置:<!--{$item.position_set|h}--></small></div>
<!--{/if}-->
<!--{if $item.finish_set != ""}-->
<div><small>仕上がり:<!--{$item.finish_set|h}--></small></div>
<!--{/if}-->
<div>
価格:<!--{$item.price_inctax|number_format|h}-->円
</div>
</div>
カスタマイズファイル:shopping/confirm.tpl
①63行目付近に追加。
<div class="col-xs-9 col-sm-10 col-md-11 padding-right-none">
<strong><!--{$item.productsClass.name|h}--></strong>
<ul class="list-unstyled">
<!--{if $item.productsClass.classcategory_name1 != ""}-->
<li><small><!--{$item.productsClass.class_name1|h}-->:<!--{$item.productsClass.classcategory_name1|h}--></small></li>
<!--{/if}-->
<!--{if $item.productsClass.classcategory_name2 != ""}-->
<li><small><!--{$item.productsClass.class_name2|h}-->:<!--{$item.productsClass.classcategory_name2|h}--></small></li>
<!--{/if}-->
<!--{* 【追加】 *}-->
<!--{if $item.position_set != ""}-->
<li><small>配置:<!--{$item.position_set|h}--></small></li>
<!--{/if}-->
<!--{if $item.finish_set != ""}-->
<li><small>仕上がり:<!--{$item.finish_set|h}--></small></li>
<!--{/if}-->
<li><small>価格:<!--{$item.price_inctax|number_format}-->円</small></li>
</ul>
</div>
カスタマイズファイル:mail_templates/order_mail.tpl
①55行目付近に追加。配送情報の『単価』と『数量』は必要なかったので削除した。
************************************************
ご注文商品明細
************************************************
<!--{section name=cnt loop=$arrOrderDetail}-->
商品コード: <!--{$arrOrderDetail[cnt].product_code}-->
商品名: <!--{$arrOrderDetail[cnt].product_name}--> <!--{$arrOrderDetail[cnt].classcategory_name1}--> <!--{$arrOrderDetail[cnt].classcategory_name2}-->
配置: <!--{$arrOrderDetail[cnt].position_set}-->
仕上がり: <!--{$arrOrderDetail[cnt].finish_set}-->
単価:¥<!--{$arrOrderDetail[cnt].price|sfCalcIncTax:$arrOrderDetail[cnt].tax_rate:$arrOrderDetail[cnt].tax_rule|number_format}-->
数量:<!--{$arrOrderDetail[cnt].quantity}-->
テンプレートの変更はこの辺り。この記事を書いてて思い出したのが会員ページまわりを忘れてたって事。
長くなったので次回(クラスファイルの修正)へ続きます。
[…] 前回はテンプレートファイルのカスタマイズをしたのでその続きから始めます。 […]
現在、参考にさせていただき、作成していますが、
商品詳細ページに項目は配置出来た物の、それを「現在のカゴの中」ページへ表示させる事ができません。
DBにミスがあるのかと考えているのですが、
「フィールド数や名前などは他のテーブル参照」とありますが、
たとえば、管理画面で追加項目の商品詳細画面への表示を「可・否」とする場合にはどのように対策すればよいのでしょうか。
度々済みません。こちら管理画面のカスタマイズでつまづいております、、宜しければ、ご教授頂けませんでしょうか? よろしくお願いします!
[…] EC-CUBEで規格以外に項目を追加した① […]